[Nextjs x Sentry] 環境変数はNEXT_PUBLICつけよう

先日、Next.jsを使って開発しているフロントエンドの環境にSentryを入れる作業をしていました。ローカルからSentryにエラーが送られていることも確認して意気揚々とdev環境に反映をするとエラーが思ったように送信されません。

「AuthTokenがないからか？」「.envが読み込まれてないからか？」と四苦八苦してましたが、理由はシンプルでした。

NEXT_PUBLICつけないと呼び出せない

SentryのセットアップはNext.jsだと自動で行なってくれるのですが、その際、sentry.server.config.tsやsentry.client.config.tsといったファイルを作ってくれます。

今回エラーを出すSentryのProjectは1つにしていて、Environmentsで切り替えるようにするためこのように書いていました。

sentry.client.config.ts

import * as Sentry from '@sentry/nextjs'

if (process.env.SENTRY_ENVIRONMENT) {
  Sentry.init({
    environment: process.env.SENTRY_ENVIRONMENT,
    dsn:
      process.env.NODE_ENV === 'production'
        ? 'dnsのURL'
        : '',
  })
}

SENTRY_ENVIRONMENTに特定の環境名を入れてエラーが出た環境を出し分けるイメージで設定してました。
Next.jsは.envから値を勝手に読み込んでくれるためSENTRY_ENVIRONMENTと記入してexampleで生成されるエラーチェックのページでエラーが送られていたので安心していました。
実際にはサーバーサイドでのエラーが送信されていただけでsentry.server.config.tsの設定で送られているだけでしたが...。

ブラウザから環境変数を使うにはNEXT_PUBLICを変数名につける必要があるため今回はNEXT_PUBLIC_SENTRY_ENVIRONMENTとすることでクライアントからのエラーリクエストが送れるようになります。

もっと早く気づくべきだった

SENTRY_ENVIRONMENTがなければ走らないようにしていたためずっとエラーが送られないと3時間くらい悩むハメになりました。まさかシンプルなところで詰まるとは思ってなかったので辛い。

環境変数のバリデーションを追加しておけばもう少し早く気づけたかもしれないですね。

今度これ入れてみたいと思います。
https://zenn.dev/okumura_daiki/articles/6d3632c6885ed6

Next.js使ってたらNEXT_PUBLIC使ってないとブラウザで環境変数が動かないってのは結構知られてると思うのですが恥ずかしい教訓も記事にしておくべきと判断しちょっと書いてみました。

Sentry.initってだけでフロントエンドで別に使ってないでしょーって思ってつけないとハマるのでブラウザからも利用されるものは忘れずにつけておきたいなと思います。

終わり。