fix: 센트리가 제대로 동작하지 않는 문제 수정

[not-using]

문제 원인

• fixes 센트리가 제대로 동작하지 않는 문제 #604

• BrowserTracing import 방식이 아주 오래전 방식

  • 조만간 패키지 자체가 사라질 수도 있어서 수정 필요
    [v8] Remove @sentry/tracing package getsentry/sentry-javascript#8796

변경 사항

• BrowserTracing 방식 수정, react-router에 맞는 통합 설정 적용

• Replay 설정 추가

• 센트리 설정 코드가 길어져서 config/sentry.ts로 분리

• env REACT_APP_ENV 추가

  • 기존 코드는 개발서버/테스트서버 등에 대처하기 어려웠음
  • 백엔드 api로 유추하는 실행환경 대신 직접적으로 명시

• axios 오류 상황뿐만 아니라 UI 랜더링 오류등 기타 클라이언트 오류도 잡히도록 ErrorBoundary 설정

참고

https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/
https://docs.sentry.io/platforms/javascript/guides/react/session-replay/

• 센트리, 구글GA 연결된 계정
  • library4242 Google
  • 인증정보는 슬랙 참고

Perfomance 활용

• 사용자 환경에서의 성능 측정이 가능
• lighthouse와 함께 성능 최적화 작업때 도움이 될 것

Replay 활용

• 에러가 발생한 직전 상황을 확인할 수 있음
• 유저의 동작을 참고해서 에러 상황을 재연할 때 도움이 될 것
  

[chanhihi]

확인했습니다. sentry로 로그와 통계 보는 법을 공유해주시면 너무 감사할것 같습니다 ~!

리플레이로 에러잡기 편해지겠네요!