Next.js に Sentry を導入してエラーログを収集してみる

https://vectorlogoseek.com/wp-content/uploads/2020/02/sentry-io-vector-logo.png

初期設定

設定ウィザードを使って設定できる。

code:sh

npx @sentry/wizard -i nextjs

セットアップするとエラーが送信されるサンプルコードも送信される。

Github や Slack への通知はダッシュボードから設定できる。

ただし、 Slack の通知を含めたインテグレーションは無料アカウントではできないよう。

Sourcemap

release artifact にはnext build したらアップロードされた。

ただ、 artifact build には Sentry CLI を使ってはアップロードできたが、いまいち違いがよくわからない。

ただ、 artifact build でソースマップをアップロードしておけば十分なようだ。

もし、 sentry のトークンがない状態でビルドをすると、「ビルドしたこと」だけ通知され、ソースマップはアップロードされない。

認証情報の設定は .stylelintrc だけではなく、他の方法でもできる。

CI でビルドのたびにソースマップがアップロードされるのはどうかな、と考え、私は環境変数がある場合だけ、プラグインを有効にするよう next.config.js を修正した。

SENTRY_AUTH_TOKEN 環境変数は、 CI 側で条件によってセットするようにした。

code:js

if (process.env.SENTRY_AUTH_TOKEN && process.env.SENTRY_AUTH_TOKEN.length > 0) {

// Injected content via Sentry wizard below

const { withSentryConfig } = require('@sentry/nextjs');

// ...

}

Dynamic server usage: headers / cookies などのエラーが検出される

next build したタイミングで、上記のようなエラーが検出された。

参考