はじめに
はじめまして、スリーシェイクの Sreake 事業部インターン生の大島康暉です。Sreake 事業部は SRE 関連技術に強みを持つエンジニアによるコンサルテーションサービスを提供する事業部であり、今回 SRE の技術の調査と研究を行う目的で Datadog の RUM について調査を行いました。本記事ではその調査結果をまとめたいと思います。
TL;DR
- Datadog RUM はアプリケーションのフロントエンドをリアルタイムで監視するサービスです。
- オープンプラットフォームのため、JavaScript をはじめとしたさまざまなプラットフォームへ対応しており、短時間の作業で導入が可能です。
- フロントエンドのパフォーマンスデータやユーザーの情報を収集することができます。
- 記録されたデータはダッシュボードで一括閲覧が可能でです。また RUM のデフォルトのダッシュボードだけでなく、Datadog のカスタムダッシュボードも利用できます。
Datadog RUM とは？
Datadog RUM (Real User Monitoring) はアプリケーションをリアルタイムで監視し、フロントエンドを中心としたデータを収集するサービスです。Datadog APM に比べてページ読み込みのパフォーマンスやデッドクリックのようなユーザーが実際に利用する際に重要となる要素を監視することに特化しています。
具体的に下記の特徴が挙げられます。
- フロントエンドのリアルタイムなパフォーマンス監視
- UX の可視化
- オープンプラットフォーム
- トレース機能
フロントエンドのリアルタイムなパフォーマンス監視
Datadog RUM は収集したデータの反映が即座に行われるため、秒単位でユーザーの体験を分析し、問題の迅速な特定やユーザーからの反応を素早く可視化する事ができます。
UX の可視化
Datadog RUM ではサイトを利用するユーザーの体験を監視するために、コア Web バイタルを使ってサイトのユーザーエクスペリエンスを数値化することができます。コア Web バイタルはページの負荷パフォーマンス、ユーザーの操作に対する応答時間、コンテンツの安定的な表示などから算出されています。
オープンプラットフォーム
Datadog RUM はオープンプラットフォームのため、様々な環境に対応しています。
具体的には React や Vue.js 、Flutter などのフレームワークや iOS, Android などのプラットフォームに対応しているため、サービス全体を Datadog 上で監視することができます。
トレース機能
Datadog RUM にはアプリケーションのトレース機能を備えており、Datadog RUM で動作を動画として記録することができます。この機能によって問題発生時に原因究明と対応を素早く行うことができます。
これらの特徴から Datadog RUM はフロントエンドのパフォーマンスを監視することやユーザー体験を改善しサービスの満足度を向上させるなどの用途に適していると考えられます。
Datadog RUM のセットアップ
ここからは実際に Datadog RUM のセットアップの流れを説明します。詳細は公式ドキュメントに書かれているため、詳しい情報はそちらを参照してください。
今回は TypeScript のプロジェクトへ導入する手順になっているので、他プラットフォームの場合は適宜読み替えながら参考にしていただけると幸いです。
おおまかな手順とはしてはプロダクトにパッケージをインストールする作業と Datadog 上に RUM アプリケーションを作成する2つになります。
パッケージのインストール
npm または yarn で簡単にインストールすることができます。
npm の場合
npm install @datadog/browser-rumyarn の場合
yarn add @datadog/browser-rumRUM アプリケーションの作成
- RUM のページから
New Applicationを選択し、新規作成画面へ - Application type を JavaScript、ApplicationName に任意の名前を入力して
Create New RUM Applicationをクリック
- 生成されたコードをクライアント側に貼り付け (React の場合 app.tsx など)、クライアントを再起動する。この時必要に応じて
applicationIdやclientTokenを環境変数に変更する
- クライアントへ再度アクセスし Datadog 上でデータが確認できればセットアップ完了！
Datadog RUM を使ってみる
Datadog RUM のセットアップが終わりデータの収集が始まると、サイドメニューの UX Monitoring > RUM Application で収集したデータを閲覧することができます。
収集できる値について
Datadog RUM では以下のようなデータを収集する事ができます。
クライアント情報
アクセスしたクライアント関する情報を取得できます。
- デバイス情報
- OS 情報
- 位置情報
- アクセスする前に滞在していたページのURL情報
セッション
アプリケーションで使用されるセッションの情報が確認できます。
- セッション数
- セッションの平均時間
- セッションのアクティブ情報
- セッションのエラー数
リソース
使用されるリソースの属性情報やロード時のネットワークのタイミングデータなどが収集できます。
- リソースのタイプ (css, js, image など)
- リソースサイズ
- リソースのロードにかかった全時間
- リソースサーバーとの接続確率の所要時間
フラストレーションシグナル
フラストレーションシグナルではユーザーがフラストレーションを感じる瞬間のデッドクリック、レイジクリック、エラークリックの3種類のシグナルを収集し、解析する事ができます。
- 1 つのセッションに関連するすべてのフラストレーションシグナルの数
- 1 つのビューに関連するすべてのフラストレーションシグナルの数
- RUM ブラウザ SDK で検出されたデッドクリック
- RUM ブラウザ SDK で検出されたレイジクリック
- RUM ブラウザ SDK で検出されたエラークリック
ここで紹介したもの以外にもさまざまな情報を収集する事ができるため、より詳しい情報を知りたい方は公式ドキュメントを参照することをおすすめします。
Dashboard のカスタム
RUM Application の Overview 画面でも一通り閲覧したい情報は確認する事ができるのですが、カスタマイズして自分好みのダッシュボードにすることもできます。
- サイドメニューの
DashboardsからNew Dashboardを選択し新規に作成します。 - 新規作成するとこのような画面に遷移し、
Add Widgetsから好みのウェジットを選択し、構築していく事ができます。
Dashboards には powerpack がいくつか用意されており、それらを組み合わせてダッシュボードを構築することもできます。
運用していく際、初めは powerpack をベースにしながら利用し、徐々に使いやすいよう必要な情報ごとにカスタマイズしていく方法がおすすめです。
エラー検知の運用例
Datadog RUM を使った運用例としてブラウザからのエラーを一定値以上検知した場合に特定の場所へ通知するといったケースが考えられます。
今回は下記の条件での簡単な構築例を紹介します。
- ブラウザからのエラー数が 5件以上検出された場合は Warning、10件を超えた場合は Alert として通知する
- 通知方法は設定された Slack チャンネルへ送信するこのようなケースでは Datadog Monitors を利用することでアプリケーションが特定の条件になった際に通知を送る事ができます。
ここからは以下の準備が完了した状態として進めます。
- Datadog の Slack Integration のアクティベート
- Slack に Datadog アプリを導入し、アカウント連携を完了させる- RUM のアプリケーション画面から
Session & Replayのタブへ移動し、クエリでブラウザからのエラーをフィルタリングする。 Moreを押下後、Create Monitorを選択する。- 画面に従いながらアラート範囲の設定と送信メッセージを設定し、完了。
詳しい構築方法について公式ドキュメントで詳細に解説されているのでそちらをご覧ください。
構築が完了すると Datadog Monitors の画面から詳細を確認する事ができるようになりました。
実際にブラウザからエラーを 5件以上 Datadog RUM へ送信したところ、しっかりと検知して Slack へ通知する事ができました。
このようなケースだけでなく、Datadog Monitors の通知トリガーは柔軟に設定が可能で工夫するとエラー率や閲覧数の通知だけでなく自社サービスの売り上げを週ごとに差分で通知するといったビジネス特有の要素へ転用することもできます。
コストについて
最後に Datadog RUM のコストについてですが、基本的には年間払いの場合 1,000 セッションあたり $1.5 で利用でき、セッションリプレイ機能等を利用したい場合は $1.8 ほどかかるようです。無料トライアルで 14日間は利用する事ができるので一度お試ししてから検討してみることをおすすめします。
まとめ
個人的な感想は1時間弱でセットアップが完了しデータの収集を始める事ができる手軽さには驚きました。また RUM が対応しているプラットフォームも多く、サーバーサイド側の監視や通知システムも Datadog の別サービスを利用することで対応でき、プロダクト全体を一括管理できるのは強みでありとても魅力的に感じました。ドキュメントもわかりやすく読みやすかったので今後も Datadog 周りのサービスについて調べてみたいと思います。
ここまでお読みいただきありがとうございました。
