Sentry를 Content script extension에 세팅하면서 발생했던 문제들을 기록한다.

CORS

• 다른 도메인의 페이지에서 임베딩되어 실행되는 content script 타입의 extension 의 경우, Sentry 로 에러로그를 전송할 때 CORS 이슈가 발생한다.
• 지원한다고는 써있는데 왜 동작을 안하는지는 아직도 의문이다. 아마 content script 타입이 아닌 다른 타입의 extension 의 경우에만 지원하는 듯 하다.

해결방법

background 를 경유해서 호출하는 구조를 만들어주면 된다.
Content script -> Background -> Sentry

content -> Background에서 error 객체 소실

• content script -> background 구간에서 파라미터로 전달한 에러가 소실되는 이슈가 있다. 비단 에러 뿐만아니라 콜백함수를 넘겨도 background에서 null로 변환되어 처리된다.

  크롬 익스텐션의 chrome.runtime.sendMessage()나 chrome.runtime.onMessage는
  내부적으로 메시지를 JSON 형태로 직렬화/역직렬화합니다.
  따라서 함수, 에러 객체, 원형 체인(Prototype), 심볼 등은 보낼 수 없고 자동으로 제거되거나 null, {}로 변환됩니다. (참고)

해결방법

1. 에러객체의 경우 별도의 직렬화/역직렬화 함수를 구현한다.

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에서 필터링을 하는것이 아닌가 하는 의문이 있었다.

해결방법

• 일단 실제로 필터링이 되고있는지를 확인해야한다. 어떤에러가 필터링되는지는 정확한 파악이 불가능하지만, 대충 필터링 된 에러숫자를 보고 유추해본다.
  
• 프로젝트 설정에서 inbound filter 를 하나하나 활성/비활성화 해보면서 테스트해본다.
  
• 나의 경우 첫번째 필터가 영향을 미쳤다.
• 사실 여기에 이미 다 나와있었는데 문서를 제대로 못본 내탓이다.