Sentry Session Replay機能の紹介

こんにちは、タレンティオの森脇です。

先日、SentryのSession Replay機能が、GA版として公開されましたので紹介します。

sentry.io

Sentryとは

Sentryとは、開発者向けのエラートラッキングとパフォーマンス監視のプラットフォームです。 例えば、エラートラッキング機能では、アプリケーションでエラーが発生した場合に、Sentry上でスタックトレース・該当のソースコードなどが確認できます。

Session Replayの紹介

Session Replayは、ユーザーの行動を動画のように再現し、エラーの発生時・発生前後の状況を確認することができます。

今までのSentryが提供する情報だけでは、再現できない問題の解決に時間がかかる場合がありました。 Session Replayでは、ユーザーの行動を視覚的に確認でき、ネットワークリクエスト、DOMイベント、コンソールメッセージ等のより正確な情報を元にトラブルシューティングが行えるようになります。

それでは、実際にどのように見えるかを確認してみます。

SDKのインストール

Session Replayを利用するには、Sentry SDKの Version 7.27.0以上が必要です。

yarn add @sentry/browser
セットアップ

Sentryの初期化時に、以下のように定義します。

examplePublicKeyには、自身の環境のKeyを設定してください。

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

Sentry.init({
  dsn: "https://[examplePublicKey]@o0.ingest.sentry.io/0",

  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,

  integrations: [
    new Sentry.Replay({
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});

以上で完了です。

動作確認

確認のために、テキストボックスに特定の文字列を入れると、例外を発生させます。

<input
 type="text"
 onChange={e => {
    console.log(e.target.value)
    if (e.target.value == 'exception') {
        throw new Error('exception occurs')
    }
  }}
/>

画面を操作しエラーを発生させると、Sentry上でエラーが確認できます。以下のようなブラウザのDeveloper Consoleに近い情報を確認できます。

  • タイムライン
  • ユーザの行動リプレイ
  • パンくず
  • console
  • network
  • DOM Events

session replay

再生ボタンを押すと、ユーザの行動を動画のように再現できます。

（実際にTalentioで動かしたときのイメージ）

Session replayの動画

consoleへの出力内容は、タイムラインと共に確認できます。

console

エラー発生時のユーザの画面操作や、DOM・コンソールの情報が明確に分かります。

Privacyの対策

Session Replayでは、ユーザ画面の表示・入力データは、デフォルトでは*でマスクされます。 また、テキストデータだけではなく、img,object,iframe等のメディア要素もブロックされるため、個人を特定するデータはSentryへ送信されません。 ただし、一部のplaceholderがマスクされていないケースが発生したため、正しくマスクされない箇所は以下で紹介する方法で個別対応が必要です。

特定のDOM要素に属性 or CSSクラスを追加することで、その内容を記録しないようにすることも可能です。

例えば、サイドメニューののDOMにdata-sentry-blockを付与すると、サイドメニューは空白として表示されます。

<div data-sentry-block>
// sidemenu content
</div>

空白のサイドメニュー

パフォーマンスへの影響

Session Replayでは、DOMの変更を検知し、定期的にSentryへデータを送信しています。 そのため、多少のオーバヘッドは発生していますが、最適化のための対策が行われているため、 確認した環境ではユーザが体感できるほどの影響はありませんでした。

パフォーマンス最適化のための対策

  • DOMの変更の検知には、ブラウザのAPIであるMutationObserverを利用している
  • DOMの変更発生時に、全てのDOMを送信するのではなく、初回のスナップショットからの差分だけ送信している
  • サーバへ送信するDOMは、gzip圧縮されており、圧縮はWeb Workerによりバックグランドで行われている
  • 画像などの静的アセットはクライアントから転送せず、Sentryダッシュボードでの動画の再生時にアセット元のホストサーバーから直接取得されます。

実際に確認しても、一度に送信されるデータは数十バイトほどでした。

価格

エラー監視等と同じく、従量課金となっており一定数を超えると追加料金が発生します。

docs.sentry.io

まとめ

Session Replay機能は、ユーザーの行動が正確に確認できるようになるため、 再現が難しいエラーのトラブルシューティングの工数削減が期待できます。

導入も容易で、既にSentryの有料プランを利用している場合は、一定数までは追加費用無しで利用できるのでおすすめです。