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

 

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

 

2. プロジェクトのセットアップ 
 アカウント作成後、下記のような画面になるので 
 一度`Skip onboarding.`でダッシュボードを開きます。
 ![Welcome to Sentry](https://zaki-dev-image-bucket.s3.ap-northeast-1.amazonaws.com/article-images/sentry/1.png 'Welcome to Sentry')

 

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

 ![Create Project](https://zaki-dev-image-bucket.s3.ap-northeast-1.amazonaws.com/article-images/sentry/2.png '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に任意のプロジェクト名を入力
 ```

 

3. Next.js SDK

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

```shell
npx @sentry/wizard@latest -i nextjs
```

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

```shell
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`を追加するように言われます。

```typescript:_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 };
};
```

質問の続き

```shell
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](https://zaki-dev-image-bucket.s3.ap-northeast-1.amazonaws.com/article-images/sentry/3.png 'Dashboard')

 

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

 

## Vercelとの連携

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

 

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

 

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

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

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

```shell
SENTRY_AUTH_TOKEN
VERCEL_GIT_COMMIT_SHA
NEXT_PUBLIC_SENTRY_DSN
SENTRY_PROJECT
SENTRY_ORG
```

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

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

```javascript: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`を追加し、現在のステージがどこか分かりやすくする。

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

 

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

 

## 引用リンク

https://zenn.dev/keitakn/articles/add-sentry-to-nextjs-vercel

Zaki-dev

Monitoringの記事

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