Sentry 베스트 프랙티스 에러 모니터링

프로덕션 환경에서 Sentry를 효과적으로 활용하기 위한 핵심 설정과 최적화 방법을 다룹니다. 에러 추적, 성능 모니터링, 컨텍스트 관리 등 실무에서 바로 적용 가능한 베스트 프랙티스를 소개합니다.

---

---

들어가며

이 글에서는 Sentry 베스트 프랙티스 에러 모니터링에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. 환경별_설정_분리
2. 민감정보_필터링
3. 사용자_컨텍스트_추가
4. 커스텀_태그_활용
5. 에러_경계_처리
6. 성능_트랜잭션_추적
7. 브레드크럼_최적화
8. 중복_에러_그룹화
9. Source_Maps_설정
10. 알림_규칙_설정
11. 릴리스_추적
12. 예상_에러_무시

---

1. 환경별 설정 분리

개요

개발/스테이징/프로덕션 환경에 따라 Sentry 설정을 분리하여 불필요한 에러 리포트를 방지하고 샘플링 비율을 최적화합니다.

코드 예제

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  environment: process.env.NODE_ENV,
  enabled: process.env.NODE_ENV === 'production',
  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1.0,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0
});

설명

프로덕션에서만 Sentry를 활성화하고, 트레이스 샘플링을 10%로 설정하여 비용을 절감하면서도 충분한 데이터를 수집합니다.

---

2. 민감정보 필터링

개요

비밀번호, 토큰 등 민감한 정보가 Sentry로 전송되지 않도록 beforeSend 훅을 사용하여 데이터를 필터링합니다.

코드 예제

Sentry.init({
  beforeSend(event, hint) {
    if (event.request) {
      delete event.request.cookies;
      delete event.request.headers?.Authorization;
    }
    event.breadcrumbs = event.breadcrumbs?.filter(
      crumb => !crumb.message?.includes('password')
    );
    return event;
  }
});

설명

쿠키, Authorization 헤더를 제거하고 비밀번호가 포함된 브레드크럼을 필터링하여 개인정보 보호 규정을 준수합니다.

---

3. 사용자 컨텍스트 추가

개요

에러 발생 시 사용자 정보를 함께 기록하여 문제 재현과 우선순위 결정에 활용합니다. 단, 개인정보는 제외합니다.

코드 예제

Sentry.setUser({
  id: user.id,
  username: user.username,
  subscription: user.premiumStatus,
  ip_address: '{{auto}}'
});

Sentry.setContext('device', {
  browser: navigator.userAgent,
  viewport: `${window.innerWidth}x${window.innerHeight}`
});

설명

사용자 ID와 구독 상태 등 디버깅에 필요한 정보만 선택적으로 기록하여 이슈 해결 속도를 높입니다.

---

4. 커스텀 태그 활용

개요

의미 있는 태그를 추가하여 에러를 효과적으로 그룹화하고 필터링할 수 있도록 합니다.

코드 예제

Sentry.setTags({
  feature: 'payment',
  payment_method: 'card',
  api_version: 'v2',
  release_channel: 'stable'
});

Sentry.captureException(error, {
  tags: { transaction_id: txId }
});

설명

기능별, API 버전별로 태그를 설정하면 Sentry 대시보드에서 특정 조건의 에러만 빠르게 검색하고 분석할 수 있습니다.

---

5. 에러 경계 처리

개요

React Error Boundary와 Sentry를 통합하여 컴포넌트 렌더링 에러를 자동으로 캡처하고 폴백 UI를 제공합니다.

코드 예제

import * as Sentry from '@sentry/react';

const FallbackComponent = ({ error, resetError }) => (
  <div>
    <h2>문제가 발생했습니다</h2>
    <button onClick={resetError}>다시 시도</button>
  </div>
);

const App = Sentry.withErrorBoundary(AppContent, {
  fallback: FallbackComponent,
  showDialog: true
});

설명

withErrorBoundary HOC를 사용하면 컴포넌트 에러를 자동으로 Sentry에 전송하고 사용자에게 친화적인 에러 화면을 표시합니다.

---

6. 성능 트랜잭션 추적

개요

중요한 비즈니스 로직의 성능을 측정하여 병목 지점을 식별하고 최적화 우선순위를 결정합니다.

코드 예제

const transaction = Sentry.startTransaction({
  name: 'checkout.process',
  op: 'payment'
});

const span = transaction.startChild({ op: 'http', description: 'POST /api/pay' });
await processPayment();
span.finish();

