こんにちは、iimonでエンジニアをしている須藤です。最近フロントエンドを触る機会が多く、フロントエンドのパフォーマンス監視やエラー検出ができるツールがないか探していたところ、オープンソースでSentryというプラットフォームがあるようなので、今回は触りながら機能を見ていこうかと思います。

Sentry概要

開発者が実際に重要な点を把握し、より迅速に解決し、アプリケーションについて継続的に学習できるように支援する、開発者中心のエラー追跡およびパフォーマンス監視プラットフォーム https://docs.sentry.io/ より

主な機能

エラーをグルーピングし、影響の受けたユーザー数、イベント数を表示
エラー発生時の詳細情報の表示
- DOMイベントやログ、HTTPリクエスト
- スタックトレースやトレース
- セッションリプレイ(ユーザーの行動の視覚的な理解)
- ブラウザやデバイス情報
アラートや通知、問題の割り当て、チャット、優先度、チームの設定などの管理系の機能
ダッシュボード作成やWeb Vitals、APDEX(ユーザー満足度の指標)、エラー率、リクエスト頻度などのインサイト系の機能

SentryServerの構築

まず、下記リンクからのcodeをclone https://github.com/getsentry/self-hosted

Arm64にはまだ正式に対応していないようなので(2024/11時点)、 https://github.com/getsentry/self-hosted/issues/1585

docker-compose.ymlの全サービスに

platform: linux/amd64

を追加

インストールスクリプトを実行し、初期ユーザーを作成

$ ./install.sh

Serverを起動

$ docker compose up -d

http://localhost:9000/からログイン、初期設定も済ませる

Next js用のプロジェクトも作成しておきます

作成後に表示される、SDKの自動構成用のコマンドとDNSはあとで使うのでメモしておく

Next.jsの設定

https://docs.sentry.io/platforms/javascript/guides/nextjs/

Nextjsのプロジェクトを作成

$ npx create-next-app@latest

先ほどメモした自動構成用のコマンドを実行
$ npx @sentry/wizard@latest -i nextjs --org team_name --project project_name
ポップアップが出てくるので、Sentryのプロジェクトを選択

sentryのconfigファイル(sentry.~.config.tx)にメモしたDNSを設定

開発用サーバーを起動し、自動で作成されたエラー出力用のページにアクセス、ボタンをクリックし、エラーを起こしてみる

http://localhost:3000/sentry-example-page

SenturyのissuesにFrontendとAPI Routerのエラーが追加されている

API Routerのissuesをクリックするとイベント、スタックトレース、トレース、デバイス情報などエラーの詳細が確認できる

次にFrontendのissuesをクリックしてみるとapiで取得した情報に加えて、Session Replayが紐づいており、画面上での操作内容を視覚的に確認できる

また、Web Vitalsも記録されていることがわかります

統合(Integration)の追加

統合とは、ライブラリの機能を、アプリケーションに自動的にインストルメント化し、sentry sdkの機能を拡張するもの

https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/integrations/

ユーザーフィードバックの設定を設定してみる

Nextjsのsentry.client.config.tsのintegrationsにfeedbackIntegrationを追加します

画面内にバグレポート用のボタンが追加されているスクリーンショットとともにレポートを送信してみる SentryのUser Feedbackパネルからバグ内容がスクリーンショットやセッションリプレイととに確認できる

Alartの追加

Alartパネルから、エラー数を1分ごとに計測して、CriticalなErrorが3つ以上確認されたら、emailを送信するという内容でアラートを作成し、エラーを起こしてみる正常にEmailが送信されることを確認できた

まとめ

今回は、基本的な機能しか触りませんでしたが、サンプルレートの変更やFilterの設定、githubと連携して疑わしいcommitを関連付けたり、slackへの通知やgrafanaとの統合など機能が豊富で、使いこなせると便利だなと感じました。
また、複数ユーザーやサイトを運用する場合のコストが低く、フロントエンドへの導入が容易で、バグ報告、エラー監視、パフォーマンス監視、セッションレポートなど魅力的な機能が整っていると感じました。