はじめに
BugSnagを導入してフロントエンドのエラー監視を行っていましたが、本番環境で発生したエラーログは難読化・最小化されたコードしか表示されず、実際のエラー箇所の特定に時間がかかっていました。
この課題を解決するため、SourceMapを導入し、エラーの迅速な特定と解決を可能にした経緯をご紹介します。
SourceMapとは
圧縮・最適化されたコードと元のソースコードとの対応関係を示すファイルです。
例）JavaScriptの場合：
- 圧縮・最適化されたコード：
.js - 元のソースコードとの対応関係を示すJSONファイル：
.js.map
開発者ツールでSourceMapを有効にすると、ブラウザはこのマッピング情報を使用して、minifyされたコードの代わりに元のソースコードを表示できます。
SourceMapの出力
SourceMapの出力はビルドツールで設定できます。
今回はViteを使用し、フロントエンドにはSvelteKitを採用しています。
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
build: {
sourcemap: 'hidden'
}
})
// svelte.config.js
import { sveltePreprocess } from 'svelte-preprocess'
export default {
preprocess: sveltePreprocess({
sourceMap: true
})
}
エラー確認用の実装
<script lang="ts">
import { onMount } from 'svelte'
onMount(() => {
throw Error('test bugsnag')
})
</script>
ローカルでSourceMapが機能しているか確認
一時的にデバッグ用にvite.config.jsのsourcemapをtrueに変更します。
ブラウザの開発ツールでエラー発生箇所を確認できるようになります。
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
build: {
sourcemap: true
}
})
ビルドしてプレビューを起動します。
npx vite build
npx vite preview
http://localhost:3000 にアクセスし、開発ツールでエラー箇所を確認できます。
BugSnagへSourceMapをアップロード
@bugsnag/source-maps をインストールします。
npm install --save-dev @bugsnag/source-maps
SourceMapをアップロードします。
npx bugsnag-source-maps upload-browser \
--api-key xxxxxxxxxx \
--app-version 0.0.1-staging \
--base-url https://staging.xxxxxx/assets/xxxxxx \
--directory ./build/client
アップロードが完了したら、BugSnagで確認できます。
SOURCE URLがブラウザでアクセス可能なものであることを確認してください。
BugSnagでエラーを確認
以下のように、どのファイルのどの行でエラーが発生したかが分かるようになります。
まとめ
エラー発生時の原因特定にかかる時間を大幅に短縮できました。
BugSnagはブラウザのエラー監視だけでなく、バックエンドのエラー監視やパフォーマンス監視などの機能も提供しているため、今後も活用していきたいと思います。
Discussion