Datadogリアルユーザーモニタリングを試してみました

タレンティオの森脇です。

今回は、Datadogの機能の一つである、リアルユーザーモニタリングについて簡単に試してみたので紹介します。

docs.datadoghq.com

リアルユーザモニタリングとは

リアルユーザーモニタリング (以下 RUM) は、Webブラウザ・モバイルアプリユーザのアクティビティ・パフォーマンス・エラー状況などを可視化することができます。

以降では、Webブラウザの機能について紹介します。

導入手順

Datadog上のナビゲーションに沿って、必要事項を指定することで導入用のコードが発行できます。
インストールタイプにCDNを選択した場合は、以下のようなコードが発行されるため、アプリケーションの適切な箇所に埋め込みます。

<script>
  (function(h,o,u,n,d) {
    h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
    d=o.createElement(u);d.async=1;d.src=n
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/us1/v5/datadog-rum.js','DD_RUM')
  window.DD_RUM.onReady(function() {
    window.DD_RUM.init({
      clientToken: '[CLIENT_TOKEN]',
      applicationId: '[APPLICATION_ID]',
      site: 'datadoghq.com',
      service: 'my-application',
      env: 'development',
      sessionSampleRate: 100,
      sessionReplaySampleRate: 100,
      trackUserInteractions: true,
      trackResources: true,
      trackLongTasks: true,
      defaultPrivacyLevel: 'mask-user-input',
    });
  })
</script>

RUMはセッション数に応じた従量課金ですが、sessionSampleRateで追跡対象とするセッション比率を制限できます。

主な機能

RUMの主な機能について紹介します。

ダッシュボード

RUMが有効になると、ダッシュボードで主要メトリクスが表示されます。

ページのパフォーマンスの監視

RUMでは、Web Vitals | Articles | web.devで説明されている、以下の3つのメトリクスを収集しています。

Largest Contentful Paint （LCP）
- ページ読み込みタイムライン上で、ビューポート内の最大の DOM オブジェクトがレンダリングされた時点を示します。
- 読み込みのパフォーマンスを測定するための指標です。
First Input Delay (FID)
- ユーザーがページを最初に操作してからブラウザが応答するまでの経過時間です。
- インタラクティブ性を測定するための指標です。
Cumulative Layout Shift (CLS)
- 動的に読み込まれるコンテンツ (サードパーティの広告など) による予期しないページ移動を定量化します。0 はシフトが発生していないことを意味します。
- 視覚的な安定性を測定するための指標です。

ページごとに、上記メトリクスの 75 パーセンタイルの値を確認できます。

ユーザーアクションの追跡

ユーザがブラウザ上で行ったアクションを自動で検出できます。

ブラウザエラーの収集

RUMでは、フロントエンドのエラーを収集します。発生要因に応じて以下の３つのカテゴリに分類されます。

source: 未処理の例外または未処理のプロミス拒否
console: console.error() API 呼び出し
custom: addError API を利用して送信されるエラー

エラーを手動で収集する場合は、addError APIを利用します。

fetch('https://example.com/hoge').catch(function(e) {
     window.DD_RUM.onReady(function () {
          window.DD_RUM.addError(new Error(e), {
             hoge: 'fuga',
          })
     })
})

エラー内容とエラー発生時のユーザアクションが確認できます。

以下の例では、「削除」ボタンをクリック時に、エラーが発生していることが確認できます。

セッションリプレイ

セッションリプレイは、ユーザーのブラウザ操作をキャプチャして視覚的に再生できるようにする機能です。
以前に紹介したSentryのセッションリプレイと同じ機能です。Sentryのセッションリプレイについては、以下の記事をご覧ください。

Sentry Session Replay機能の紹介 - Talentio Tech Blog

以下は、Datadog RUMをTalentioで動かしたときのイメージです。

オプション

初期時のsessionReplaySampleRateで、セッションリプレイ対象とするセッション比率を指定できます。これは、sessionSampleRateに対するパーセンテージを指定します。

例えば、sessionSampleRate を 60、sessionReplaySampleRate を 50 に設定すると、全体の60%のセッションがRUM対象となり、その50%である全体の30%がセッションリプレイ対象となります。

  window.DD_RUM.onReady(function() {
    window.DD_RUM.init({
      .....
      sessionSampleRate: 60,
      sessionReplaySampleRate: 50
    });

セッションリプレイでは、機密データや個人データを自動的にマスクする機能が提供されています。

defaultPrivacyLevelをmaskにすると、すべての HTML テキスト、ユーザー入力、画像、リンクがマスクされます。defaultPrivacyLevelをmask-user-inputにすると、入力フォームフィールドの内容がマスクされます。

  window.DD_RUM.onReady(function() {
    window.DD_RUM.init({
      .....
      defaultPrivacyLevel: 'mask',
    });

ヒートマップ

RUMには、セッションリプレイデータにユーザーのインタラクションを重ねて視覚化した、3 種類のヒートマップがあります。

Click map

特定のページのユーザーのクリックアクションを集計し、視覚的に表示します。

アクションごとのクリック数・比率を、数値で確認することもできます。

Top Element

特定のページで最もインタラクションがあった要素の上位 10 位までの順位を表示します。

Scroll map

特定のページのスクロールアクティビティの集計を視覚的に表示します。

ページの平均折り返し位置など、ユーザーがページをどこまでスクロールしたかを表示します。ページの平均折り返し位置や、指定した深さまでスクロールしたユーザーの数を確認できます。

フラストレーションシグナル

ユーザーがフラストレーションを感じる箇所をシグナルとして収集します。

レイジクリック
- 1秒間のスライディングウィンドウの中で、ユーザーが 3 回以上要素をクリックした場合。
- 反応が悪いので、同じ箇所何度もクリックしている状態。
デッドクリック
- ユーザーが静的な要素をクリックしても、そのページでは何のアクションも起こらないこと。
エラークリック
- JavaScript のエラーが発生する直前に、ユーザーがある要素をクリックした場合。

以下の例では、デッドクリックが発生していることがわかります。