当ブログにSentryを導入した【Next.js page router】

2024-04-27に公開

プロジェクトのセットアップ

まず下記からアカウントを作成します。
https://sentry.io/signup/

プロジェクトのセットアップ
アカウント作成後、下記のような画面になるので
一度Skip onboarding.でダッシュボードを開きます。

下記のような画面に遷移するので、Create projectをクリックします。

画面に表示された質問に対して答えていきます。
```
1. Choose your platform
Next.js

2. Set your alert frequency
Alert me on every new issue

3. Name your project and assign it a team
Project nameに任意のプロジェクト名を入力
```

Next.js SDK

下記の画面に遷移するので、Sentryウィザード(自動でSentryの設定ファイルなどを作ってくれる)を使用して構成します。

npx @sentry/wizard@latest -i nextjs

下記のように進めていきます。

Need to install the following packages:
@sentry/wizard@3.22.1
Ok to proceed? (y) y


Are you using Sentry SaaS or self-hosted Sentry?
│  ● Sentry SaaS (sentry.io)
│  ○ Self-hosted/on-premise/single-tenant

# Yesを選択後Sentryにログインします
Do you already have a Sentry account?
│  ● Yes / ○ No

# プロジェクト選択後、@sentry/nextjsがインストールされます
Select your Sentry project.
│  ● 設定したプロジェクト名

# Noを選択下記のファイルがルート直下に作成されnext.config.mjsにsentryの設定が入っていきます。
# sentry.server.config.ts
# entry.client.config.ts
# sentry.edge.config.ts
Do you want to route Sentry requests in the browser through your NextJS server to avoid ad blockers?
│  ○ Yes
│  ● No (Browser errors and events might be blocked by ad blockers before being sent to Sentry)

すでに、_error.tsがある場合captureUnderscoreErrorExceptionを追加するように言われます。

_error.ts

          ErrorPage.getInitialProps = async (context: NextPageContext) => {
  const { res, err } = context;
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;

  if (err) {
    // このページに来た例外をキャプチャ
    await Sentry.captureUnderscoreErrorException(context);
  }

  return { statusCode };
};

質問の続き

Did you modify your src/pages/_error.tsx file as described above?
● Yes / ○ No, get me out of here

# 下記でサンプルを作成すると`pages/api/sentry-example-api.js`とpages/sentry-example-page.jsx`が作成されます。
◇  Do you want to create an example page ("/sentry-example-page") to test your Sentry setup?
│  Yes

ダッシュボードからモニタリング

プロジェクトのセットアップが終わったので、
サンプルの/sentry-example-page.jsxにアクセスし例外を発生させてみます。

下記の画面のように発生したエラーが表示され、
詳細を見てみると下記の情報を確認することができます。

Dashboard

例外が発生したユーザーのIPアドレスや使用ブラウザなど詳細に確認することができます。

Vercelとの連携

当ブログはVercelにデプロイしているので連携します。
やり方はSentryのドキュメントにあるのでこちらにそって連携します。

https://docs.sentry.io/product/integrations/deployment/vercel/

Sentryのマーケットプライスへ接続 https://vercel.com/integrations/sentry

Add Integrationをクリックし、
VercelとSentryの対象のプロジェクトをそれぞれ選択します。

自動的にSentryで必要な下記の環境変数が設定されます。

SENTRY_AUTH_TOKEN
VERCEL_GIT_COMMIT_SHA
NEXT_PUBLIC_SENTRY_DSN
SENTRY_PROJECT
SENTRY_ORG

読み込む対象の環境は必要に応じて変更します。

Sentryファイルから環境変数で管理するところを修正

next.config.mjs

          export default withSentryConfig(
  {
    silent: true,
    org: process.env.SENTRY_ORG,
    project: process.env.SENTRY_PROJECT,
  },
  ...省略
)

sentry.client.config.ts sentry.edge.config.ts sentry.client.config.tsのdsnを環境変数に変更プラス、environmentを追加し、現在のステージがどこか分かりやすくする。

〇〇.config.ts

          // dnsを修正
Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  ...省略
})

ここまで設定が終わったら、再度デプロイ後、
例外発生ページの/sentry-example-pageから例外を発生させれば
Sentryの画面上で確認できるようになる。

引用リンク

Next.js + VercelとSentryを連携させる

Zenn