https://note.com/tabelog_frontend/n/n7f6822ae0c0d

はじめまして、2021年11月に食べログFE(フロントエンド)チームにジョインした遠藤です。

Next.jsを採用した新規プロジェクトに参画し、Sentryの導入を行いました。本記事ではSentryを導入した際の課題と解決策について記載していきます。

1. はじめに

「Sentryとは何か？」、「食べログでSentryを選定した理由」などにご興味がある方はまず下記の記事を読んでみてください。

Sentryは便利ですが以前はアプリケーションに導入するにはいくつかのファイルを作成して、エラーやパフォーマンスをトラッキングするのに様々な設定を行う必要がありました。

そこでSentryが簡単にセットアップができるように@sentry/nextjsでwizardを提供してくれています。 wizardはコマンドを実行するだけでSentryに必要なファイルを自動で生成し、設定までしてくれる便利な代物です。

# @sentry/nextjs をインストール
npm install --save @sentry/nextjs

# @sentry.wizard を実行
npx @sentry/wizard -i nextjs

# 必要なファイルが自動生成される！！

自動生成されるファイル

• sentry.client.config.js
• sentry.server.config.js
• next.config.js
• sentry.properties
• .sentryclirc

基本的にはwizardでファイルを自動生成した後に、next buildを実行するだけでSentryにソースマップをアップロードし、アプリケーション内のエラーを送信できるようになります。

とても親切ですね！wizardを使用すれば簡単にセットアップはできるのですが、wizardだけでは解決できない課題がいくつかあったので共有します。 本記事では7つの課題と解決策を紹介します。

2. 課題と解決策

課題① 開発環境以外でAUTH_TOKENを使用できない