transaction.setTag('payment_amount', amount);
transaction.finish();

설명

결제 프로세스의 각 단계별 소요 시간을 측정하여 Sentry Performance 탭에서 병목 구간을 시각적으로 파악할 수 있습니다.

---

7. 브레드크럼 최적화

개요

에러 발생 전 사용자 행동을 추적하는 브레드크럼을 전략적으로 추가하여 이슈 재현을 쉽게 만듭니다.

코드 예제

Sentry.addBreadcrumb({
  category: 'user-action',
  message: 'User clicked premium upgrade',
  level: 'info',
  data: { plan: 'premium', duration: 'monthly' }
});

Sentry.addBreadcrumb({
  category: 'api',
  message: 'Coupon validation failed',
  level: 'warning',
  data: { coupon_code: code, reason: 'expired' }
});

설명

중요한 사용자 액션과 API 호출 결과를 브레드크럼으로 기록하면 에러 발생 맥락을 정확히 파악할 수 있습니다.

---

8. 중복 에러 그룹화

개요

fingerprint 옵션을 사용하여 유사한 에러를 하나의 이슈로 그룹화하거나 다르게 분리하여 관리합니다.

코드 예제

Sentry.captureException(error, {
  fingerprint: ['payment-gateway', error.code]
});

// 동적 에러를 정적 그룹으로
Sentry.captureException(new Error(`User ${userId} not found`), {
  fingerprint: ['user-not-found']
});

설명

에러 메시지에 동적 값이 포함되어도 fingerprint로 같은 유형의 에러를 하나로 묶어 이슈 관리를 효율적으로 할 수 있습니다.

---

9. Source Maps 설정

개요

빌드된 코드의 에러를 원본 소스 코드 라인으로 매핑하여 디버깅을 용이하게 합니다.

코드 예제

// next.config.js
module.exports = {
  productionBrowserSourceMaps: true,
  sentry: {
    hideSourceMaps: true,
    widenClientFileUpload: true
  }
};

// sentry.properties
defaults.org=your-org
defaults.project=your-project
auth.token=your-auth-token

설명

Source map을 Sentry에만 업로드하고 프로덕션에서는 숨겨 보안을 유지하면서도 원본 코드로 에러 위치를 정확히 파악합니다.

---

10. 알림 규칙 설정

개요

불필요한 알림을 줄이고 중요한 이슈에만 집중할 수 있도록 Sentry 알림 규칙을 세밀하게 조정합니다.

코드 예제

// Sentry 대시보드 Alert Rule 예시
{
  "conditions": [
    "event.type equals error",
    "event.level equals fatal OR error",
    "event.tags[feature] equals payment",
    "event.count > 10 in 1 hour"
  ],
  "actions": [
    "Send to Slack #critical-alerts",
    "Create Jira ticket"
  ]
}

설명

결제 관련 에러가 1시간에 10회 이상 발생할 때만 Slack과 Jira로 알림을 보내 노이즈를 줄이고 중요 이슈에 집중합니다.

---

11. 릴리스 추적

개요

각 배포 버전을 추적하여 새로운 릴리스에서 발생한 에러를 빠르게 식별하고 롤백 여부를 결정합니다.

코드 예제

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  release: `my-app@${process.env.npm_package_version}`,
  dist: process.env.BUILD_NUMBER,
  integrations: [
    new Sentry.BrowserTracing(),
    new Sentry.Replay()
  ]
});

설명

릴리스 버전과 빌드 번호를 설정하면 Sentry에서 버전별 에러 발생 추이를 비교하고 회귀 버그를 즉시 발견할 수 있습니다.

---

12. 예상 에러 무시

개요

예상 가능한 에러나 써드파티 스크립트 에러는 ignoreErrors로 필터링하여 실제 문제에만 집중합니다.

코드 예제

Sentry.init({
  ignoreErrors: [
    'ResizeObserver loop limit exceeded',
    'Non-Error promise rejection captured',
    /fb_xd_fragment/,
    'cancelled'
  ],
  denyUrls: [
    /extensions\//i,
    /^chrome:\/\//i,
    /^moz-extension:\/\//i
  ]
});

설명

브라우저 확장 프로그램 에러나 사용자가 취소한 요청 등 수정 불가능한 에러를 제외하여 Sentry 쿼터를 효율적으로 사용합니다.

---

마치며

이번 글에서는 Sentry 베스트 프랙티스 에러 모니터링에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#Sentry #ErrorTracking #Performance #Monitoring #BestPractices