Web技術を駆使してユーザーの画面を「録画」する

Web技術を駆使してユーザーの画面を「録画」する @yukukotani 2024/08/24 - フロントエンドカンファレンス北海道

自己紹介小谷優空 - @yukukotani ・VP of Technology @ Ubie,
Inc. ・Maintainer of KumaUI ・Student @ Univ. Tsukuba

うまいスープカレー

今日の趣旨 Webにおける画面録画（セッションリプレイ）の仕組みを覗いてみよう！明日から業務に役立つ話はきっとありません Web技術にワクワクしましょう

Session Replay とは Webアプリにおけるユーザーの画面操作をそのまま視覚的に再生できるツー" 顧客インサイト抽E エラー分ユーザーサポート

なぜ自作するのか

なぜ自作するのか toCプロダクトで全件録画すると課金爆発 $ B 月間100万セッションとすると$2,000G B サンプリングできるけど、ユーザーサポートとかには全件録画が欲しい →自作により、開発人件費を考慮しないコストは10%程度に着地

なぜ自作するのか自社でデータを持ちた x 完全無料で使えるSaaSもあるが(Clarity)、学習利用されQ x もちろん匿名化されるとはいえ、自然言語入力とかも使われるとやや怖 x セルフホスト版もあるが、運用コストが高# x 機能がリッチすぎてミドルウェアが多く大
x 結果的にお金もそれなりにかかる

仕組み概観

基本的なアイデア画面を動画ファイルとして録画できるWeb APIはない・・・ →DOM全体を clone して画面に反映すれば完全再現できるじゃん！

基本的なアイデアもちろん様々な問題があるので工夫が必W F ブラウザを跨いだ再生は F DOMに反映されない画面操作は F DOMが変わるたびに全更新してたら重くない？

録画初期描画のDOMとその後の変化を、タイムスタンプと共にイベントとして記録逐次イベント記録 Browser

再生 sandbox化したiframeによって、Viewer自体とは独立した環境を用意

再生タイムスタンプに合わせて実際にイベントをiframeに反映していく DOM描画スクロール文字入力 DOM更新 iframe

アーキテクチャ・検索系メタデータはDB、イベントデータはオブジェクトストレージ(GCS) ・GCSにはTTLを設定（録画の有効期限）

イベント詳解

初期描画イベント

初期描画イベント：録画 DOM全体をシリアライズして記$ 木構' 各要素にユニークIDを振る要素ごとのユニークID

初期描画イベント：録画色々なことを考慮してシリアライズすy p 再生時はwindowのlocationが異なy p → 画像のsrcなどは相対パスから絶対パスに変E p 再生時にassetが変わってる・消えてる可能性があy p
→ linkのスタイルシートはDOM内にインラインI p ユーザーが任意の要素を差し込めてしま5 p → 再生側にXSSされないようscriptタグは除却

初期描画イベント：再生デシリアライズした要素をiframeに描画 IDと要素のマッピングは記憶しておく

文字入力イベント

文字入力イベント：録画ユーザーの入力は inputイベントを拾って記録する

文字入力イベント：録画機械的な入力(リセットボタン等)はinputイベントが発火しない！

文字入力イベント：録画 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

文字入力イベント：録画 input要素のPropertyDescriptorをオーバーライドして補足するオリジナルの処理に加えてイベント記録処理を追加オリジナルの処理に加えてイベント記録処理を追加オリジナルのPropertyDescriptorを取り出しておく

setTimeoutに包むことで次のイベントループに逃す文字入力イベント：録画 (小ネタ)本来のプロパティ更新をブロッキングするとパフォーマンス低下する →次のイベントループに逃して非同期にイベント記録処理

文字入力イベント：録画属性からセンシティブな入力を判定し、イベントを記録しないように再生側ではなく録画側で弾いているため、データ送信・保持は一切ない

文字入力イベント：再生初期描画時に振ったユニークIDから要素を探して更新

DOM更新イベント

DOM更新イベント https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

DOM更新イベント：録画 MutationObserverでdocument監% 5 要素の追加・削 5 属性の変 5 文字ノードの変更 DOM更新部分の親要素追加した文字ノード
削除したフォーム要素

DOM更新イベント：録画変更内容をイベントとして記録初期描画時に振ったユニークIDで参照新規ノードにもユニークIDを降る

DOM更新イベント：再生更新があった部分のみに差分を反映仮想DOMの差分更新と似ているユニークIDから更新対象を取得追加するノードは新規作成

他にもたくさん考えることが時間の都合で割愛' d iframQ d ShadowDOW d document.adoptedStyleSheets d canvas
d 画面リサイズ・スクロール・マウス移0 d Web Components (Custom Elements d イベントのスロットリング

自作しなくても便利OSSがありますプリミティブな録画&再生の仕組みを提供してくれるライブラリ SentryやPostHogでも使われている ※イベントの保存とかはスコープ外

保存周りも近日中にOSSにしますサクッと自社クラウドに載せて動かせるやつを出すので乞うご期待

ありがとうございました

Web技術を駆使してユーザーの画面を「録画」する

Web技術を駆使してユーザーの画面を「録画」する

More Decks by Yuku Kotani

Other Decks in Programming

Featured

Transcript