Datadog の RUM を導入してみる

こんにちは〜。

山ときどきエンジニアリング、ところによりクラブ。最近はスキー場のオープンを待ち続けている。
本日はエンジニアリング強めの anna@ae__b_ が書く予報でしょう。

🎄🎄この記事は、iCARE Dev Advent Calendar 2022 第1レーン の2日目です。🎄🎄

これはなに

• 著者は前職で Datadog で RUM に触れていたが導入には関わっていなかった
• これまで Datadog を使っていたシステムに RUM を導入する機会があったのでまとめてみる
• ついでに RUM でできることを調べてみる
• 今回はセッションリプレイの機能は対象外

Datadog の RUM とは？

• Datadog Real User Monitoring (RUM) を使用するとアプリケーションのクライアントサイドのパフォーマンスやユーザーの動きを視覚化できる
• どの画面を見ているのか、どのボタンを押下したのかなど、エラー検知だけでなくユーザビリティに繋げられるデータを取得できる

RUM の導入

• 2週間トライアルができる

• 画面: Datadog の左側のタブより UX Monitoring > RUM Applications > 右上の New Application を押下する

  • ※ UX Monitoring にフォーカスを当てるだけで OK
    

  • New Application
    

1. Set your application details
   • RUM を設定する画面で使う言語を選択する
   • 今回は JavaScript で設定
   • Create New Rum Application を押下する
2. Instrument your application
   • install 方法がいくつかあるが、今回は NPM で install
   • applicationId と clientToken が発行されたソースコードが生成される
   • このソースコードをアプリケーションに貼り付ける
   • package.json に @datadog/browser-rum を設定する
   • npm install をする
3. Verify your installation

   • 接続が完了する前
     

   • 接続が完了すると表示が変わり、セッションが見れるようになる
     

ハマりポイント

ソースコードの貼り付け箇所

• 画面を読み込む時に都度読まれる場所への追加が必要な様子
• 基本的には発行されたソースコードを貼り付けるだけで動く
  • 後述の必須項目を設定するだけでも動く
• それで動かないなら npm install に失敗しているかアプリケーションのソースコードの位置がおかしい

設定項目

• 公式ドキュメントを参考にした。
• 使用方法は筆者のイメージです

applicationId と clientToken の環境変数を設定

• RUM アプリケーション作成時に発行された applicationId と clientToken で RUM の取得ができてしまうため環境変数で設定したい
• AWS のパラメータストアに新しく環境変数を設定した
• 値が取得できなかったり有効ではない値が設定されていて RUM の init 処理が失敗した場合は、 console.error が出力されるがアプリケーションには問題ない
  • RUMのソースコードを見に行ったところテストも書かれており考慮されていた
  • ちなみにこの console.error を出力したくない場合はtelemetrySampleRateを設定するとよい。が、 RUM で発生したエラーは検出ができなくなる。

RUMを取得する環境

• RUM はセッション数に応じて金額が変わるため、不要な環境（ローカルや開発環境など）では RUM は取得したくない
• 方法その1: NODE_ENV を取得して本番環境の場合のみ init 処理を呼ぶ
• 方法その2: applicationId と clientToken が設定されている場合のみ init 処理を呼ぶ
• ソースコードの書き方は if 文で囲むしかない
  • Datadog の APM には enabled という設定が可能となっているため、true / false の変更でできる
  • RUMでは残念ながら見当たらなかった
  • あったらコメントください

必須項目

• applicationId , clientToken
  • RUM アプリケーション作成時に発行されたものを使用する
  • RUM アプリケーションごとに発行されるため複数のアプリケーションを作成し環境ごとで表示を分けることが可能
    • 例：本番と開発環境でそれぞれで RUM データを取得するなど
• site
  • Datadog のドメイン設定
  • Datadog そのものの管理ページを分けられ、ユーザーも発行が必要
  • 対応サイトは決まっている→参考

任意項目

RUM で描画するための項目

• env
  • NODE_ENV を設定すると RUM 画面でどの環境のログか分かる
• version
  • RUM アプリケーションの version 管理ができる
  • 後からセッションリプレイを追加したり項目を変更した時に表示されているログが変更前なのか後なのか判別するのに使える
• sampleRate
  • ユーザーのセッションのうち何割を取得するか決められる
  • セッション数に応じて課金されるため、一部だけ取得して料金を節約したい時などに使えるのではないか

APM Traces との接続

• Datadog APM Traces を使用している場合は連携させることができる
• 設定が必要な項目
  • service
    • APM Traces で使用している service と同じものである必要がある
  • allowedTracingOrigins
    • 対象のドメインを設定する
  • tracingSampleRate
    • sampleRate と同じイメージで、APM Traces のうち何割を取得するか決められる
    • たぶんこれも節約したい時

ユーザーのクリック情報をトラックする

• おそらく RUM で一番目玉の機能（だと思っている）
• ユーザーが押下したボタンの情報など、ユーザビリティを取得できる
  • 入力値は取得されない模様
• trackInteractions
  • ユーザーアクションを追跡する
  • 以下の全ての条件が満たされると作成される
    1. クリックに続くアクティビティ
    2. 新規ページを読み込みを開始しない（APIが走らない）
       • RUM ビューイベントとして作成される
    3. クリックアクションを名前として宣言している
       • init だけでは取得できない値も親要素に埋め込むことで取得できる
  • ちなみに入力値は取得されない模様
• trackFrustrations
  • ユーザーがフラストレーションを感じる瞬間を表示してくれる
  • 対象シグナルは3種類
    1. 1秒間で3回以上要素をクリック
    2. 静的要素をクリックしても何のアクションも起きない
    3. JavaScript のエラーが発生する直前に要素をクリックしていた
  • 以前使っていた時はこの機能知らなかったのでテンションあがった
    
• 上記2種類のトラック方法に対するセキュリティ
  • trackViewsManually
    • RUM ではデフォルトでビュー名をオーバーライドしてくれるため、 URL の一意の数値は?に変わる(ユーザー番号など)
    • 上記デフォルト機能に加えて、手動で非表示にしたい項目を設定することができる機能

ダッシュボード機能

• いつからか Datadog の RUM にはデフォルトでダッシュボードが作られるようになった
  • 以前までは自作でチマチマ作っていたのでめちゃくちゃありがたい
• 数種類あるが Performance Overview だけでもかなり見れる
  
• 複製すればカスタマイズも可能
• マジでこれだけでめちゃくちゃ価値がある

終わりに

• ユーザーのことを想像して喜ぶ機能を考えるのってやっぱり楽しいよね
• RUM はユーザビリティの向上にめちゃくちゃ効果的な情報を教えてくれる
• 何より導入の簡単さ、導入後の見やすさが素晴らしい
• セッションリプレイおよびその他機能を使いこなしていきたい
• あとは可観測性についてもっと勉強する