프론트엔드 모니터링 및 디버깅 환경 구축

🚨 에러 모니터링

1️⃣에러 모니터링 환경 구축이 필요한 이유

• 더 안정적인 서비스를 운영하기 위해서
• 어떤 에러가 발생하고 있는지 수집, 추적하여 해결하기 위해서
• 다양한 사용자에게 발생하는 에러를 수집, 데이터화 하기 위해서
• 배포 환경에서 QA할 때 디버깅을 용이하게 하기 위해서

2️⃣선택한 에러 모니터링 도구

• Sentry
  • Sentry 선정 이유
  • 실제 사용자의 행동을 기록하고 재현할 수 있기 때문
  • 대시보드와 리포트를 통해 오류 추이와 영향도를 실시간으로 확인할 수 있기 때문
  • 소스맵 설정을 통해 에러가 어디에서 발생했는지 추적 가능하기 때문
  • 라벨링, Priority 설정할 수 있고, 슬랙 알람을 연동할 수 있기 때문

3️⃣구축한 에러 모니터링 환경

• Sentry 적용
• env 라벨링으로 development, production 설정
• 단, dev-server에서는 Sentry로 전송 안되도록 설정
• 소스맵 적용하여 에러난 위치의 소스 코드 확인 가능하도록 설정
• Sentry의 ErrorBoundary 적용
• Slack 연동(issue별, event 10회)
• 이외에 Tag, context 적용 아직 안함

🙌 사용자 행동 모니터링

1️⃣사용자 행동 모니터링 환경 구축이 필요한 이유

• 실제 사용자들이 우리 서비스를 어떻게 얼마나 이용하고있는지 파악하기 위해서
• 새로운 기능을 개발하거나 개발한 기능에 대해 정량적인 데이터를 쌓기 위해서
• 팀 내부 의사결정을 위한 정량적인 근거 자료로 사용하기 위해서

2️⃣선택한 사용자 행동 모니터링 도구

• GA(Google Analytics)
  • GA 선정 이유
  • 사용자 행동 패턴, 유입 경로, 전환율 등을 심도 있게 분석할 수 있기 때문
  • 실시간 보고서, 맞춤 대시보드, 세그먼트 분석 등 다양한 분석 기능을 제공하기 때문
  • 설정이 간단하고, 무료버전에서도 충분하고 다양한 기능을 제공하기 때문

3️⃣구축한 사용자 행동 모니터링 환경

• GA(Google Analytics) 적용
• 시간 경과에 따른 페이지 경로 및 화면 클래스별 조회수 확인
• 스크롤 이벤트는 추적 X
• 추후 유의미한 데이터 수집을 위해 커스터마이징 할 예정
  • 추적할 데이터
    • 코드 템플릿 업로드 수
    • 템플릿 상세페이지 조회 수
    • 스니펫 복사 버튼 클릭 수
    • 재방문 수