STEP 3 ソースマップ設定

ビルド時にminifyされるアプリは、エラーが発生してもコードのどの部分でエラーが発生したのか人間には分かりません。そのため、ビルド時にソースマップをSentryに登録する設定が必要です

Viteを使っている環境なら、以下のように簡単に設定できます。

① プラグイン導入

bash

yarn add -D @sentry/vite-plugin

② Auth Token を取得

ダッシュボードから作成できます
https://YOUR_PROJECT.sentry.io/settings/
My Account > api > auth-tokens

③ ビルドツールの設定へ追加

vite.config.ts

import { sentryVitePlugin } from '@sentry/vite-plugin';
import vue from '@vitejs/plugin-vue';
import { defineConfig, loadEnv } from 'vite';
 
// SEE: https://vitejs.dev/config/
export default ({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
 
  return defineConfig({
		...
    build: { sourcemap: true }, // この設定が重要
    plugins: [
      vue(),
      // ソースマップ設定 配列の最後に追加
      // SEE: https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps/
      sentryVitePlugin({
          // プロジェクトの設定値と一致させる必要あり
        // AuthTokenは環境変数として読み込むのが望ましい
        org: 'YOUR_ORGANIZATION',
        project: 'YOUR_PROJECT',
        authToken: process.env.SENTRY_AUTH_TOKEN,
        sourcemaps: {
          // ビルド出力先のディレクトリを指定
          assets: ['./dist/**/*.js'],
          ignore: ['./node_modules/**'],
        },
      }),
    ],
  });
};

上記のように設定することでビルド時にソースマップが作成され、自動的にSentryへ送信されます

Viteの他、いろいろなビルドツールに対応しているので確認してみてください

Uploading Source Maps | Sentry for JavaScript

Learn how to provide your source maps to Sentry.

docs.sentry.io

STEP 4 本番に向けて便利な設定を追加

このまま使っても問題はないですが、SentrySetup.tsへ使いやすくなるような設定を追加しましょう

src/plugins/SentrySetup.ts

import * as Sentry from '@sentry/vue';
import { App } from 'vue';
import { Router } from 'vue-router';
 
export const sentrySetup = (app: App, router: Router) => {
	// dsnコードと環境名を読み込み。環境変数として定義するのが望ましい
  const SENTRY_DSN = import.meta.env.VITE_SENTRY_DSN as string;
  const APP_ENVIRONMENT = import.meta.env.VITE_APP_ENVIRONMENT as string;
  const APP_URL = import.meta.env.VITE_APP_URL as string;
 
  Sentry.init({
    app,
    dsn: SENTRY_DSN,
    environment: APP_ENVIRONMENT,
    integrations: [
      Sentry.browserTracingIntegration({ router }),
    ],
    tracePropagationTargets: ['localhost', APP_URL],
    
    // 開発中にlocalhostからエラーを送信したくない
    enabled: APP_ENVIRONMENT !== 'local', // 追加
    
    // サンプリングレート設定
    // NOTE: Transaction上限を確認しながら設定する, 開発中はすべてのエラーを送信
    tracesSampleRate: import.meta.env.MODE === 'prod' ? 0.05 : 1.0, // 追加
 
    beforeSend(event, hint) {
      if (event.exception) {
        console.error(`[Exeption handled by Sentry]: (${hint.originalException})`, { event, hint });
      }
      return event;
    },
  });
};

enabled

Sentryへエラーを送信する環境（またはURL）を設定できます
開発中、ローカルからのエラーは基本キャッチしなくても良いはずなので、弾いてしまいましょう

tracesSampleRate

リリースされると、膨大なユーザーが使うことが予想され、すべてのエラーを拾っていてはすぐにTransaction上限を超えてしまいます
サンプリングレートを適切に設定して、エラーを拾いすぎないようにしましょう

他にもいろいろと便利な設定があります。使いやすいように随時カスタマイズしてください！

STEP 5 ユーザー識別情報を送信しよう

クライアントテスト時やリリース後、どのユーザーが直面したエラーなのか判定したい場合があると思います
以下のように、好きな情報をエラーに付与することができます
（設定しなくても多くの情報を確認できます）

App.vue

<script setup lang="ts">
import * as Sentry from '@sentry/vue';
 
onMounted(async () => {
    // userIdの解決
    const userId = await getUserId();
    // Sentryにユーザー情報 （UID， 環境情報） を登録
    Sentry.setUser({ id: userId, environment: APP_ENVIRONMENT });
    ...
</script>

まとめ

Sentryはいいぞ！！
エラー監視して、無駄な情報の齟齬を無くしましょう！

Sentryでエラー監視を始めよう！② 便利に活用編

STEP 3 ソースマップ設定#

① プラグイン導入#

② Auth Token を取得#

③ ビルドツールの設定へ追加#

STEP 4 本番に向けて便利な設定を追加#

enabled#

tracesSampleRate#

STEP 5 ユーザー識別情報を送信しよう#

まとめ#