ViteとSentryを使ってSPAのエラーを本番環境でのみ収集する
経緯
ViteでビルドしたReactアプリケーションの開発で、Sentryを使用してSPAのエラー情報を収集しようとしました。
当たり前ですが、ビルドして難読化されたものを読んでも原因を特定し辛いです。
今回は、ViteでSentryのソースマップのアップロード機能を使ってビルド前のソースコードのどの部分でエラーが起きたかを把握できる方法を解説します。
※ SentryのDSNなどの基本設定はすでに完了していることを前提とします。
必要なパッケージのインストール
Vite, Sentry, および必要なライブラリ等をインストールしておきます。
SentryがVite用のプラグインを出してくれているのでそれを使います。
npm install --save-dev vite @sentry/vite-plugin
執筆時点のバージョン
"devDependencies": {
"@sentry/vite-plugin": "^0.5.0",
"vite": "^4.1.4"
}
Sentryの認証トークンを作成
Sentryの認証トークン発行画面にアクセスし、認証トークンを取得しておきます。
project:releases と org:read のスコープが必要です。
認証トークンは.envなどの環境変数で扱いましょう。
今回は仮にenv.SENTRY_AUTH_TOKENに設定したとします。
Vite設定ファイルの作成
Vite設定ファイル（vite.config.jsまたはvite.config.ts）の基本構造を作成し、Sentryプラグインを含めます。
import { sentryVitePlugin } from '@sentry/vite-plugin';
import { defineConfig } from 'vite';
export default defineConfig(({ mode }) => {
return {
plugins: [
// Sentryプラグインの設定
sentryVitePlugin({
// Sentryの設定を記述
}),
],
};
});
Sentryプラグインを本番環境でのみ有効化
ここで、Sentryプラグインが本番環境でのみ有効になるように設定ファイルを変更します。
本番環境だけで使う設定が多くなるようなら、定数に切り出してもいいかもしれません。
export default defineConfig(({ mode }) => {
return {
plugins: [
...(mode === 'production'
? [
sentryVitePlugin({
// Sentryの設定を記述
}),
]
: []),
],
};
});
設定の完了
設定を完了するとこんな感じになります。
import { sentryVitePlugin } from '@sentry/vite-plugin';
import { defineConfig, loadEnv } from 'vite';
export default defineConfig(({ mode }) => {
// 現在の作業ディレクトリで `mode` に基づいた env ファイルを読み込む
// すべての env を読み込む場合は第三引数を '' に設定
const env = loadEnv(mode, process.cwd(), '');
return {
//...その他の設定
build: {
sourcemap: true, // ソースマップの生成をオンにする
},
plugins: [
// Sentry vite プラグインは一番最後に入れること
// 本番用ビルドでのみ有効にする
...(mode === 'production'
? [
sentryVitePlugin({
org: 'my-org', // SentryのOrganization
project: 'my-project' // Sentryのプロジェクト名,
include: './dist', // 出力先
authToken: env.SENTRY_AUTH_TOKEN,
// 自動リリース名の検出を上書きする場合は以下の行のコメントを解除
// release: env.RELEASE,
}),
]
: []),
],
//...その他の設定
};
};
実際の画像
ちゃんと元のソースのどの位置でエラーが起きたかわかるようになっています。
追記: DevToolsでソースマップが見られてしまう問題を解決
ソースマップをSentryにアップロードすることはできましたが、このままではブラウザの開発者ツールからソースコードの内容が丸見えになってしまいます。
そこで、アップロード後にソースマップを削除する処理を追加します。
まず、rimrafをインストールします。
npm install --save-dev rimraf
次に、package.jsonの本番ビルド用のscriptに追記します。
// 省略
"scripts": {
"build": "tsc --noEmit && vite build --mode production && rimraf dist/**/*.js.map",
// 省略
}
// 省略
この設定により、ソースマップのアップロード完了後に、出力先ディレクトリからソースマップを削除して公開状態になることを防ぐことができます。
参考
Discussion