sentry-browser-sdk

すべてのスキル > SDK のセットアップ > ブラウザー SDK

Sentry ブラウザー SDK

プロジェクトをスキャンし、バニラ JS、jQuery、静的サイト、WordPress、およびフレームワーク固有の SDK がないあらゆる JS プロジェクトで、Sentry の完全なセットアップを案内する、独自の判断基準を備えたウィザードです。

このスキルを使う場面

• ユーザーが「Web サイトに Sentry を追加する」またはプレーン JavaScript 用に Sentry をセットアップしたいと依頼した場合
• ユーザーが @sentry/browser をインストールするか、Loader Script を設定したい場合
• ユーザーが WordPress、Shopify、Squarespace、または静的 HTML サイトを使用している場合
• ユーザーがフレームワークなしでエラー監視、トレーシング、セッションリプレイ、またはログ記録を行いたい場合
• フレームワーク固有の SDK が該当しない場合

注： 以下の SDK バージョンと API は、@sentry/browser ≥10.0.0 を対象としています。 実装前に、必ず docs.sentry.io/platforms/javascript/ で確認してください。

---

フェーズ 1：検出

重要 — まずフレームワークを確認してください。 フレームワーク固有の SDK は大幅に優れたカバレッジを提供するため、@sentry/browser を使う前に必ず推奨してください。

ステップ 1A：フレームワークの検出（見つかった場合は切り替え）

# Check for React
cat package.json 2>/dev/null | grep -E '"react"'

# Check for Next.js
cat package.json 2>/dev/null | grep '"next"'

# Check for Vue
cat package.json 2>/dev/null | grep '"vue"'

# Check for Angular
cat package.json 2>/dev/null | grep '"@angular/core"'

# Check for Svelte / SvelteKit
cat package.json 2>/dev/null | grep -E '"svelte"|"@sveltejs/kit"'

# Check for Remix
cat package.json 2>/dev/null | grep -E '"@remix-run/react"|"@remix-run/node"'

# Check for Nuxt
cat package.json 2>/dev/null | grep '"nuxt"'

# Check for Astro
cat package.json 2>/dev/null | grep '"astro"'

# Check for Ember
cat package.json 2>/dev/null | grep '"ember-source"'

# Check for Node.js server frameworks (wrong SDK entirely)
cat package.json 2>/dev/null | grep -E '"express"|"fastify"|"@nestjs/core"|"koa"'

フレームワークが検出された場合は、ここでの作業を中止して切り替えてください：

検出されたフレームワーク	切り替え先
next	sentry-nextjs-sdk スキルを読み込む — ここでは続行しないでください
react（Next.js を使用していない場合）	sentry-react-sdk スキルを読み込む — ここでは続行しないでください
vue	@sentry/vue を提案する — docs.sentry.io/platforms/javascript/guides/vue/ を参照
@angular/core	@sentry/angular を提案する — docs.sentry.io/platforms/javascript/guides/angular/ を参照
@sveltejs/kit	sentry-svelte-sdk スキルを読み込む — ここでは続行しないでください
svelte（SPA、kit なし）	@sentry/svelte を提案する — docs.sentry.io/platforms/javascript/guides/svelte/ を参照
@remix-run	@sentry/remix を提案する — docs.sentry.io/platforms/javascript/guides/remix/ を参照
nuxt	@sentry/nuxt を提案する — docs.sentry.io/platforms/javascript/guides/nuxt/ を参照
astro	@sentry/astro を提案する — docs.sentry.io/platforms/javascript/guides/astro/ を参照
ember-source	@sentry/ember を提案する — docs.sentry.io/platforms/javascript/guides/ember/ を参照
express / fastify / @nestjs/core	これは Node.js サーバーです — sentry-node-sdk または sentry-nestjs-sdk スキルを読み込む

切り替えが重要な理由： フレームワーク SDK は、ルーター対応のトランザクション、エラーバウンダリー、コンポーネントのトラッキング、さらに多くの場合 SSR のカバレッジを追加します。React または Next.js アプリで @sentry/browser を直接使用すると、これらすべてが失われます。

フレームワークが検出されない場合に限り、@sentry/browser で続行してください。

