프론트엔드
Next.js에서 Sentry로 프론트엔드 에러 모니터링하기
두줄요약
Next.js에서 Sentry를 도입해 프론트엔드 에러 모니터링을 강화한 사례를 정리했습니다. 수집 범위와 알림 기준을 조정해 중요한 오류만 선별하고 디버깅 정보를 보완했습니다.
문제 상황
- 기존 CloudWatch Logs와 유저 문의만으로는 에러 유형, 사용자 흐름, 환경 추적에 한계
- Sentry 도입 초기에는 알림 과다, 무관한 에러 혼재, API 디버깅 정보 부족으로 활용 저하
원인 분석
- 수집 대상과 유형을 명확히 정의하지 않아 중요한 에러 선별이 어려움
- 에러별 분석에 필요한 요청·응답·헤더·쿠키 정보와 분류 기준을 충분히 반영하지 못함
해결 방법
- 5xx API 에러와 React 렌더링 에러 중심으로 수집 범위 축소
- Axios 인터셉터, Error Boundary,
beforeSend, 태그, Context를 활용해 선별 수집과 분류 강화 - 브라우저 전용 통합 한계를 보완하기 위해 서버/클라이언트별로 필요한 데이터 첨부 방식 조정
주의할 점
- 4xx는 사용자 입력 오류나 의도된 실패가 많아 장애 가능성과 구분 필요
- Context 8KB 제한과 개인정보 보호를 고려한 스크러빙 필요
- Next.js 버전과 Sentry 연동 제약으로
global-error.tsx,error.tsx,captureException()사용 여부 확인 필요