Sentry 적용 방안

[SingTheCode]

📋 이슈 개요

프로덕션 환경에서 실시간 에러 모니터링, 성능 추적, 사용자 행동 분석을 위한 Sentry 통합

🎯 목표

• ✅ 프로덕션 에러 실시간 모니터링 및 알림
• ✅ 성능 모니터링 (Performance Tracking)
• ✅ 사용자 행동 추적 (Session Replay)
• ✅ Client-side + Server-side 에러 수집
• ✅ 헥사고날 아키텍처 원칙 준수

현재 에러 처리 방식

✅ 존재하는 것:
- Axios interceptor에서 401 에러 처리 (src/api/axios.ts:15-23)
- 컴포넌트 레벨 try-catch (예: JjikboulShareDetail.tsx:41-47)
- React Query의 isError 상태 활용
- console.error 로깅

❌ 부족한 것:
- Error Boundary 없음
- 중앙집중식 에러 로깅 없음
- 프로덕션 에러 추적 시스템 없음
- 성능 모니터링 없음
- 사용자 세션 재생 기능 없음

환경 구성

• 개발 환경: 3개 (Development, Production)
• HTTPS: 커스텀 도메인 (local.*.climingo.xyz)
• 환경변수 파일: .env.development, .env.local, .env.production

🏗️ 설계 방안

1. 파일 구조

climingo-client/
├── sentry.client.config.ts        # 클라이언트 Sentry 설정
├── sentry.server.config.ts        # 서버 Sentry 설정
├── sentry.edge.config.ts          # Edge Runtime 설정
├── next.config.js                 # 🔄 수정: Sentry 웹팩 플러그인 통합
├── .env.production                # 🔄 수정: Sentry 환경변수 추가
├── src/
│   ├── app/
│   │   ├── layout.tsx            # 🔄 수정: Error Boundary 추가
│   │   └── global-error.tsx      # ✨ 신규: Global Error Handler
│   ├── components/
│   │   └── common/
│   │       └── ErrorBoundary.tsx # ✨ 신규: React Error Boundary
│   ├── utils/
│   │   └── sentry/
│   │       ├── index.ts          # ✨ 신규: Sentry 유틸리티
│   │       ├── context.ts        # ✨ 신규: 컨텍스트 enrichment
│   │       └── performance.ts    # ✨ 신규: 성능 추적 헬퍼
│   ├── api/
│   │   └── axios.ts              # 🔄 수정: Sentry 에러 로깅 추가
│   └── hooks/
│       └── getQueryClient.ts     # 🔄 수정: React Query 에러 로깅
└── test/
    └── integration/
        └── sentry.test.ts        # ✨ 신규: Sentry 통합 테스트

2. 환경변수 설정

.env.production에 추가:

# Sentry Configuration
NEXT_PUBLIC_SENTRY_DSN=your-sentry-dsn-here
NEXT_PUBLIC_SENTRY_ENVIRONMENT=production
NEXT_PUBLIC_SENTRY_TRACES_SAMPLE_RATE=0.1
NEXT_PUBLIC_SENTRY_REPLAYS_SESSION_SAMPLE_RATE=0.1
NEXT_PUBLIC_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE=1.0
SENTRY_AUTH_TOKEN=your-sentry-auth-token

3. 헥사고날 아키텍처 통합 전략

Layer별 Sentry 적용

Presentation Layer (Components):

• React Error Boundary로 감싸기
• 렌더링 에러 자동 수집
• 사용자 상호작용 Breadcrumb 추가

Application Layer (Service/Hooks):

• 비즈니스 로직 에러를 커스텀 컨텍스트와 함께 로깅
• 복잡한 연산 성능 추적

Infrastructure Layer (Repository/API):

• Axios interceptor에서 API 에러 로깅 (401 제외)
• React Query 에러를 Sentry로 전송
• API 응답 시간 추적

4. 주요 구현 내용

A. Client-side 초기화

B. Server-side 초기화

C. Error Boundary 구현

D. Global Error Handler

E. Axios Interceptor 통합

F. React Query 에러 로깅

G. 컨텍스트 Enrichment 유틸리티

H. 성능 추적 유틸리티

I. Next.js 설정 수정

J. Layout에 Error Boundary 통합

📊 성능 및 비용 최적화

Sample Rate 설정 근거

항목	Sample Rate	이유
Traces (성능)	10% (0.1)	트래픽의 10%만 추적하여 비용 절감
Session Replay (일반)	10% (0.1)	일반 세션은 10%만 녹화
Session Replay (에러)	100% (1.0)	에러 발생 시 전체 세션 기록으로 디버깅 효율화

에러 필터링 규칙

• ✅ 401 에러: Sentry로 전송하지 않음 (정상적인 인증 플로우)
• ✅ 개발/스테이징 환경: Sentry 완전 비활성화
• ✅ PII 마스킹: Session Replay에서 모든 텍스트/미디어 자동 마스킹
• ✅ 중복 제거: 동일 에러는 그룹화하여 관리