[FE] 에러 트래킹을 위한 Sentry 환경 구축, 사용자 행동 분석을 위한 GA 환경 구축

[hwinkr]

관련 이슈

• resolves: [FE] Sentry, GA를 사용한 프론트엔드 모니터링 시스템을 구축해요 :) #168

작업 내용

1) 에러 트래킹을 위한 Sentry 환경 구축

• 배포 환경에서 장애가 발생했을 때, 데이터를 수집하기 위해 사용할 Sentry 기본 환경을 구축했어요.
• 디스코드 알람과 연동해서, 디스코드 모모 서버 🚨프론트엔드-에러로깅🚨 채널에 알람이 올 수 있도록 했어요.
• 주의사항
  • 어떤 파일의 어떤 줄(L)에서 예외가 발생했는지 확인하기 위해서, source-map을 활용합니다.
  • 항상 배포 환경에서 사용하는 번들 js 파일을 난독화하는 source-map과 sentry에서 에러 트래킹에 사용하는 source-map이 싱크가 맞아야하는 것을 주의해야 합니다.
  • 그래서 앞으로 배포할 때 CD를 적용한다면, 해당 yml 파일에서 새롭게 번들링된 js 파일에 대한 source-map을 Sentry에 올리기 위한 job을 추가해야할 것 같아요!
  • 참고 : https://docs.sentry.io/platforms/javascript/sourcemaps/

2) 사용자 행동 분석을 위한 GA 환경 구축

• 모모 서비스를 이용하는 사용자의 행동 분석을 위한 GA 환경을 구축했어요
• index.html 파일에 Google Analytics에서 제공하는 스크립트 코드를 넣어서 등록했고, 최근 30분간 방문 사용자를 추적할 수 있음을 확인했습니다.
• 앞으로 어떤 행동 지표를 중점적으로 분석할지 결정하고, 점진적으로 지표 수집을 해가야할 것 같아요!

특이 사항

리뷰 요구사항 (선택)

[github-actions]

Test Results

5 tests   5 ✅  3s ⏱️
1 suites  0 💤
1 files    0 ❌

Results for commit acfd743.

♻️ This comment has been updated with latest results.

[Largopie]

👍 따봉해리

[Yoonkyoungme]

모두 모두 수고하셨습니다 🔮🍀🐪
해리 깔끔하게 잘 정리해줘서 고마워요 :)