Feat: Hotjar, Sentry 설치 및 초기 설정

[dev-dong-su]

💻 개요

• 신규 피처
• [Feature] Hotjar, Sentry 추가 작업 #205

📋 변경 및 추가 사항

분리가 필요없다고 판단되는 몇몇 constatns 파일을 common에 통합했습니다.

6fd324c

Hotjar가 추가되었습니다.

main.tsx 에서 초기화 됩니다. Hotjar와 GA는 production 에서만 데이터를 수집하는게 맞다고 생각해 Sentry와는 구분했습니다.
Hotjar에 필요한 HJID, HJSV 는 딱히 숨길 필요가 없어 constants 파일에 정의했습니다.

    if (import.meta.env.VITE_NODE_ENV === 'production') {
      ReactGA.initialize(import.meta.env.VITE_GA_TRACKING_ID);

      hotjar.initialize({ id: HJID, sv: HJSV });
    }

3fd7bba

Sentry가 추가되었습니다.

마찬가지로 main.tsx에서 초기화 됩니다. 개발버전(staging) 에서 QA를 진행하기에 개발버전의 오류도 수집할 수 있도록 따로 분리해 초기화했습니다.
개발환경 development 에서는 Sentry가 초기화되지 않습니다.
에러 모니터링, API 퍼포먼스 모니터링, 세션 리플레이 기능이 켜져 있는 설정입니다.

      Sentry.init({
        dsn: import.meta.env.VITE_SENTRY_DNS,
        integrations: [
          Sentry.browserTracingIntegration(),
          Sentry.replayIntegration(),
        ],

        // Performance Monitoring
        tracesSampleRate: 1.0,
        tracePropagationTargets: ['localhost', /^https:\/\/api.snackga.me/],

        // Session Replay
        replaysSessionSampleRate: 0.1,
        replaysOnErrorSampleRate: 1.0,
      });

8a6f242

Errorboundary 에러를 수집

세부적인 수집을 고려하기 전 Errorboundary가 잡아내는 오류들은 모두 수집되는게 맞다고 생각해 Sentry가 Errorboundary의 오류를 캡쳐할 수 있도록 변경했습니다.

  componentDidCatch(error: Error): void {
    Sentry.withScope((scope) => {
      scope.setLevel('error');
      Sentry.captureMessage(
        `🚨 에러: [${error.name}] ${window.location.href}\n${error.message}`,
      );
    });
  }

4bd0e8f

💬 To. 리뷰어

sentry의 경우 테스트를 해서 잘 작동하는걸 확인했는데 한 가지 문제가 있다면 에러바운더리에서 잡아낸 오류가 Unhandled오류로 판단되어 sentry에 오류 로그가 2번 찍히게 되는 부분이 있네용...

에러 핸들링을 더 공부하고 고쳐봐야겠어요..

[nijuy]

분리가 필요없다고 판단되는 몇몇 constatns 파일을 common에 통합했습니다.

common 파일이 생기면서 파일 수도 줄고 네트워크/브라우저 스토리지/.. 등등 분류가 더 명확해졌네요!! 좋숩니다 🤩

한 가지 문제가 있다면 에러바운더리에서 잡아낸 오류가 Unhandled오류로 판단되어 sentry에 오류 로그가 2번 찍히게 되는 부분이 있네용...

sentry에서 Errorboundary 컴포넌트를 제공하길래 코드를 좀 살펴봤는데,
여기에는 fallback prop 유무로 handled 값을 정하는 로직이 들어있네요!!

근데 Sentry.ErrorBoundary로 바꾸는 거보다 걍 저걸 스겜 에러바운더리에 넣는 게 편할 거 같....은디
이 부분을 추가해보면은 어떨까요

  componentDidCatch(error: Error): void {
    Sentry.withScope((scope) => {
      scope.setLevel('error');
      Sentry.captureMessage(
        `[🚨 ${import.meta.env.VITE_NODE_ENV}에러 ${error.name}]: ${window.location.href}`,
      );
      Sentry.captureException(error, {
        mechanism: {handled: !!this.props.fallback}
      }) // 요깅.......... 아마도......... 이러면 될 거 같음 아닐수도 ^^..............................
    }); 
  }

• 관련 이슈 (왜 전에는 handled = false 로 설정되었는지 코멘트에 이유가 있음)
• 사진 속 로직이 추가된 PR 링크

.env 파일 내용도 추가된 거 같은데 카톡이나 디코로다가,,, 한번 공유해주시면 감사입니다

[dev-dong-su]

오호! 첨부해주신 PR을 읽으니까 확실히 이해가 되네요. 하마타면 삽질할 뻔했네요... ㅋㅋㅋ
리뷰 짱짱맨 입니다 👍
Sentry의 errorboundary 코드 참고해서 수정했습니다! 테스트 해보니 잘 되네요!