Datadog RUM で始める UI Monitoring
はじめに
サーバー監視ツールとして知られる Datadog ですが、
UI イベントやフロントエンドパフォーマンスの監視もできます。
概要
Datadog RUM では、
- エラートラッキング
- パフォーマンスメトリクスの収集
- ユーザーアクションの追跡
に加え、
- フロントエンドのセッションとバックエンドのトレースを相関させること
- セッションリプレイ機能によるユーザ行動のビデオでの再現
- ファネル分析
が可能で、
これらの機能が JS モジュールの import と init の発火のみで利用可能になります。
ブラウザの他、モバイル向けの SDK も用意されています。
紹介記事
注目機能: ユーザーアクションの追跡
本記事では筆者のイチオシ機能「ユーザーアクションの追跡」について紹介します。
ユーザーアクションの追跡を網羅的に行う場合
- データ送信実行コスト
- ラベルの実装・管理コスト
- 各 UI の持つロジックの汚染
- サーバコスト
が発生することから片手間ではありません。
Datadog RUM は以下の仕様でそれらの問題が軽減されており、
網羅的なユーザーアクションの追跡を可能にしてくれます。
データ送信実行コスト対策
特定のクリックのみをアクションとみなす
以下の条件に当てはまる場合にのみクリックアクションが計測されます。
- クリックが処理された 100ms 以内にネットワークリクエストまたは DOM 変更が起こった
- クリックによってページ読み込みが開始しない（これはビューイベントとして計測される）
SPA でのアクションはこれでほぼ計測可能です。
例外的なアクションは、カスタムアクションを作成して計測することも可能です。
バッチ送信
TBW
ラベルの実装・管理コスト対策
data 属性によりアクションにラベルをつけることが可能で、
data 属性がついていない場合は エレメントのテキストを見てくれるようになっています。
また、そのエレメントに data 属性やテキストがない場合も見つかるまで親要素を辿って探すようになっています。
各 UI の持つロジックの汚染対策
カスタムアクションを作成しない場合はすべて自動で収集してくれるので init 以上のコードを書く必要がありません。
また、ユーザの個人情報をマスキングするなどの中間処理は設定可能になっています。
サーバコスト対策
セッション単位での課金となっており、アクションの計測では費用が発生しません。
（セッションリプレイ機能は上位プランのみ）
他 SaaS との比較
ユーザーアクションの追跡は、エラー監視を目的とする Sentry には無い機能で、
Google Analytics 4 では自動収集が強化されたとはいえ、
全てのアクションを追跡してくれるものではなく、
また、1000 万リクエストを超えた場合には 150 万円ほどの費用が発生してしまいます。
その他注目機能
- セッションリプレイ機能
- Source Map サポートがありトランスパイルされたコードのデバッグが容易
- バックエンドトレースにリンク可能
- バージョン毎の追跡が可能
おわりに
Datadog RUM で高度な分析基盤が時間的にも金銭的にも低コストで用意できるようになりました。
ユーザーの体験の向上にはユーザーに近い位置からのモニタリングが欠かせません。
Happy Datadogging!
資料
公式ドキュメント
Discussion