[F/E] Sentry

□ Sentry란?

Sentry는 실시간 에러 로그 취합 및 모니터링을 제공하는 개발자 우선의 애플리케이션 모니터링 서비스이다.

사용자가 “등록하는데 에러가 납니다.”라고 연락 올 때까지 기다리지 않고, 에러가 발생하는 순간 알림을 통해 개발자가 바로 알 수 있다.

핵심 기능

• Issue Grouping: 비슷한 이벤트 로그를 하나의 이슈로 통합
• Session Replay: 에러 발생 시점의 사용자 행동을 비디오 형태로 재현
• 소스맵 지원: 압축된 코드에서도 원본 파일 추적 가능
• 실시간 알림 기능: 에러 발생 시 등록된 통신 수단으로 알림 가능

역할과 필요성

• 기존 에러 발생 시 문제점

          - 어떤 상황에서 에러가 났는지 재현이 어려움

• Sentry를 통한 기존 에러 발생 시 문제점 보완

          - 에러 발생 즉시 알림 (Slack, Jira, GitHub, E-Mail 등)

          - 에러가 난 상황을 상세하게 기록 (브라우저 종류, URL, API requset, response 등..)

          - 실제 사용자 화면을 녹화해서 에러 재현 과정까지 보여줌

□ React에서 Sentry 기본 설정

설치 및 초기화 (기본)

에러 바운더리 연동

리액트 컴포넌트 에러를 탐지하고 Sentry로 전송이 가능하도록 에러 바운더리를 제공

이벤트 전송 API

다른 프론트엔드 환경에서의 차이점

□ 실무 도입 시 주의사항

개인정보 보호 (민감정보 필터링)

• 사용자 이메일, 전화번호, 주소 등 민감한 데이터는 beforeSend에서 미리 필터링
• Session Replay에서 입력 필드 내용이 그대로 녹화될 수 있음
• sendDefaultPii: false 설정으로 기본 개인정보 차단 가능

성능 오버헤드 방지

• 트레이스 샘플링을 100%로 두면 성능 저하 심각
• Session Replay도 모든 세션을 녹화하면 서버 비용 폭증
• 운영환경에서는 샘플링 비율을 10% 이하로 설정 권장

알림 설정 전략

• 중요도별로 알림 채널과 빈도 차별화를 두어 피로도 조절 (새 이슈는 즉시, 기존 이슈는 빈도 기준으로 알림)
• 팀별로 담당 영역 나눠서 알림 받도록 설정

□ 결론

• 프론트엔드 개발을 진행하며, 단위 및 통합 테스트를 꼼꼼하게 진행 하여도 놓치는 에러가 발생하기 마련이다.
• 테스트 자동화 도구를 도입해도 테스트 코드 작성자에 따라 빈틈이 생길 수 있고, 사용자가 에러를 신고해와도 충분한 로그가 없다면 에러 재현과 원인 파악이 어렵다.
• Sentry를 도입하면 "에러를 당하는" 것에서 "에러를 관리하는" 개발 문화로 전환할 수 있어, 보다 안정적이고 효율적인 서비스 운영이 가능할것이라고 생각한다.

                                                                                                                                                                                                                               ⭐발표자 : 이선우님