getsentry/sentry-react-setup

sentry-react-setup は何をしますか？

React アプリケーションに Sentry をセットアップします。React への Sentry 追加、@sentry/react のインストール、エラーモニタリング、エラーバウンダリ、セッションリプレイ、ブラウザトレーシングの設定を依頼された場合に使用します。

概要

このスキルは、React アプリケーションに Sentry エラーモニタリングを追加するプロセスを自動化します。以下の作業を行います：

• @sentry/react パッケージのインストール
• DSN の設定（環境変数 SENTRY_DSN から読み込み）
• Sentry.init() の設定
• エラーバウンダリ（Sentry.ErrorBoundary）のラップ
• セッションリプレイの有効化
• ブラウザトレーシングの有効化

使用方法

# プロジェクトディレクトリで以下のコマンドを実行します
npx sentry-wizard -i react -p manual

または、手動で以下の手順に従ってください：

npm install @sentry/react

環境変数 SENTRY_DSN を設定します（例：.env ファイル）。

SENTRY_DSN=https://[email protected]/0

次に、アプリケーションのエントリポイント（例：src/index.js または src/main.jsx）で Sentry を初期化します：

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

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
  ],
  // トレーシングのサンプルレート（本番環境では 0.1 を推奨）
  tracesSampleRate: 1.0,
  // セッションリプレイのサンプルレート（開発環境では 1.0、本番では 0.1 など）
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

エラーバウンダリを追加します：

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

function App() {
  return (
    <Sentry.ErrorBoundary fallback={<p>エラーが発生しました</p>}>
      <MainContent />
    </Sentry.ErrorBoundary>
  );
}

プラットフォーム

このスキルは以下の AI エージェントツールで動作します：

• Claude Code
• Cursor
• Codex

注意事項

• SENTRY_DSN 環境変数が適切に設定されていることを確認してください
• 本番環境では、サンプルレートを適切に調整してください（tracesSampleRate と replaysSessionSampleRate を低く設定することを推奨します）
• エラーバウンダリは、アプリケーション全体をラップするか、重要な機能単位で個別に設定することができます