この記事では、エラー監視ツールであるSentryをNext.jsに導入して、本番環境で発生したエラーを監視する方法について紹介します。
ステップは次の通りです。
Sentryって何?
この記事では、エラー監視ツールであるSentryをNext.jsに導入して、本番環境で発生したエラーを監視する方法について紹介します。
ステップは次の通りです。
最後までご覧いただき、参考にしていただけると幸いです。
スポンサーリンク
Sentryは、アプリケーションやウェブサイトで発生したエラーやパフォーマンスの問題をリアルタイムで監視し、開発者に通知するエラートラッキングツールです。
Next.jsをはじめ、Vue.jsやLaravelなど、さまざまなフレームワークに対応しています。
また、エラーが発生した状況や、使用されていたデバイス・ブラウザなどの情報も確認することができます。
スポンサーリンク
それでは実装方法を紹介します。
まず初めにSentryのアカウントを作成します。GitHubアカウントでも登録できます。
Sentryコンソール画面のサイドバーから「Projects」ページへ進み、「Create project」ボタンからプロジェクトを作成します。
「Choose your platform」ではNext.jsを選択します。「Project name」は好きなプロジェクト名を設定し、他設定はデフォルトのまま、プロジェクトを作成します。
「Automatic Configuration (Recommended)」で示された、コマンドをNext.jsプロジェクトで実行します。
様々な質問をされますが、基本的にはYesで問題ありません。途中Sentryアカウントのログインを要求されますが、ブラウザを使って簡単にログインできます。
全ての質問に答えるとSDKのインストールが終了し、複数のファイルが自動生成されます。
自動生成されたファイルを編集していきます。
「.env.sentry-build-plugin」ファイルに、SENTRY_AUTH_TOKENが記述されています。これをそのまま「.env」にコピペしてください。
「.env」に記述したら「.env.sentry-build-plugin」は削除して問題ありません。
「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,
「sentry.client.config.ts」、「sentry.edge.config.ts」、「sentry.server.config.ts」の3つのファイルに、tracesSampleRateの記述があります。これはリクエストやトランザクションをどのくらいの割合で記録するかを決める設定です。
デフォルトでは全トランザクションの100%をSentryに送信する設定となってますが、無料枠の場合は上限に達してしまう可能性もあるので、調整することをおすすめします。
筆者は初めに、全トランザクションの10%と設定してみました。
tracesSampleRate: 0.1,
「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を導入して、エラー監視を行う方法について紹介しました。
ローカル環境では問題がなかったものの、本番環境でエラーが発生してしまったり、一部のブラウザ・ユーザーの間で動いていないなど、意図しないエラーにも気づく可能性が上がるので、サービスの保守がより安全になったかなと思います。
ぜひ試してみてください。
ここまでお読みいただき、ありがとうございました。
スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク