Sentry ソースマップを Vite + Cloudflare Pages で設定する

// vite.config.ts 設定例
import { sentryVitePlugin } from '@sentry/vite-plugin';
export default defineConfig({
  build: { sourcemap: 'hidden' },
  plugins: [sentryVitePlugin({ org: 'my-org', project: 'my-project' })],
});

設定手順

1. @sentry/vite-plugin をインストールする
2. vite.config.ts に sentryVitePlugin を追加し build.sourcemap: 'hidden' を設定する
3. Cloudflare Pages のプロジェクト設定 → Settings > Environment variables に SENTRY_AUTH_TOKEN を追加する
4. デプロイ後に Sentry の Artifact Bundles タブでアップロード確認する

インストール

pnpm add -D @sentry/vite-plugin

Sentry SDK 本体（@sentry/browser または @sentry/react 等）はすでにインストール済みである前提です。

vite.config.ts の設定

// vite.config.ts
import { defineConfig } from 'vite';
import { sentryVitePlugin } from '@sentry/vite-plugin';

export default defineConfig(({ mode }) => ({
  build: {
    // 'hidden': ソースマップファイルを生成するが公開 URL には含めない
    // true: ソースマップを公開する（本番では非推奨）
    sourcemap: 'hidden',
  },
  plugins: [
    // mode === 'production' のビルド時のみアップロードを実行
    ...(mode === 'production'
      ? [
          sentryVitePlugin({
            org: 'your-sentry-org',          // Sentry の組織スラッグ
            project: 'your-sentry-project',  // プロジェクトスラッグ
            // SENTRY_AUTH_TOKEN 環境変数から自動読み込み
          }),
        ]
      : []),
  ],
}));

mode === 'production' の条件を入れることで、ローカル開発時にソースマップのアップロードが走らないようにします。

Cloudflare Pages の環境変数設定

Cloudflare Pages のダッシュボードで設定します。

1. Workers & Pages → 対象プロジェクトを選択
2. Settings → Environment variables
3. Production タブで Add variable をクリック
4. SENTRY_AUTH_TOKEN として Sentry Internal Integration のトークンを入力

変数名: SENTRY_AUTH_TOKEN
値:    sentry-auth-token-value（Sentry > Settings > Developer Settings > Internal Integrations で生成）

SENTRY_AUTH_TOKEN をコードにハードコードしてはいけません。Sentry 公式もリポジトリへのコミットを厳禁としています。

sourcemap モードの比較

build.sourcemap の値	ソースマップ生成	公開 URL への含有	推奨ケース
true	✅	✅ 公開される	開発環境のみ
'hidden'	✅	❌ 公開されない	本番推奨
false	❌	—	Sentry 未使用

'hidden' モードはソースマップファイルを生成して Sentry にアップロードしますが、生成した .map ファイルをビルド成果物（dist/）に含めません。ユーザーが DevTools でソースマップを閲覧できなくなるため、本番環境ではこちらが推奨です。

アップロード確認

デプロイが完了したら Sentry で確認します。

1. Sentry の Settings → Projects → 対象プロジェクト
2. Source Maps → Artifact Bundles タブ
3. 最新のデプロイに対応する Bundle が存在するか確認する

Bundle が存在しない場合は Cloudflare Pages のビルドログで sentry 関連の出力を確認してください。SENTRY_AUTH_TOKEN が未設定だとプラグインがサイレントに失敗することがあります。

よくある失敗パターン

失敗1：sourcemap が false のまま plugin だけ追加

sentryVitePlugin は sourcemap ファイルを生成しません。プラグインはビルドで生成されたソースマップを Sentry にアップロードするだけです。build.sourcemap を設定し忘れると空の Artifact Bundle が作成されます。

失敗2：Cloudflare Workers 用の設定を Pages に適用する

Cloudflare Workers では wrangler.toml の upload_source_maps = true でソースマップを管理します。Pages はこの設定を無視します。Pages では必ず @sentry/vite-plugin 経由でアップロードしてください。

失敗3：本番とプレビュー環境で同じ DSN を使う

Cloudflare Pages には Production と Preview の 2 種類の環境変数があります。プレビューデプロイのエラーを本番 Sentry プロジェクトに混入させないよう、DSN と SENTRY_AUTH_TOKEN は環境別に設定することを推奨します。

Failure Boundary：CSP と Sentry のコンフリクト

Cloudflare Pages で CSP（Content Security Policy）ヘッダーを設定している場合、Sentry の report-uri または connect-src が拒否されることがあります。public/_headers に以下を追加してください。

/*
  Content-Security-Policy: connect-src 'self' https://o*.ingest.sentry.io; ...

o*.ingest.sentry.io はワイルドカードを使っているため、組織 ID に関わらず Sentry のインジェストエンドポイントが許可されます。