Nuxt3でsentryを使ってフロントエンド側のエラーを監視する

背景

バックエンド側ではエラーが起きたと時にサーバー側でログを出力することで、処理中にエラーが起こったことがわかります。。 それに対して、フロントエンド側では各ユーザーブラウザーでjavascriptが実行されるので、ログを保存することができません。
そこで、sentryのようなサービスを使い、ログデータを送信して保存することで、ログを見れるようになります。

sentryとは

sentryは、ログの監視などモニタリングできるようにするサービスです。
ユーザーデバイスの情報や日付、エラーのstack traceの情報まで取得して送信してくれます。

JavaScript, Python, PHP, Ruby, Javaなどの言語やFlutter, Next.js Laravel など様々な言語フレームワークに対応しています。

無料枠があるので気軽に始められます。

nuxt3で使ってみる

sentryのアカウントを持っていなかったら登録しておきます。

projectsのページからプロジェクト作成を行います。

ターゲットとなるプラットフォーム、アラート頻度を選択し、プロジェクト名の入力とTeam選択をしてプロジェクトを作成します。

プラットフォームは、NuxtがプラットフォームになかったのでVueを選択する。 アラート頻度は好きなように選択します。

作成すると、設定のための手順ページが表示されます。 手順に従って進めていきます。

sentryで必要なパッケージを入れます。

npm install --save @sentry/vue @sentry/tracing

次にpluginsフォルダーを作成して、sentry用のプラグインを作成します。 sentry.client.tsで作成します。 中身は下設定ページに書かれてあるSentry.init()をプラグインで実行しています。
nuxt3を使っているので、vue3の方のコードを使用します。 appにはnuxtApp.vueAppを渡し、routerはuseRouterで取得して渡しています。
dsnは各自違ったものになります。
my-site-url.comには自分のサイトのURLを記載します。

import * as Sentry from "@sentry/vue";
import { BrowserTracing } from "@sentry/tracing";

export default defineNuxtPlugin((nuxtApp)=>{

    const app=nuxtApp.vueApp
    const router=useRouter()
    Sentry.init({
        app,
        dsn: "https://xxxxxxxxxxx.ingest.sentry.io/yyyyyyyyyyy",
        integrations: [
            new BrowserTracing({
            routingInstrumentation: Sentry.vueRouterInstrumentation(router),
            tracePropagationTargets: ["localhost", "my-site-url.com", /^\//],
            }),
        ],
        // Set tracesSampleRate to 1.0 to capture 100%
        // of transactions for performance monitoring.
        // We recommend adjusting this value in production
        tracesSampleRate: 1.0,
    });
})

設定が終わったら、実際に開発サーバーを起動させてエラーを起こして確認してみます。 app.vueで以下のコードを追加してみます。

<script setup lang="ts">
onMounted(()=>{
  throw new Error('testエラー');
})
</script>

開発サーバーを起動させてページを表示してみると、 エラーが発生するはずなので、sentryにエラーデータが送られます。 sentryのissuesのページを確認してみると、エラーデータがきちんと届いていることがわかります。 プロジェクト名も確認できます。

詳細ページへ行くと、ブラウザ情報、OS情報、URL、ユーザーのipの情報から、 エラーのstack traceを見ることができます。

注意点：本番環境ではconsoleにエラーが表示されないように設定されています。

その他

開発中は停止させる

enabledを付け加えることでon/offを設定できます。 開発中は必要ないので、offにしておきます。

	Sentry.init({
    ...
		tracesSampleRate: 1.0,

		enabled: process.env.NODE_ENV === "production",
	});

さいごに

nuxt3でsentryを使ってエラーデータの送信を行ってみました。 設定ページに書かれていることを行うことで簡単に、ユエラー情報からユーザー情報などのデータを保存することができるようになりました。