Next.jsアプリのエラーログ監視について、SENTRYを使ってみる
mongolyy公式のドキュメント
mongolyyとりあえず、yarn add
yarn add @sentry/nextjs
そして、諸々の設定をするために、
npx @sentry/wizard -i nextjs
mongolyysentryのページが開いた。が、なかなか開かない
ちょっと待ってみよう
mongolyyだめだ。ということで、下のissue通りに
$ npm install -g @sentry/wizard
$ sentry-wizard
したら、解決した。
sentry-wizard後、アプリケーションのプラットフォーム選択を聞かれたので、Next.jsを選択した。
Sentry Wizard failed with:
no projects
と、エラーが出ていたので、SentryでReactをプラットフォームとしたプロジェクトを作成した。
（Next.jsは存在しないようだったので）
mongolyysentry-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に従って、
フロントのエラーを発生させるコンポーネント
const ErrorPage = () => {
return (
<button
type="button"
onClick={() => {
throw new Error('Sentry Frontend Error');
}}
>
Throw error
</button>
);
};
export default ErrorPage;
API Route
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にアクセスしてみる。
Throw errorボタンをクリックしてみる（Tailwindを入れているので、ボタンっぽくなっていないが）。
うん。エラーはスローされったっぽい
mongolyySentryで確認してみよう。
一覧画面も見やすいし
個別画面もわかりやすい。特に"BREADCRUMBS"がエラーの発生状況確認に役立ちそう
mongolyyとりあえず、Sentryはかなり良さげでした。
Next.js専用でドキュメントが用意されていたり、キャプチャ用のサンプルもあって親切。
ドキュメントもパット見た感じ豊富そうなのでそういう意味でも親切で使いやすそう。
ということで、また後日にDataDogを触って比べてみよう