ステップ 1B：インストール方法の検出

# Check if there's a package.json at all (bundler environment)
ls package.json 2>/dev/null

# Check package manager
ls package-lock.json yarn.lock pnpm-lock.yaml bun.lockb 2>/dev/null

# Check build tool
ls vite.config.ts vite.config.js webpack.config.js rollup.config.js esbuild.config.js 2>/dev/null
cat package.json 2>/dev/null | grep -E '"vite"|"webpack"|"rollup"|"esbuild"'

# Check for CMS or static site indicators
ls wp-config.php wp-content/ 2>/dev/null   # WordPress
ls _config.yml _config.yaml 2>/dev/null    # Jekyll
ls config.toml 2>/dev/null                 # Hugo
ls .eleventy.js 2>/dev/null                # Eleventy

# Check for existing Sentry
cat package.json 2>/dev/null | grep '"@sentry/'
grep -r "sentry-cdn.com\|js.sentry-cdn.com" . --include="*.html" -l 2>/dev/null | head -3

確認する項目：

質問	影響
package.json があり、バンドラーも使っていますか？	→ パス A：npm install
WordPress、Shopify、静的 HTML、npm なしですか？	→ パス B：Loader Script
スクリプトタグのみで、Loader Script にアクセスできませんか？	→ パス C：CDN バンドル
すでに @sentry/browser を使用していますか？	インストールをスキップし、機能設定に進みます
ビルドツールは Vite / webpack / Rollup / esbuild ですか？	ソースマッププラグインの設定が必要です

---

フェーズ 2：推奨

調査結果に基づいて推奨事項を提示します。具体的な提案から始め、自由回答形式の質問はしないでください。

推奨（基本的なカバレッジ）：

• ✅ エラーモニタリング — 常に推奨します。未処理のエラーと Promise の拒否を捕捉します
• ✅ トレーシング — インタラクティブなサイトには推奨します。ページの読み込みとユーザーの操作を追跡します
• ✅ セッションリプレイ — ユーザー向けアプリには推奨します。エラー発生時のセッションを記録します

オプション（オブザーバビリティの強化）：

• ⚡ ユーザーフィードバック — エラー発生後にユーザーから直接レポートを取得します
• ⚡ ロギング — Sentry.logger.* による構造化ログです。npm または CDN のログバンドルが必要です（Loader Script では利用できません）
• ⚡ プロファイリング — JS Self-Profiling API を使用します。ベータ版で、Chromium のみ対応し、Document-Policy: js-profiling レスポンスヘッダーが必要です

機能の推奨ロジック：

機能	次の場合に推奨します...
エラーモニタリング	常に — 妥協できない基本要件です
トレーシング	インタラクティブなページでは常に — ページの読み込みとナビゲーションのスパンは非常に有用です
セッションリプレイ	ユーザー向けアプリ、サポートフロー、またはチェックアウトページ
ユーザーフィードバック	サポート重視のアプリ。スクリーンショット付きのアプリ内バグレポートが必要な場合
ロギング	構造化ログの検索、またはログとトレースの相関が必要な場合。npm のみ
プロファイリング	パフォーマンスが重要な Chromium 専用アプリ。Document-Policy: js-profiling ヘッダーが必要です

インストール方法の推奨：

シナリオ	推奨方法
プロジェクトに package.json とバンドラーがある	方法 A（npm） — すべての機能、ソースマップ、ツリーシェイキングに対応します
WordPress、Shopify、Squarespace、静的 HTML	方法 B（Loader Script） — ビルドツール不要で、常に最新の状態を保てます
Loader Script を利用できない静的 HTML	方法 C（CDN バンドル） — <script> タグを手動で追加します

提案：「方法 A（npm）を使って、エラーモニタリング＋トレーシング＋セッションリプレイを設定することをおすすめします。ロギングやユーザーフィードバックも追加しますか？」

---

フェーズ 3：手順

方法 A：npm / yarn / pnpm（推奨 — バンドラープロジェクト向け）

インストール

npm install @sentry/browser --save
# or
yarn add @sentry/browser
# or
pnpm add @sentry/browser

src/instrument.ts を作成する

