Next.jsアプリのエラーログ監視について、SENTRYを使ってみる

mongolyy

公式のドキュメント
https://sentry.io/for/nextjs/

mongolyy

とりあえず、yarn add
yarn add @sentry/nextjs
そして、諸々の設定をするために、
npx @sentry/wizard -i nextjs

mongolyy

sentryのページが開いた。が、なかなか開かない

ちょっと待ってみよう

mongolyy

だめだ。ということで、下のissue通りに

$ npm install -g @sentry/wizard
$ sentry-wizard

したら、解決した。
sentry-wizard後、アプリケーションのプラットフォーム選択を聞かれたので、Next.jsを選択した。

Sentry Wizard failed with:
no projects

と、エラーが出ていたので、SentryでReactをプラットフォームとしたプロジェクトを作成した。
（Next.jsは存在しないようだったので）

mongolyy

sentry-wizard時にconsoleに

File next.config.js already exists, so created _next.config.js.
Please, merge those files.

と、メッセージが表示されていたので、_nex.config.jsとnext.config.jsにいい感じにマージした

sentry.client.config.js, sentry.server.config.js, sentry.propertiesにいい感じの設定が書かれている。

mongolyy

公式Docsに従って、

フロントのエラーを発生させるコンポーネント

pages/error.tsx

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

export default ErrorPage;

API Route

pages/api/error.ts

import { withSentry } from '@sentry/nextjs';
import { NextApiRequest, NextApiResponse } from 'next';

const handler = async (_req: NextApiRequest, res: NextApiResponse) => {
  throw new Error('API throw error test');
  res.status(200).json({ name: 'John Doe' });
};

export default withSentry(handler);

を作成した

mongolyy

アプリを動かす前にとりあえずダッシュボードを確認。
エラーはもちろん表示されていない

mongolyy

とりあえず、/api/errorにアクセスして、確認

ダッシュボード見てみたが、わかりやすそう

トップページ
issueの画面
- 環境とかも表示が見やすくていいな。タグが有るのもきっと便利
- どこのコードでエラーがスローされているかわかるのも素晴らしい、、
- 環境も詳細に確認できて、素晴らしい。。

mongolyy

サンプルコードはエラーをthrowしているが、それ以外の方法はないのだろうか？
（私のチームではエラーはthrowではなく、returnするように書いていきたいと思っているから）
ということで、公式ドキュメントを見てみよう

You can pass an Error object to captureException() to get it captured as event. It's also possible to pass non-Error objects and strings, but be aware that the resulting events in Sentry may be missing a stacktrace.

んー。throwするのが無難か！

mongolyy

じゃあ次はフロントでのエラーがキャプチャされるか確認しよう。
/errorにアクセスしてみる。