Sentry란 무엇인가?

Sentry는 애플리케이션의 오류 및 성능 모니터링을 위한 도구로, 실시간으로 오류를 추적하고 분석하여 개발자가 빠르게 문제를 해결할 수 있도록 도와줍니다. Sentry는 다양한 프로그래밍 언어와 프레임워크를 지원하며, 실시간 알림을 통해 오류를 신속하게 파악하고 조치할 수 있습니다.

 

npm i @sentry/node

 

주요 기능

1. 오류 추적 (Error Tracking): 애플리케이션에서 발생하는 예외와 오류를 자동으로 포착하여 보고합니다.

2. 성능 모니터링 (Performance Monitoring): 애플리케이션의 성능 문제를 추적하고 병목 현상을 식별합니다.

3. 실시간 알림 (Real-time Alerts): 오류가 발생하면 이메일, Slack, SMS 등을 통해 실시간으로 알림을 받을 수 있습니다.

4. 이슈 관리 (Issue Management): 오류를 이슈로 관리하고, 유사한 오류를 그룹화하여 보다 쉽게 관리할 수 있습니다.

5. 세션 및 사용자 추적 (Session and User Tracking): 오류가 발생한 사용자와 세션 정보를 추적할 수 있습니다.

6. 통합 (Integrations): 다양한 툴과의 통합을 통해 워크플로우를 개선합니다. 예를 들어, GitHub, GitLab, Jira, Slack 등과 통합할 수 있습니다.

 

설정 방법

1. Sentry 프로젝트 생성

Sentry 웹사이트에 가입한 후, 새로운 프로젝트를 생성합니다. 프로젝트 생성 후 주어진 DSN(데이터 소스 이름)을 기억해둡니다.

 

2. Sentry SDK 설치

Next.js 프로젝트에서 Sentry를 사용하려면 Sentry SDK를 설치해야 합니다.

npm install @sentry/nextjs

 

3. Sentry 초기화

Next.js 프로젝트의 루트에 sentry.client.config.js 및 sentry.server.config.js 파일을 생성하고, 다음과 같이 설정합니다.

sentry.client.config.js

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

Sentry.init({
  dsn: 'YOUR_SENTRY_DSN', // Sentry DSN을 여기에 입력합니다.
  tracesSampleRate: 1.0, // 성능 모니터링을 위한 샘플링 비율
});

 

sentry.server.config.js

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

Sentry.init({
  dsn: 'YOUR_SENTRY_DSN', // Sentry DSN을 여기에 입력합니다.
  tracesSampleRate: 1.0, // 성능 모니터링을 위한 샘플링 비율
});

 

4. Next.js 설정 파일 업데이트

next.config.js 파일을 업데이트하여 Sentry 설정을 포함시킵니다.

const { withSentryConfig } = require('@sentry/nextjs');

const moduleExports = {
  // 기존 Next.js 설정
};

const sentryWebpackPluginOptions = {
  // 추가적인 Sentry Webpack Plugin 설정 옵션 (선택 사항)
};

module.exports = withSentryConfig(moduleExports, sentryWebpackPluginOptions);

 

5. Sentry 테스트

Sentry가 제대로 설정되었는지 확인하기 위해, 의도적으로 오류를 발생시켜 볼 수 있습니다.

import { useEffect } from 'react';
import * as Sentry from '@sentry/nextjs';

export default function HomePage() {
  useEffect(() => {
    Sentry.captureException(new Error("테스트 오류"));
  }, []);

  return (
    <div>
      <h1>홈페이지</h1>
    </div>
  );
}