Zenn
🗂

Next.js13(app directory)でSentry導入

2023/12/04に公開
Next.js
Sentry
tech

結論

とりあえずSentryに記録されるまで

ターミナル
// 手動でディレクトリ作成する
mkdir /hoge-project/app/sentry-example-page
// 作成後にコマンドを叩く
npx @sentry/wizard@latest -i nextjs

インストール完了後

next.config.js
// Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
// tunnelRoute: "/monitoring",
// ↑コメントします

テスト用コンポーネントを追記

app/page.tsx
'use client'

export default function Home() {
  return (
    <button
      type="button"
      onClick={() => {
        fetch('/api/error')
        throw new Error("Sentry Frontend Error");
      }}
    >
      Throw error
    </button>
  )
}

ボタンをクリックしてSentryで記録されているか確認。

概要

インストールするだけで実装完了！
そのまま例外発生させるだけで通知行くぜ！
みたいな雰囲気だったのに詰まったので記録に残します。

導入

まずは公式ドキュメントを参考にインストールを進めていきます。
https://docs.sentry.io/platforms/javascript/guides/nextjs/#install

Install
Sentry captures data by using an SDK within your application’s runtime.

We recommend installing the SDK through our installation wizard:

Bash
npx @sentry/wizard@latest -i nextjs

インストールしていくと、

Sentry Wizard failed with:
ENOENT: no such file or directory, open 'C:\Users\mochizuki\repositories\hoge-project\app\sentry-example-page\page.jsx'

Protip: Add --debug to see whats going on
OR use --help to see your options

こんなエラーが起きる

Wizard not creating directories /src/app/sentry-example-page or /src/app/api/sentry-example-api and fails to create files
page.jsx and route.js. Manually creating this directories fixes error.

https://github.com/getsentry/sentry-wizard/issues/436

たぶん手動でディレクトリ作らなきゃいけないのかな？

/hoge-project/app/sentry-example-page

作成後再度

Bash
npx @sentry/wizard@latest -i nextjs

ポチポチ...

🎉  Successfully set up Sentry for your project 🎉

わーい🎉
さっそく例外発生させよう

Verify
This snippet includes an intentional error, so you can test that everything is >working as soon as you set it up.

Add a button to a frontend component that throws an error:

pages/index.js
<button
 type="button"
 onClick={() => {
   throw new Error("Sentry Frontend Error");
 }}

 Throw error
</button>

And throw an error in an API route:

pages/api/error.ts
import type { NextApiRequest, NextApiResponse } from "next";

export default (req: NextApiRequest, res: NextApiResponse) => {
 throw new Error("API throw error test");
 res.status(200).json({ name: "John Doe" });

ふむふむ早速やってみよう

npm run dev

...しばらくすると

SyntaxError: Identifier 'withSentryConfig' has already been declared

またエラーだ!?
withSentryConfigが記述されているnext.config.jsをみたら

const { withSentryConfig } = require("@sentry/nextjs");
module.exports = withSentryConfig()

この記述が二つある！？
多分インストール繰り返した数だけ増えてる
一つだけにして再度

npm run dev

サーバー側も試したかったので

    <button
      type="button"
      onClick={() => {
        fetch('/api/error')
        throw new Error("Sentry Frontend Error");
      }}
    >
      Throw error
    </button>

こんなコンポーネントを適当に差し込んで押してみると

APIは無事エラーが記録されているけど、
Sentry　Frontend　Error
が飛ばされていない！？

検証ツールのネットワークを見てみると

リクエスト URL:http://localhost:3000/monitoring?o=xxx&p=xxx

となっている？
これはなんだ？
next.config.jsの

// Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
tunnelRoute: "/monitoring",

デフォルトでこんな設定になっている
これをコメントして再度テストしてみると

リクエスト URL:https://xxx.ingest.sentry.io/api/xxx/envelope/?sentry_key=xxx&sentry_version=7&sentry_client=sentry.javascript.nextjs%2F7.69.0

こんな感じになって無事エラーが管理画面に表示されるようになりました

Discussion