403 Views
May 27, 24
スライド概要
株式会社ソニックムーブによる勉強会「Webフロントエンドの新定番!?Sentryが攻略するエラーの迷宮 part1」のスライドです。
セッションリプレイの機能について説明しています。セッションリプレイは、ユーザーの動きを録画することができ、エラー再現に役立ちます。
BtoCサービスのUX・CRM設計とその実現を得意とするLINEアプリ開発、Webシステム開発、スマホアプリ開発会社のソニックムーブです。勉強会スライドを公開します。
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
画面の左側 キャプチャ URL Breadcrumbs キャプチャ中に起こったアクティビティがタイムライン形式で表示
画面の右側 Google Chrome の検証モードに似せた形 ・ブラウザ・エラーの数 OS Console Network DOM Events クリックイベントなどのDOMイベント issues エラーの箇所
詳しい機能解説終了
SESSION REPLAYS まとめ どんなものか エラーが起きた時のユーザーの行動 / アプリケーシ ョンの挙動を、動画キャプチャのように生成して くれる機能 メリット エラー挙動の再現をする必要がなくなる。 ユーザーが起こしたエラーの把握がしやすくな る。 エラー前後の挙動・行動がわかりやすくなる。
最後に は、結構旨味のある機能だと思う ので、 興味を持っていただけたら幸いです! Session Replays