sentry-react-setup

Sentry React のセットアップ

React プロジェクトに Sentry をインストールして設定します。

このスキルを使用する場面

• ユーザーが、React アプリへの「Sentry の追加」や「Sentry のインストール」を求めている場合
• ユーザーが React でのエラー監視、ロギング、トレーシングを求めている場合
• ユーザーが「@sentry/react」や React のエラーバウンダリについて言及している場合

重要： 以下の設定オプションとコードサンプルは例です。API やデフォルト値が変更されている可能性があるため、実装前に必ず docs.sentry.io で確認してください。

インストール

npm install @sentry/react --save

設定

プロジェクトのルートに instrument.js を作成します（アプリ内で最初にインポートする必要があります）。

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

Sentry.init({
  dsn: "YOUR_SENTRY_DSN",
  sendDefaultPii: true,
  
  // Tracing + Session Replay
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
  ],
  tracesSampleRate: 1.0,
  tracePropagationTargets: [/^\//, /^https:\/\/yourserver\.io\/api/],
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  
  // Logs
  enableLogs: true,
});

エントリーポイントで最初にインポート

// src/index.js or src/main.jsx
import "./instrument";  // Must be first!
import App from "./App";
import { createRoot } from "react-dom/client";

const root = createRoot(document.getElementById("app"));
root.render(<App />);

エラー処理

React 19 以降

createRoot でエラーフックを使用します。

import { createRoot } from "react-dom/client";
import * as Sentry from "@sentry/react";

const root = createRoot(document.getElementById("app"), {
  onUncaughtError: Sentry.reactErrorHandler(),
  onCaughtError: Sentry.reactErrorHandler(),
  onRecoverableError: Sentry.reactErrorHandler(),
});

React 19 未満

ErrorBoundary コンポーネントを使用します。

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

<Sentry.ErrorBoundary fallback={<p>An error occurred</p>}>
  <MyComponent />
</Sentry.ErrorBoundary>

ルーターとの統合

ルーター	統合
React Router v7	Sentry.reactRouterV7BrowserTracingIntegration
React Router v6	Sentry.reactRouterV6BrowserTracingIntegration
React Router v4/v5	Sentry.reactRouterV5BrowserTracingIntegration（両方で共通）
TanStack Router	TanStack Router のドキュメントを参照してください

Redux との統合（任意）

import * as Sentry from "@sentry/react";
import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
  reducer,
  enhancers: (getDefaultEnhancers) =>
    getDefaultEnhancers().concat(Sentry.createReduxEnhancer()),
});

ソースマップ

スタックトレースを読みやすくするため、ソースマップをアップロードします。

npx @sentry/wizard@latest -i sourcemaps

環境変数

SENTRY_DSN=https://[email protected]/456
SENTRY_AUTH_TOKEN=sntrys_xxx  # Used by sentry-cli / source maps, not the SDK
SENTRY_ORG=my-org              # Used by sentry-cli, not the SDK
SENTRY_PROJECT=my-project      # Used by sentry-cli, not the SDK

注： SDK は SENTRY_DSN を自動的に読み取ります。Create React App を使用する場合は REACT_APP_ を、Vite を使用する場合は VITE_ を先頭に付けます。SENTRY_AUTH_TOKEN/ORG/PROJECT は、ブラウザー SDK ではなく、ソースマップのアップロードで sentry-cli によって使用されます。

動作確認

エラーを発生させるテストボタンを追加します。

<button onClick={() => { throw new Error("Sentry Test Error"); }}>
  Test Sentry
</button>

トラブルシューティング

問題	解決策
エラーが記録されない	instrument.js が最初にインポートされていることを確認してください
ソースマップが機能しない	sourcemaps wizard を実行し、認証トークンを確認してください
React Router のスパンが見つからない	使用しているバージョンに合ったルーター統合を追加してください