<div id="readability-page-1" class="page"><div>Sentry를 Content script extension에 세팅하면서 발생했던 문제들을 기록한다.
<h2 id="cors">CORS</h2>
<ul>
<li>다른 도메인의 페이지에서 임베딩되어 실행되는 content script 타입의 extension 의 경우, Sentry 로 에러로그를 전송할 때 CORS 이슈가 발생한다.</li>
<li><a href="https://docs.sentry.io/platforms/javascript/best-practices/shared-environments/">지원한다고는 써있는데</a> 왜 동작을 안하는지는 아직도 의문이다. 아마 content script 타입이 아닌 다른 타입의 extension 의 경우에만 지원하는 듯 하다.</li>
</ul>
<h2 id="해결방법">해결방법</h2>
background 를 경유해서 호출하는 구조를 만들어주면 된다. 
<code>Content script</code> -&gt; <code>Background</code> -&gt; <code>Sentry</code>
<hr>
<h2 id="content---background에서-error-객체-소실">content -&gt; Background에서 error 객체 소실</h2>
<ul>
<li><code>content script</code> -&gt; <code>background</code> 구간에서 파라미터로 전달한 에러가 소실되는 이슈가 있다. 비단 에러 뿐만아니라 콜백함수를 넘겨도 background에서 null로 변환되어 처리된다.<blockquote>
크롬 익스텐션의 chrome.runtime.sendMessage()나 chrome.runtime.onMessage는 
내부적으로 메시지를 JSON 형태로 직렬화/역직렬화합니다. 
따라서 함수, 에러 객체, 원형 체인(Prototype), 심볼 등은 보낼 수 없고 자동으로 제거되거나 null, {}로 변환됩니다. <a href="https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=ko#simple">(참고)</a>
</blockquote></li>
</ul>
<h2 id="해결방법-1">해결방법</h2>
<ol>
<li>에러객체의 경우 별도의 직렬화/역직렬화 함수를 구현한다.</li>
</ol>
<pre><code>export function serializeError(error: Error | any): any {
 if (error instanceof Error) {
 return {
 name: error.name,
 message: error.message,
 stack: error.stack,
 ...Object.getOwnPropertyNames(error).reduce((acc, key) =&gt; {
 acc[key] = error[key];
 return acc;
 }, {} as any),
 };
 }
 return error;
}

export function deserializeError(serializedError: any): Error {
 if (
 serializedError &amp;&amp;
 typeof serializedError === 'object' &amp;&amp;
 serializedError.name
 ) {
 const error = new Error(serializedError.message);
 error.name = serializedError.name;
 error.stack = serializedError.stack;

 Object.keys(serializedError).forEach((key) =&gt; {
 if (key !== 'message' &amp;&amp; key !== 'name' &amp;&amp; key !== 'stack') {
 (error as any)[key] = serializedError[key];
 }
 });

 return error;
 }
 return serializedError;
}
</code></pre>
<ol start="2">
<li>
content script &gt; 에러객체를 직렬화해서 background로 전달한다.
</li>
<li>
background &gt; 직렬화된 error 객체를 역직렬화하여 sentry로 넘긴다.
</li>
</ol>
<hr>
<h2 id="captureexception-동작안함">captureException 동작안함</h2>
<ul>
<li>captureMessage을 통해서 전달된 로그는 잘 쌓이는데, captureException로 전달한 로그는 대시보드에 나타나지 않는 이슈가 있었다.</li>
<li>코드상에서는 init 시에 설정해둔 beforeSend 이벤트 핸들러도 정상 동작함을 확인했다.</li>
<li>sentry 까지는 제대로 전송이 되지만, sentry에서 필터링을 하는것이 아닌가 하는 의문이 있었다.</li>
</ul>
<h2 id="해결방법-2">해결방법</h2>
</div></div>

ginameee.log

Jangchun Lee

Sentry를 Content script extension에 세팅하면서 발생했던 문제들을 기록한다.
CORS
다른 도메인의 페이지에서 임베딩되어 실행되는 content script 타입의 extension 의 경우, Sentry 로 에러로그를 전송할 때 CORS 이슈가 발생한다.
지원한다고는 써있는데 왜 동작을 안하는지는 아직도 의문이다. 아마 content script 타입이 아닌 다른 타입의 extension 의 경우에만 지원하는 듯 하다.
해결방법
Content script -> Background -> Sentry
content -> Background에서 error 객체 소실
content script -> background 구간에서 파라미터로 전달한 에러가 소실되는 이슈가 있다. 비단 에러 뿐만아니라 콜백함수를 넘겨도 background에서 null로 변환되어 처리된다.
크롬 익스텐션의 chrome.runtime.sendMessage()나 chrome.runtime.onMessage는
내부적으로 메시지를 JSON 형태로 직렬화/역직렬화합니다.
따라서 함수, 에러 객체, 원형 체인(Prototype), 심볼 등은 보낼 수 없고 자동으로 제거되거나 null, {}로 변환됩니다. (참고)
해결방법
에러객체의 경우 별도의 직렬화/역직렬화 함수를 구현한다.
export function serializeError(error: Error | any): any {
if (error instanceof Error) {
 return {
   name: error.name,
   message: error.message,
   stack: error.stack,
   ...Object.getOwnPropertyNames(error).reduce((acc, key) => {
     acc[key] = error[key];
     return acc;
   }, {} as any),
 };
}
return error;
}
export function deserializeError(serializedError: any): Error {
  if (
    serializedError &&
    typeof serializedError === 'object' &&
    serializedError.name
  ) {
    const error = new Error(serializedError.message);
    error.name = serializedError.name;
    error.stack = serializedError.stack;
Object.keys(serializedError).forEach((key) => {
  if (key !== 'message' && key !== 'name' && key !== 'stack') {
    (error as any)[key] = serializedError[key];
  }
});
return error;
  }
  return serializedError;
}
2. content script > 에러객체를 직렬화해서 background로 전달한다.
3. background > 직렬화된 error 객체를 역직렬화하여 sentry로 넘긴다.
---
# captureException 동작안함
- captureMessage을 통해서 전달된 로그는 잘 쌓이는데, captureException로 전달한 로그는 대시보드에 나타나지 않는 이슈가 있었다.
- 코드상에서는 init 시에 설정해둔 beforeSend 이벤트 핸들러도 정상 동작함을 확인했다.
- sentry 까지는 제대로 전송이 되지만, sentry에서 필터링을 하는것이 아닌가 하는 의문이 있었다.
## 해결방법
- 일단 실제로 필터링이 되고있는지를 확인해야한다. 어떤에러가 필터링되는지는 정확한 파악이 불가능하지만, 대충 필터링 된 에러숫자를 보고 유추해본다.
![](https://velog.velcdn.com/images/ginameee/post/433e2963-2c3d-4db0-b0b1-7aff106d9ce1/image.png)
- 프로젝트 설정에서 inbound filter 를 하나하나 활성/비활성화 해보면서 테스트해본다.
![](https://velog.velcdn.com/images/ginameee/post/11f5bb89-e90c-4386-bf82-b944ce56b262/image.png)
- 나의 경우 첫번째 필터가 영향을 미쳤다.
- 사실 [여기](https://docs.sentry.io/platforms/javascript/best-practices/shared-environments/#browser-extension-filter)에 이미 다 나와있었는데 문서를 제대로 못본 내탓이다.
![](https://velog.velcdn.com/images/ginameee/post/2f05d08c-6d29-46ec-96a0-080410e42866/image.png)

Troubleshooting for Sentry with Browser Extension

댓글