20240524_SessionReplays

SESSION REPLAYS

PROFILE ・荒井 勇己 ・2023年4月入社 ・フロントエンドユニットエンジニア ・Nuxtjs/Nextjs、Javascript全般が好き ・犬の世話

このセクションの目的 の良さ/特徴を知り、実際に使って みようと思っていただく。 Session Replays

初めに

こんなお悩みはありませんか？

主にテスト・修正依頼をするときに エラー挙動の再現が大変 ユーザーが起こしたエラーの把握が難しい エラー前後に、アプリケーションがどんな挙動 をしたのか・ユーザーがどんな行動をしたのか がわかりづらい

こんなお悩みを解決できる！

SESSION REPLAYS ざっくり説明

どんな機能なのか エラーが起きた時の、ユーザーの行動・アプリケ ーションの挙動の、動画キャプチャのようなもの を生成することができる機能

例えば、ユーザーがアプリケーション内で操作し た内容を、動画キャプチャのようにして生成してく れる。 0:00 / 0:13

エラーが起きた時に自動で取ってくれる 前後のアプリケーションの挙動を含めて記録 ↓ エラー再現などの工数をかけず、スピード感を持っ て、修正ができるようになる！

メリットまとめ エラー挙動の再現をする必要がなくなる。 ユーザーが起こしたエラーの把握がしやすくな る。 エラー前後の挙動がわかりやすくなる。

Sentry 詳しい機能解説 の demo 画面やスクリーンショットを見て、 もう少し詳しく機能を解説

SESSION REPLAYS 一覧画面

Dead Clicks クリックしても、7 秒以上アクティビティがないこと。アクティビティとは、画面の動きやペ ージ遷移などを指している。Most Dead Clicks は、この Dead Clicks が多い要素 Rage Clicks は、 でかつ、ユーザーが 5 回以上クリックされていることを指します。 は、この が多い要素 Rage Clicks Dead Clicks Most Rage Clicks RageClicks Replay 接続元 IP アドレスなど Duration キャプチャ時間 Errors エラーの数

詳細画面(キャプチャ 画面) SESSION REPLAYS

demo 画面を見つつ紹介 リンク

• https://try.sentry-demo.com/organizations/mint-eagle/replays/react:fa7ab28bce85485cb9bcbd945e5e6a04/?query=&referrer=/organizations/:orgId/replays/&statsPeriod=14d&t_main=network&yAxis=count()

画面の左側 キャプチャ URL Breadcrumbs キャプチャ中に起こったアクティビティがタイムライン形式で表示

画面の右側 Google Chrome の検証モードに似せた形 ・ブラウザ・エラーの数 OS Console Network DOM Events クリックイベントなどのDOMイベント issues エラーの箇所

詳しい機能解説終了

SESSION REPLAYS まとめ どんなものか エラーが起きた時のユーザーの行動 / アプリケーシ ョンの挙動を、動画キャプチャのように生成して くれる機能 メリット エラー挙動の再現をする必要がなくなる。 ユーザーが起こしたエラーの把握がしやすくな る。 エラー前後の挙動・行動がわかりやすくなる。

最後に は、結構旨味のある機能だと思う ので、 興味を持っていただけたら幸いです！ Session Replays