프론트엔드 모니터링 도구: Sentry

전체 시스템 아키텍처

Sentry는 단순히 데이터를 쌓는 저장소가 아니라, 대규모 트래픽을 처리하기 위한 비동기 파이프라인 구조를 가지고 있습니다.

• Client-Side (SDK): 사용자 행동 및 에러 캡처.
• Relay (Proxy): 데이터 유효성 검사, 민감 정보 필터링 및 Rate Limiting.
• Ingestion (Kafka): 대량 데이터의 비동기 처리를 위한 큐.
• Processing (Snuba/Symbolicator): 인덱싱 및 소스맵 대조를 통한 데이터 가공.
• Storage & Visualization: PostgreSQL/ClickHouse 저장 후 대시보드 시각화.

주요 데이터 영역

크게 세 가지 영역을 가지고 전체 애플리케이션 상태를 관리합니다.

Errors

• 어떤 문제인가: 예외 상황, 크래시, 런타임 오류.
• 목표: 코드의 무결성 확보 및 버그 수정.
• 기능: Stack Trace, Breadcrumbs

Performance

• 어떤 문제인가: 느린 API 호출, 무거운 프론트엔드 렌더링, DB 쿼리 병목.
• 기능: Distributed Tracing(분산 추적). 프론트엔드부터 백엔드까지 하나의 요청이 지나가는 전 경로의 소요 시간을 측정합니다.

Usage & Context

• 어떤 정보인가: 어떤 사용자가 어떤 환경(OS, 브라우저)에서 어떤 경로(Breadcrumbs)로 앱을 이용했는가.
• 기능: Session Replay, 사용자 특정(PII). 사용자의 실제 화면 조작을 재현하여 에러가 발생한 '상황' 자체를 이해합니다.

세팅 방법 (React + Vite 기준)

SDK 초기화 및 기본 설정

Sentry.init({
  dsn: import.meta.env.VITE_SENTRY_DSN || '', // 프로젝트 고유 식별 주소
  sendDefaultPii: true, // IP, 사용자 ID 등 개인 식별 정보 수집 허용 (문맥 파악 용이)
  tracesSampleRate: 1.0, // 성능 데이터 수집 비율 (1.0 = 100%)
});

• DSN: Sentry 서버로 데이터를 보내는 주소입니다.
• PII 설정: 에러가 '누구에게' 발생했는지 특정할 수 있게 하여 고객 대응을 가능하게 합니다.

페이지 이동 및 성능 추적

integrations: [
  Sentry.reactRouterV7BrowserTracingIntegration({
    useEffect,
    useLocation,
    useNavigationType,
    createRoutesFromChildren,
    matchRoutes,
  }),
  Sentry.browserProfilingIntegration(), // 함수 단위 실행 속도 분석
],

• React Router v7 연동: 단순 에러가 아니라 어떤 페이지(URL)에서 문제가 생겼는지 경로별로 데이터를 묶어줍니다.
• Profiling: 브라우저에서 JavaScript가 실행될 때 어떤 함수가 CPU를 많이 점유하는지 실시간으로 기록합니다.

사용자 행동 기록 및 재현

integrations: [
  Sentry.consoleLoggingIntegration({ levels: ['log', 'warn', 'error'] }), // 콘솔 로그 캡처
  Sentry.replayIntegration(), // 사용자 화면 녹화
],
replaysSessionSampleRate: 0.1, // 일반 세션 10% 녹화
replaysOnErrorSampleRate: 1.0, // 에러 발생 시 100% 녹화

• Console Integration: 사용자의 브라우저 콘솔에 찍힌 로그를 Breadcrumbs에 포함시켜 에러 직전의 상태를 텍스트로 보여줍니다.
• Session Replay: 사용자가 화면을 클릭하고 스크롤하는 과정을 비디오처럼 다시 볼 수 있게 합니다. 특히 에러 발생 시 무조건 녹화하여 재현 경로를 확보합니다.

모니터링 방법

💡 Insight: Sentry의 강력함은 문맥에 있습니다. "에러가 났다"는 사실보다 "누가, 무엇을 하다가, 어떤 로그를 남기고 에러를 만났는가"를 한눈에 보여줌으로써 디버깅 시간을 획기적으로 줄여줍니다.

Issues: 에러 원인 파악 및 우선순위 결정

• Stack Trace 확인: 소스맵이 연동되어 있다면, 압축된 코드가 아닌 실제 작성한 코드의 몇 번째 줄에서 에러가 났는지 즉시 확인합니다.
• Breadcrumbs 추적: 에러 발생 직전에 찍힌 console.log와 사용자가 클릭한 버튼, 이동한 URL을 타임라인으로 분석합니다.

Performance: 서비스 지연 구간 탐색

• Transaction 분석: React Router 연동을 통해 수집된 페이지별 로딩 속도를 확인합니다. 특정 페이지가 갑자기 느려졌다면 해당 페이지의 API 호출 시간을 점검합니다.
• Web Vitals: 사용자가 느끼는 실제 속도 지표(LCP, CLS 등)를 모니터링하여 사용자 경험 하락을 방지합니다.

Replays: 재현 안 됨 이슈 해결

• 화면 재생: 에러 로그 옆의 'Replay' 버튼을 눌러 사용자가 어떤 순서로 클릭했는지, 어떤 비정상적인 값을 입력했는지 눈으로 확인합니다. 개발자가 직접 재현할 필요 없이 영상을 보고 버그를 파악합니다.

Profiling: 코드 최적화

• Flame Graph 확인: 특정 작업이 느릴 때, 어떤 함수가 실행 시간을 가장 많이 잡아먹는지 시각적으로 확인하여 성능 병목 지점을 최적화합니다.

Dashboard:전체 현황 조감

단일 에러가 아닌, 서비스 전체의 추세를 확인하는 곳입니다.

• 이슈 발생 빈도: 특정 시간대에 에러가 급증했는지(Spike) 확인하여 배포 사고나 서버 장애를 즉시 감지합니다.
• 사용자 영향도: 얼마나 많은 고유 사용자(Unique Users)가 문제를 겪고 있는지 수치로 파악하여 수정 우선순위를 정합니다.
• 커스텀 대시보드: 프로젝트 성격에 맞게 '가장 많이 발생하는 에러 Top 5', '지역별 응답 속도' 등의 위젯을 직접 구성합니다.

Alert & Integration: 실시간 대응

• Issue Alerts: 새로운 에러가 발생했을 때"혹은 하나의 이슈가 100명 이상의 사용자에게 영향을 줄 때 슬랙이나 이메일로 즉시 알림을 보냅니다.
• Metric Alerts: 평균 응답 시간이 2초 이상으로 길어질 때와 같은 성능 기준 알림을 설정합니다.

출처

• https://sentry.io/welcome/?original_referrer=https://sentry.io/welcome/
• https://docs.sentry.io/?original_referrer=https%3A%2F%2Fsentry.io%2Fwelcome%2F