getsentry/sentry-react-sdk

sentry-react-sdk은(는) 무엇을 하나요?

React 애플리케이션을 위한 전체 Sentry SDK 설정. 'React에 Sentry 추가', '@sentry/react 설치' 또는 React 앱의 오류 모니터링, 추적, 세션 재생, 프로파일링, 로깅 구성 요청 시 사용하세요. React 16+, React Router v5-v7 비프레임워크 모드, TanStack Router, Redux, Vite, webpack을 지원합니다.

사용법

다음 명령어로 Sentry를 React 프로젝트에 빠르게 추가할 수 있습니다:

npx @sentry/wizard@latest -i react

또는 수동으로 설치하려면:

npm install @sentry/react
# 또는
yarn add @sentry/react

설정 예시

기본 초기화 (main.jsx 또는 index.jsx)

import React from 'react';
import ReactDOM from 'react-dom/client';
import * as Sentry from '@sentry/react';
import App from './App';

Sentry.init({
  dsn: "__SENTRY_DSN__",
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
  ],
  // 성능 추적을 위해 트랜잭션 샘플링 비율 설정 (1 = 100%)
  tracesSampleRate: 1.0,
  // 세션 재생 샘플링 비율 (1 = 100%, 프로덕션에서는 낮춤)
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

React Router v6과 통합

import React from 'react';
import * as Sentry from '@sentry/react';
import {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
    errorElement: <Sentry.ErrorBoundary fallback={<ErrorPage />} />,
  },
  {
    path: '/about',
    element: <About />,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default Sentry.withSentryReactRouterV6Routing(App);

TanStack Router 통합

import { createRouter } from '@tanstack/react-router';
import * as Sentry from '@sentry/react';

// Sentry TanStack Router 브라우저 트레이싱 통합
const sentryIntegration = Sentry.tanStackRouterBrowserTracingIntegration(router);

Sentry.init({
  dsn: '__SENTRY_DSN__',
  integrations: [
    sentryIntegration,
    Sentry.replayIntegration(),
  ],
  tracesSampleRate: 1.0,
});

환경 변수

• SENTRY_DSN: Sentry 프로젝트의 DSN (필수).
• SENTRY_AUTH_TOKEN: 소스 맵 업로드 등을 위한 인증 토큰 (선택 사항, 배포 시 권장).
• SENTRY_ORG: Sentry 조직 이름 (선택 사항).
• SENTRY_PROJECT: Sentry 프로젝트 이름 (선택 사항).

지원 프레임워크 및 도구

• React: 16.x, 17.x, 18.x, 19.x
• React Router: v5, v6, v7 (비프레임워크 모드)
• TanStack Router: 최신 버전
• Redux: Redux 미들웨어를 통한 상태 추적
• Vite: Vite 플러그인을 통한 소스 맵 업로드
• webpack: webpack 플러그인을 통한 소스 맵 업로드

추가 구성

Redux 미들웨어

import * as Sentry from '@sentry/react';
import { createStore, applyMiddleware } from 'redux';

const store = createStore(
  reducer,
  applyMiddleware(Sentry.createReduxMiddleware())
);

세션 재생 구성

Sentry.init({
  dsn: '__SENTRY_DSN__',
  integrations: [
    Sentry.replayIntegration({
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
  // 세션 재생 샘플링
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

참고

• 자세한 내용은 Sentry React 공식 문서를 참고하세요.
• 배포 시 SENTRY_AUTH_TOKEN을 설정하여 소스 맵을 자동으로 업로드하는 것이 좋습니다.