Sentry は、ほかのコードが実行される前に初期化する必要があります。専用のサイドカーファイルに Sentry.init() を記述します。

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

Sentry.init({
  dsn: import.meta.env.VITE_SENTRY_DSN, // Adjust per build tool (see table below)
  environment: import.meta.env.MODE,
  release: import.meta.env.VITE_APP_VERSION, // inject at build time

  dataCollection: {
    // To disable sending user data and HTTP bodies, uncomment the lines below. For more info visit:
    // https://docs.sentry.io/platforms/javascript/configuration/options/#dataCollection
    // userInfo: false,
    // httpBodies: [],
  },

  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration({
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],

  // Tracing
  tracesSampleRate: 1.0, // lower to 0.1–0.2 in production
  tracePropagationTargets: ["localhost", /^https:\/\/yourapi\.io/],

  // Session Replay
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,

  enableLogs: true,
});

ビルドツールごとの DSN 環境変数：

ビルドツール	変数名	コード内での参照方法
Vite	VITE_SENTRY_DSN	import.meta.env.VITE_SENTRY_DSN
Custom webpack	SENTRY_DSN	process.env.SENTRY_DSN
esbuild	SENTRY_DSN	process.env.SENTRY_DSN
Rollup	SENTRY_DSN	process.env.SENTRY_DSN

エントリーポイントの設定

エントリーファイルで instrument.ts を最初の import として読み込みます。

// src/main.ts or src/index.ts
import "./instrument";  // ← MUST be first

// ... rest of your app

ソースマップの設定（強く推奨）

ソースマップがないと、スタックトレースには圧縮されたコードが表示されます。ビルドプラグインを設定して、ソースマップを自動的にアップロードします。

ブラウザー専用のウィザードはありません： npx @sentry/wizard -i browser フラグはありません。最も近いのは npx @sentry/wizard@latest -i sourcemaps で、すでに初期化済みの SDK に対してソースマップのアップロードのみを設定します。

Vite（vite.config.ts）：

import { defineConfig } from "vite";
import { sentryVitePlugin } from "@sentry/vite-plugin";

export default defineConfig({
  build: { sourcemap: "hidden" },
  plugins: [
    // sentryVitePlugin MUST be last
    sentryVitePlugin({
      org: process.env.SENTRY_ORG,
      project: process.env.SENTRY_PROJECT,
      authToken: process.env.SENTRY_AUTH_TOKEN,
    }),
  ],
});

webpack（webpack.config.js）：

const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");

module.exports = {
  devtool: "hidden-source-map",
  plugins: [
    sentryWebpackPlugin({
      org: process.env.SENTRY_ORG,
      project: process.env.SENTRY_PROJECT,
      authToken: process.env.SENTRY_AUTH_TOKEN,
    }),
  ],
};

Rollup（rollup.config.js）：

import { sentryRollupPlugin } from "@sentry/rollup-plugin";

export default {
  output: { sourcemap: "hidden" },
  plugins: [
    sentryRollupPlugin({
      org: process.env.SENTRY_ORG,
      project: process.env.SENTRY_PROJECT,
      authToken: process.env.SENTRY_AUTH_TOKEN,
    }),
  ],
};

esbuild（build.js）：

const { sentryEsbuildPlugin } = require("@sentry/esbuild-plugin");

require("esbuild").build({
  entryPoints: ["src/index.ts"],
  bundle: true,
  sourcemap: "hidden",
  plugins: [
    sentryEsbuildPlugin({
      org: process.env.SENTRY_ORG,
      project: process.env.SENTRY_PROJECT,
      authToken: process.env.SENTRY_AUTH_TOKEN,
    }),
  ],
});

⚠️ esbuild プラグインは splitting: true を完全にはサポートしていません。コード分割を有効にしている場合は、代わりに sentry-cli を使用してください。

sentry-cli を使用する場合（任意のツールチェーン／CI）：

# After your build step:
npx @sentry/cli sourcemaps inject ./dist
npx @sentry/cli sourcemaps upload ./dist

認証用の .env を追加します（絶対にコミットしないでください）。

SENTRY_AUTH_TOKEN=sntrys_...
SENTRY_ORG=my-org-slug
SENTRY_PROJECT=my-project-slug

---

Path B：ローダースクリプト（WordPress、静的サイト、Shopify、Squarespace）

最適な用途： ビルドシステムのないサイト。ローダースクリプトは単一の <script> タグで SDK 全体を遅延読み込みし、Sentry の CDN 経由で常に最新の状態を保ち、SDK の読み込み前にエラーをバッファリングします。

ローダースクリプトの取得方法： Sentry UI → 設定 → プロジェクト → （プロジェクト） → SDK のセットアップ → ローダースクリプト

生成されたタグをコピーし、すべてのページで最初のスクリプトとして配置します。

<!DOCTYPE html>
<html>
  <head>
    
    <script>
      window.sentryOnLoad = function () {
        Sentry.init({
          // DSN is already configured in the loader URL
          tracesSampleRate: 1.0,
          replaysSessionSampleRate: 0.1,
          replaysOnErrorSampleRate: 1.0,
        });
      };
    </script>

    
    <script
      src="https://js.sentry-cdn.com/YOUR_PUBLIC_KEY.min.js"
      crossorigin="anonymous"
    ></script>
  </head>
  ...
</html>

ローダーの読み込みモード：

モード	方法	SDK の読み込みタイミング
遅延（デフォルト）	追加設定なし	最初のエラー発生時、または手動で Sentry を呼び出したとき
即時	<script> に data-lazy="no" を追加	すべてのページスクリプトの実行後
手動	Sentry.forceLoad() を呼び出す	呼び出したとき

SDK の読み込み前でも安全に呼び出せます（バッファリングされます）：

• Sentry.captureException()
• Sentry.captureMessage()
• Sentry.captureEvent()
• Sentry.addBreadcrumb()
• Sentry.withScope()

その他のメソッドでは、Sentry.onLoad() を使用します：

<script>
  window.Sentry && Sentry.onLoad(function () {
    Sentry.setUser({ id: "123" });
  });
</script>

グローバル変数でリリースを設定する（任意）：

<script>
  window.SENTRY_RELEASE = { id: "[email protected]" };
</script>

ローダースクリプトの制限事項：

• ❌ Sentry.logger.*（ログ記録）は使用できません — npm の方法のみ
• ❌ フレームワーク固有の機能（React ErrorBoundary、Vue Router のトラッキングなど）は使用できません
• ❌ トレースヘッダーが追加されるのは、SDK の読み込み後に行われた fetch 呼び出しのみです
• ❌ CDN キャッシュ経由でバージョン変更が反映されるまで、数分かかることがあります
• ⚠️ ローダーを使用する場合、その他すべてのスクリプトには async ではなく defer を使用してください

CSP の要件：

script-src: https://browser.sentry-cdn.com https://js.sentry-cdn.com
connect-src: *.sentry.io

---

Path C：CDN バンドル（手動のスクリプトタグ）

最適な用途： ローダースクリプトを使用できないものの、同期読み込みが必要なページ。

必要な機能に合ったバンドルを選び、他のすべてのスクリプトより前に配置します。

エラーのみ（最小構成）：

<script
  src="https://browser.sentry-cdn.com/10.42.0/bundle.min.js"
  integrity="sha384-L/HYBH2QCeLyXhcZ0hPTxWMnyMJburPJyVoBmRk4OoilqrOWq5kU4PNTLFYrCYPr"
  crossorigin="anonymous"
></script>

エラー + トレーシング：

<script
  src="https://browser.sentry-cdn.com/10.42.0/bundle.tracing.min.js"
  integrity="sha384-DIqcfVcfIewrWiNWfVZcGWExO5v673hkkC5ixJnmAprAfJajpUDEAL35QgkOB5gw"
  crossorigin="anonymous"
></script>

エラー + セッションリプレイ：

<script
  src="https://browser.sentry-cdn.com/10.42.0/bundle.replay.min.js"
  integrity="sha384-sbojwIJFpv9duIzsI9FRm87g7pB15s4QwJS1m1xMSOdV1CF3pwgrPPEu38Em7M9+"
  crossorigin="anonymous"
></script>

エラー + トレーシング + リプレイ（推奨される完全なセットアップ）：

<script
  src="https://browser.sentry-cdn.com/10.42.0/bundle.tracing.replay.min.js"
  integrity="sha384-oo2U4zsTxaHSPXJEnXtaQPeS4Z/qbTqoBL9xFgGxvjJHKQjIrB+VRlu97/iXBtzw"
  crossorigin="anonymous"
></script>

エラー + トレーシング + リプレイ + ユーザーフィードバック：

<script
  src="https://browser.sentry-cdn.com/10.42.0/bundle.tracing.replay.feedback.min.js"
  integrity="sha384-SmHU39Qs9cua0KLtq3A6gis1/cqM1nZ6fnGzlvWAPiwhBDO5SmwFQV65BBpJnB3n"
  crossorigin="anonymous"
></script>

完全なバンドル（すべての機能）：

<script
  src="https://browser.sentry-cdn.com/10.42.0/bundle.tracing.replay.feedback.logs.metrics.min.js"
  integrity="sha384-gOjSzRxwpXpy0FlT6lg/AVhagqrsUrOWUO7jm6TJwuZ9YVHtYK0MBA2hW2FGrIGl"
  crossorigin="anonymous"
></script>

CDN バンドルの種類の概要：

バンドル	機能	使用する状況
bundle.min.js	エラーのみ	フットプリントを最小限にしたい場合
bundle.tracing.min.js	+ トレーシング	パフォーマンス監視
bundle.replay.min.js	+ リプレイ	セッション記録
bundle.tracing.replay.min.js	+ トレーシング + リプレイ	オブザーバビリティの完全な実現
bundle.tracing.replay.feedback.min.js	+ ユーザーフィードバック	+ アプリ内フィードバックウィジェット
bundle.logs.metrics.min.js	+ ログ + メトリクス	構造化ログ（CDN）
bundle.tracing.replay.feedback.logs.metrics.min.js	すべて	最大限のカバレッジ

スクリプトタグの後に初期化します：

<script>
  Sentry.init({
    dsn: "https://[email protected]/YOUR_PROJECT",
    environment: "production",
    release: "[email protected]",
    integrations: [
      Sentry.browserTracingIntegration(),
      Sentry.replayIntegration({
        maskAllText: true,
        blockAllMedia: true,
      }),
    ],
    tracesSampleRate: 1.0,
    tracePropagationTargets: ["localhost", /^https:\/\/yourapi\.io/],
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,
  });
</script>

CDN の CSP 要件：

script-src: https://browser.sentry-cdn.com https://js.sentry-cdn.com
connect-src: *.sentry.io

---

合意した各機能について

機能を一つずつ進めます。参照ファイルを読み込み、手順に従い、次に進む前に動作を確認してください。

機能	参照先	読み込むタイミング
エラー監視	${SKILL_ROOT}/references/error-monitoring.md	常に（基本設定）
トレーシング	${SKILL_ROOT}/references/tracing.md	ページ読み込み／API 呼び出しのトレーシング
セッションリプレイ	${SKILL_ROOT}/references/session-replay.md	ユーザー向けアプリ
ログ記録	${SKILL_ROOT}/references/logging.md	構造化ログの検索。npm または CDN のログバンドル（ローダースクリプトでは不可）
プロファイリング	${SKILL_ROOT}/references/profiling.md	パフォーマンスが重要な場合。Chromium のみ
ユーザーフィードバック	${SKILL_ROOT}/references/user-feedback.md	エラー発生後にユーザーからの報告を収集する場合

各機能について：Read ${SKILL_ROOT}/references/<feature>.md を読み、手順に正確に従い、動作を確認してください。

---

設定リファレンス

Sentry.init() の主なオプション

オプション	型	デフォルト	説明
dsn	string	—	必須です。 空の場合、SDK は無効になります
environment	string	"production"	例："staging"、"development"
release	string	—	例："[email protected]" または Git SHA — エラーをリリースに関連付けます
sendDefaultPii	boolean	false	IP アドレスとリクエストヘッダーを含めます。v11 で非推奨になる予定です — 代わりに dataCollection を使用してください
dataCollection	object	—	収集するデータを詳細に制御します（v10.54 以降）。以下の表を参照してください
tracesSampleRate	number	—	0～1。開発環境では 1.0、本番環境では 0.1–0.2
tracesSampler	function	—	トランザクションごとのサンプリング。サンプリングレートを上書きします
tracePropagationTargets	(string|RegExp)[]	同一オリジン	分散トレーシングヘッダーを付与する送信先 URL
replaysSessionSampleRate	number	—	記録する全セッションの割合
replaysOnErrorSampleRate	number	—	記録するエラー発生セッションの割合
enableLogs	boolean	false	Sentry.logger.* API を有効にします（npm または CDN のログバンドル。Loader Script は対象外）
attachStackTrace	boolean	false	captureMessage() の呼び出しにスタックトレースを付加します
maxBreadcrumbs	number	100	イベントごとに保存するパンくずの数
debug	boolean	false	詳細な SDK 出力をコンソールに表示します
tunnel	string	—	広告ブロッカーを回避するためのプロキシ URL
ignoreErrors	(string|RegExp)[]	[]	これらのパターンに一致するエラーを破棄します
denyUrls	(string|RegExp)[]	[]	これらの URL にあるスクリプトからのエラーを破棄します
allowUrls	(string|RegExp)[]	[]	これらのスクリプト URL からのエラーのみを取得します
spotlight	boolean|string	false	イベントを Spotlight のローカル開発用オーバーレイに転送します

ブラウザー固有のオプション

オプション	型	デフォルト	説明
cdnBaseUrl	string	—	インテグレーションを遅延読み込みするためのベース URL
skipBrowserExtensionCheck	boolean	false	ブラウザー拡張機能のコンテキスト確認をスキップします

dataCollection オプション（v10.54 以降）

SDK が収集するデータを詳細に制御します。単純な真偽値の sendDefaultPii を、きめ細かい設定に置き換えます。省略した場合は、後方互換性のため sendDefaultPii にフォールバックします。

フィールド	型	デフォルト	説明
userInfo	boolean	true	インストルメンテーションから user.* フィールドを自動的に入力します
cookies	boolean | { allow: string[] } | { deny: string[] }	true	Cookie の収集。true = すべて（フィルタリングあり）、false = なし、allow/deny = 特定のキー
httpHeaders	{ request?, response? }	{ request: true, response: true }	HTTP ヘッダーの収集。それぞれに boolean または allow/deny オブジェクトを指定できます
httpBodies	string[]	["incomingRequest", "outgoingRequest", "incomingResponse", "outgoingResponse"]	収集する HTTP ボディの種類（dataCollection が明示的に設定されている場合）
queryParams	boolean | { allow: string[] } | { deny: string[] }	true	機密値のフィルタリングを行うクエリパラメーターの収集
genAI	{ inputs?, outputs? }	{ inputs: true, outputs: true }	生成 AI の入力／出力の記録
stackFrameVariables	boolean	true	スタックフレーム内のローカル変数の値を取得します
frameContextLines	number	5	スタックフレーム周辺のソースコードのコンテキスト行数

例：

Sentry.init({
  dsn: "...",
  dataCollection: {
    userInfo: true,
    cookies: { deny: ["session_id", "auth_token"] },
    httpHeaders: {
      request: { deny: ["authorization", "cookie"] },
      response: true,
    },
    queryParams: { allow: ["utm_source", "utm_campaign"] },
  },
});

グローバル変数 window.SENTRY_RELEASE（CDN／Loader Path）

SDK の読み込み前にリリースバージョンを設定します：

<script>
  window.SENTRY_RELEASE = { id: "[email protected]" };
</script>

---

検証

テストイベントを発生させて、Sentry がデータを受信していることを確認します。

npm／CDN の場合：

<button onclick="throw new Error('Sentry Browser Test Error')">
  Test Error
</button>

パフォーマンスの検証（npm の場合）：

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

Sentry.startSpan({ name: "Test Span", op: "test" }, () => {
  // your operation
});

手動でのキャプチャ：

Sentry.captureException(new Error("Manual test"));
Sentry.captureMessage("Manual test message", "info");

Sentry のダッシュボードを確認します。

• Issues → 数秒以内にエラーが表示されます
• Traces → ページ読み込みのトランザクションが表示されます
• Replays → ページ操作後にセッションの録画が表示されます
• Logs → ロギングが有効な場合、構造化ログエントリーが表示されます（npm または CDN のログバンドル）

何も表示されない場合は、Sentry.init() で debug: true を設定し、ブラウザーのコンソールを確認します。

---

フェーズ 4：相互リンク

ブラウザーのセットアップが完了したら、Sentry のカバレッジが不足している関連バックエンドがないか確認します。

ls ../backend ../server ../api ../go ../python 2>/dev/null
cat ../go.mod 2>/dev/null | head -3
cat ../requirements.txt ../pyproject.toml 2>/dev/null | head -3
cat ../Gemfile 2>/dev/null | head -3
cat ../pom.xml 2>/dev/null | grep '<artifactId>' | head -3
cat ../composer.json 2>/dev/null | head -3

Sentry が設定されていないバックエンドがある場合は、対応するスキルを提案します。

検出されたバックエンド	提案するスキル
Go（go.mod）	sentry-go-sdk
Python（requirements.txt、pyproject.toml）	sentry-python-sdk
Ruby（Gemfile）	sentry-ruby-sdk
PHP（composer.json）	sentry-php-sdk
.NET（*.csproj、*.sln）	sentry-dotnet-sdk
Java（pom.xml、build.gradle）	docs.sentry.io/platforms/java/ を参照してください
Node.js（Express、Fastify）	sentry-node-sdk
NestJS（@nestjs/core）	sentry-nestjs-sdk

---

トラブルシューティング

問題	解決策
イベントが表示されない	debug: true を設定し、DSN を確認して、ブラウザーのコンソールで SDK のエラーを確認します
ソースマップが機能しない	本番モードでビルドします（npm run build）。SENTRY_AUTH_TOKEN が設定されていることを確認します
スタックトレースが縮小表示される	ソースマップがアップロードされていません。ビルドプラグインの設定を確認し、npx @sentry/wizard@latest -i sourcemaps を実行します
CDN バンドルが見つからない	URL のバージョン番号を確認します。最新バージョンは browser.sentry-cdn.com を参照してください
SRI の整合性エラー	ハッシュが一致しません。このスキルから integrity 属性を含む <script> タグ全体を再コピーします
Loader Script が実行されない	ページ内の最初の <script> であることを確認し、コンソールで CSP エラーを確認します
Loader でトレーシングが機能しない	SDK の読み込み前の Fetch 呼び出しはトレースされません。早期の呼び出しを Sentry.onLoad() でラップします
sentryOnLoad が呼び出されない	ローダーの <script> タグより前に window.sentryOnLoad を定義する必要があります
ロギングを利用できない	Sentry.logger.* には npm、または名前に .logs. を含む CDN バンドルが必要です。Loader Script ではサポートされていません
プロファイリングが機能しない	ドキュメントのレスポンスに Document-Policy: js-profiling ヘッダーがあることを確認します。Chromium のみ対応です
広告ブロッカーによってイベントが破棄される	tunnel: "/sentry-tunnel" を設定し、サーバー側のリレーエンドポイントを追加します
セッションリプレイが録画されない	replayIntegration() が初期化時に含まれていることを確認し、replaysSessionSampleRate が 0 より大きいことを確認します
リプレイの CSP エラー	CSP に worker-src 'self' blob: と child-src 'self' blob: を追加します
tracePropagationTargets が一致しない	正規表現のエスケープを確認します。デフォルトでは同一オリジンのみです
ブラウザー拡張機能によってイベントがブロックされる	拡張機能のエラーを除外するため、denyUrls: [/chrome-extension:\/\//] を追加します
イベント量が多い	本番環境で sampleRate（エラー）と tracesSampleRate を 1.0 より低くします
デプロイ後にソースマップがアップロードされる	エラーが発生する前にソースマップをアップロードする必要があります。CI/CD に組み込みます
esbuild の分割との競合	sentryEsbuildPlugin は splitting: true をサポートしていません。代わりに sentry-cli を使用します