【Next.js】Sentryを導入して、エラーを監視する方法を紹介

この記事では、エラー監視ツールであるSentryをNext.jsに導入して、本番環境で発生したエラーを監視する方法について紹介します。

ステップは次の通りです。

最後までご覧いただき、参考にしていただけると幸いです。

Sentryとは？

Sentryは、アプリケーションやウェブサイトで発生したエラーやパフォーマンスの問題をリアルタイムで監視し、開発者に通知するエラートラッキングツールです。

Next.jsをはじめ、Vue.jsやLaravelなど、さまざまなフレームワークに対応しています。

また、エラーが発生した状況や、使用されていたデバイス・ブラウザなどの情報も確認することができます。

実装方法

それでは実装方法を紹介します。

Sentryアカウントの作成

まず初めにSentryのアカウントを作成します。GitHubアカウントでも登録できます。

プロジェクトの作成

Sentryコンソール画面のサイドバーから「Projects」ページへ進み、「Create project」ボタンからプロジェクトを作成します。

「Choose your platform」ではNext.jsを選択します。「Project name」は好きなプロジェクト名を設定し、他設定はデフォルトのまま、プロジェクトを作成します。

SDKのインストール

「Automatic Configuration (Recommended)」で示された、コマンドをNext.jsプロジェクトで実行します。

様々な質問をされますが、基本的にはYesで問題ありません。途中Sentryアカウントのログインを要求されますが、ブラウザを使って簡単にログインできます。

全ての質問に答えるとSDKのインストールが終了し、複数のファイルが自動生成されます。

ファイルの編集

自動生成されたファイルを編集していきます。

.envの編集

「.env.sentry-build-plugin」ファイルに、SENTRY_AUTH_TOKENが記述されています。これをそのまま「.env」にコピペしてください。

「.env」に記述したら「.env.sentry-build-plugin」は削除して問題ありません。

dsnの設定

「sentry.client.config.ts」、「sentry.edge.config.ts」、「sentry.server.config.ts」の3つのファイルに、「dsn」の記述があります。こちらについてはクライアントに公開されるものなので、環境変数にする必要はありませんが、わざわざ公開する必要もないので環境変数としましょう。クライアント側で使用するので、NEXT_PUBLIC_SENTRY_DSNとします。

dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,

tracesSampleRateの設定

「sentry.client.config.ts」、「sentry.edge.config.ts」、「sentry.server.config.ts」の3つのファイルに、tracesSampleRateの記述があります。これはリクエストやトランザクションをどのくらいの割合で記録するかを決める設定です。

デフォルトでは全トランザクションの100%をSentryに送信する設定となってますが、無料枠の場合は上限に達してしまう可能性もあるので、調整することをおすすめします。

筆者は初めに、全トランザクションの10%と設定してみました。

tracesSampleRate: 0.1,

next.config.tsの設定

「next.config.ts」ファイルの中に、orgとprojectの記述があります。

ここを環境変数から読み取るようにしましょう。

org: process.env.SENTRY_ORG,
project: process.env.SENTRY_PROJECT,

変更の必要がないファイル

「instrumentation.ts」と「global-error.tsx」はそのまま残しておいてください。

テスト用ファイル

app/sentry-example-page/page.tsxとapp/api/sentry-example-api/route.tsは意図的にエラーを発生させ、Sentryの動作確認を行うためのファイルです。そのまま残しておきましょう。

次のセクションで紹介する、テスト後に削除してください。

テスト方法

本番環境でのテスト方法を紹介します。

※ローカル環境でもテストできますが、本番環境でもテストすることを推奨します。

環境変数の設定とデプロイ

あらかじめデプロイ先の環境変数に、「.env」に記述したものを設定しておきましょう。

SENTRY_AUTH_TOKEN=
NEXT_PUBLIC_SENTRY_DSN=
SENTRY_ORG=
SENTRY_PROJECT=

そして、デプロイします。

意図的にエラーを発生させる

本番環境で/sentry-example-pageに移動すると、テスト用のボタンが表示されます。「Throw error!」をクリックすると意図的なエラーが発生します。

Sentryコンソール画面に戻って、「Issues」ページでエラーが記録されていれば実装成功です。

また、アカウントのメールアドレス宛にもエラー通知のメールが来ます。

最後に

ここまでNext.jsにSentryを導入して、エラー監視を行う方法について紹介しました。

ローカル環境では問題がなかったものの、本番環境でエラーが発生してしまったり、一部のブラウザ・ユーザーの間で動いていないなど、意図しないエラーにも気づく可能性が上がるので、サービスの保守がより安全になったかなと思います。

ぜひ試してみてください。

ここまでお読みいただき、ありがとうございました。