Sentry Replayでアラート対応をお手軽に

こんにちは。人事評価機能のプロダクトエンジニアをしているotaniです。

私達のチームでは起こったエラーの検知・対応を監視ツールであるSentryで行っていますが、表示されるエラーメッセージやスタックトレースだけでは原因の特定が困難で、対応の優先度を決めかねることがありました。ひと目見て原因や再現方法が分かる場合は良いのですが、例えばユーザー側で入れたブラウザの拡張に起因したエラーや、特定のタイミングで操作すると起こるエラーなどには調査に時間がかかってしまい、結果として判断しきれずに優先度が下がってしまう問題などが起こっていました。

そんな状況の中、Sentry Replayによって上記のような課題を部分的に解決し、エラー調査の負担を減らすことができたので紹介したいと思います。

Sentry Replayとは

Sentry Replayとは、Sentryのアドオン機能の1つで、アラートが上がったときのユーザーの操作を再現してくれる機能です。

次の画像は、私達のアプリケーションにおけるReplayのスクリーンショットです。

画面中央にはユーザーの操作を再現した動画（Replay Player）が表示されています。 Replay Playerではマウスポインタの移動やクリック・画面のスクロールなども含めてエラー発生時にユーザーが見ていた画面が再現されます。そのため、「ボタンをクリックした後にローディングの完了を待たずに他の箇所をクリックした」といった、エラーメッセージだけでは再現方法を見つけるのに苦労するようなユーザーの操作が簡単に確認できます。

また、画面下のTimelineにはユーザーセッションのタイムラインが表示されています。エラーが発生したタイミングはタイムライン上に赤い丸で表示されるため、操作のリプレイと合わせてどのタイミングでエラーが発生したのかすぐに把握することができます。

その他、画面右には時系列順のユーザー操作のログやネットワークリクエスト、コンソールの出力などが表示されます。

プライバシーについて

アプリケーションによっては、画面に表示される文字やユーザーの入力がプライバシーの観点からセンシティブな情報である可能性がありますよね。そういった場合でもSentry Replayは安心して使えるようになっており、先程の画像にも表示されている通り、デフォルトでUI上のすべての文字は*でマスクされます。

設定方法

import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: "your-dns-url",
  replaysSessionSampleRate: 0,   // サンプリングするセッションの割合
  replaysOnErrorSampleRate: 1.0, // エラー発生時にリプレイを送信する割合
  integrations: [Sentry.replayIntegration()],
});