ブラウザセッション

実際の操作を見て、トレースを開く

リプレイはユーザーが何をしたかを示し、その下のトレースはなぜ失敗したかを示します。両者は同じセッションIDを持つため、行き来はクリック1回で済み、状況を組み立て直す必要はありません。

画面

録画と証拠を並べて表示

ビューポートはレンダリングされたとおりに再生され、コンソール行、ネットワークリクエスト、発生した例外が、それらを引き起こしたクリックと同じタイムライン上に並びます。

A session replay with the recorded viewport playing beside its console, network and error tabs
/replays session s_9f31 · 6:12
signal
sessions
records
DOM · console · network · errors
joins.on
session_id · trace_id
masking
input · text · client-side
sampling
per org

動き

再生中のセッション

カーソルが「今すぐ支払う」まで移動し、クリックが実行され、その横でイベントストリームが埋まっていきます。各エントリには、それが属するトレースIDが付いています。

replay · checkout flow LIVE
app.acme.com/checkout Chrome macOS Desktop
trace ↳ 9f3c · POST /api/pay 1.24s · 5 spans
edge 1.24s
api 180ms
payment-svc 880ms
stripe 690ms
postgres 85ms
1 session · 9 events · 2 errors trace-linked · 30d retention

できること

録画に含まれるもの

event stream
すべてのイベントを順番どおりに
ナビゲーション、クリック、入力、コンソール行、ネットワーク呼び出し、エラーが1つの順序付きストリームに並びます。各行には、その時点で有効だったトレースIDが記録されます。
rrweb
ピクセル単位で正確なリプレイ
画面ではなくDOMを記録します。スクロール位置、ホバー状態、入力途中の値まで、ユーザーが残したまま、どのウィンドウサイズでも再生されます。
session_id
ある瞬間からスパンへ
失敗したクリックで一時停止し、そこで発火したリクエストを開きます。リプレイとウォーターフォールは1つのセッションIDに対する2つのビューであり、タイムスタンプで繋ぎ合わせた別製品ではありません。
http.status_code
コンソールとネットワークをインラインで
リクエストはメソッド、ステータス、所要時間とともに記録されます。POST /checkoutの500は、別タブではなく、返ってきたその秒にストリーム上に現れます。
mask rules
送信前にマスク
入力欄とテキストノードは、何かが送信される前にブラウザ側でマスクされます。サンプリング率と秘匿ルールは設定項目であり、サポートへの依頼ではありません。

次は

このデータを共有する画面

OTLPをMapleに向ける。

エンドポイントとキーが1つずつ。トレース、ログ、メトリクス、セッションが、最初のリクエストから同じトレースIDに集まります。