Next.jsで開発環境と本番環境を分けて発火するsentryのコードを実装した

開発環境と本番環境では、多くの場合で動作が異なります。開発中はエラーが発生しても気軽に修正できますが、本番環境ではユーザーに影響を与えるため、エラーを発生させないように細心の注意を払う必要があります。そのため、開発環境と本番環境の設定を分けることは重要です。

今回は、Next.jsで開発環境と本番環境を分け、本番環境で発生したエラーを収集するためにsentryを導入しました。さらに、開発環境ではエラーを発生させず、本番環境ではエラーを発生させるように設定しました。

開発環境と本番環境の設定を分ける

開発環境と本番環境の設定を分けるために、Next.jsでは環境変数を利用することができます。まず、.env.localファイルを作成し、以下のように記述します。

このファイルでは、sentryのDSNを設定し、NODE_ENVをdevelopmentに設定しています。これにより、開発環境であることを示しています。

次に、本番環境用の.env.productionファイルを作成し、以下のように設定します。

このファイルでは、同様にsentryのDSNを設定し、NODE_ENVをproductionに設定しています。これにより、本番環境であることを示しています。

sentryの導入

sentryは、エラーの収集と管理を行うためのサービスです。Next.jsでは、@sentry/nextjsというライブラリを利用することで簡単に導入することができます。

まず、@sentry/nextjsをインストールします。

次に、pages/_app.jsファイルを編集し、以下のように記述します。

ここでは、@sentry/nextjsをインポートし、Sentry.init()を利用してsentryを初期化しています。dsnには、.env.localファイルで設定したsentryのDSNを渡しています。environmentには、NODE_ENVを渡しています。これにより、開発環境と本番環境で異なる設定を行うことができます。

また、integrationsとtracesSampleRateを設定することで、トレース情報を収集することができます。トレース情報とは、アプリケーションの処理時間やHTTPリクエストなどの情報を収集することで、エラーの原因を特定するのに役立ちます。

エラーを発生させる

開発環境ではエラーを発生させず、本番環境ではエラーを発生させるように設定するために、pages/index.jsファイルを編集します。

ここでは、ボタンをクリックするとエラーを発生させるように設定しました。しかし、開発環境ではエラーを発生させないように設定しているため、このままではエラーが発生しません。

エラーを収集する

最後に、本番環境でエラーを収集するように設定を行います。先ほど作成したpages/_app.jsファイルを編集し、以下のように記述します。

ここでは、MyAppコンポーネントにerrが渡された場合にエラーを収集するように設定しています。これにより、本番環境でエラーが発生した場合にエラーがsentryに送信されます。

まとめ

Next.jsでは、環境変数を利用して開発環境と本番環境の設定を分けることができます。また、@sentry/nextjsを利用することで簡単にsentryを導入することができます。本番環境ではエラーを収集し、開発環境ではエラーを発生させないように設定することで、より安全にアプリケーションを開発することができます。