Digital Experience Monitoring：Grafana CloudのSession Replayとシンセティックチェックで、迅速な調査を行う

本番環境で問題が起きたとき、本当に知りたいことほど、メトリクスだけでは判断しにくいものです。誰が影響を受けたのか。ユーザーは実際に何を見たのか。そして、誰かを起こしてまで対応すべき問題なのか。こうした問いに答えるには、問題そのものとユーザーへの影響を、より広い視点で捉える必要があります。

そこで役立つのが、Grafana CloudのDigital Experience Monitoring（DEM）です。Frontend ObservabilityとSynthetic Monitoringを組み合わせることで、DEMは実ユーザーの体験とプロアクティブなテストを結び付けます。こうすることで、エンジニアリングチームは問題の範囲の把握から原因の調査、解決までを効率よく進められます。しかも、一連の作業はすべてGrafana Cloud内で完結するのです。

本記事では、Grafana CloudにおけるDEMの最新アップデートと、使い方を説明します。下の動画もあわせて確認してください。

Digital Experience Monitoringとは？

Grafana CloudのDigital Experience Monitoringは、実ユーザーのデータからプロアクティブなシンセティックチェックまで、ユーザーがウェブアプリケーションをどのように体験しているかを総合的に把握できる仕組みです。

DEMでできることは次のとおりです。

• 実ユーザーの可視化：バックエンドのメトリクスだけではわからない、ウェブアプリケーションでのユーザーの実際の体験を把握します。
• プロアクティブな検知：重要なユーザージャーニーを自動でチェックし、ユーザーより先に問題を発見します。
• エンドツーエンドの相関：フロントエンドのシグナルを、その背後にあるバックエンドのトレースにつなげます。
• 解決の迅速化：平均復旧時間を数時間から数分へと短縮します。

Session Replay：ユーザーが見た画面をそのまま確認する

Grafana Cloud Frontend ObservabilityのSession Replayを使うと、ユーザーがウェブアプリケーション内で見たものや行った操作を、映像として再現できます。ユーザーが実際に体験した内容を確認しながら、Core Web Vitals、ユーザーアクション、トレースといったリアルユーザーモニタリングのシグナルと突き合わせることもできます。バグの調査や根本原因の分析に役立つ、頼れる機能です。

Session Replayは、リアルユーザーモニタリングのデータを収集するGrafanaのオープンソースJavaScript計装ライブラリであるFaroを基盤としています。セットアップの手順を見ていきましょう。

ステップ1：FaroにReplay計装を追加する

まず、ウェブアプリケーションにFaro web SDKを追加します。次に、Faroを初期化する際、標準のFaro web計装と合わせてReplay計装を追加してください。

Copy

import { getWebInstrumentations, initializeFaro } from '@grafana/faro-web-sdk';
import { ReplayInstrumentation } from '@grafana/faro-instrumentation-replay';

initializeFaro({
  url: 'https://your-faro-endpoint.com',
  instrumentations: [
    // Standard Faro instrumentations: errors, web vitals, user actions, and more
    ...getWebInstrumentations(),
    // Enables session recording
    new ReplayInstrumentation(),
  ],
});

初期化の際、デフォルトの設定は「プライバシー最優先」になっています。マスキング、プライバシー、サンプリングのオプションは、必要に応じてさらに調整できます。たとえば、特定の入力タイプのマスクや、一定の割合のセッションだけを対象としたリプレイの記録も可能です。

ステップ2：セッションデータを生成する

ウェブアプリケーションに計装を追加したら、次は実際の動作を確認する番です。この例では、ピザの組み合わせを作れるデモ用のウェブアプリであるQuickPizzaを使います。ウェブサイト上でいくつかのボタンをクリックし、実際のユーザーと同じようにアプリを操作してみましょう。これらの操作はすべて記録され、Frontend Observabilityに送信されます。

ステップ3：セッションの録画を見つける

次に、Frontend ObservabilityアプリでSessionsを開き、下にスクロールして、セッションの録画を探します。

ステップ4：リプレイを確認する

セッションの一覧が表示されるので、リプレイしたいセッションを選択します。個人情報はクライアント側でマスクされるため、Grafana Cloudには送信されません。それでも、マウスの動きやDOMの操作ははっきりと追えます。セッションの録画を表示する方法は2つあります。セッションの詳細ページから直接開く方法と、緑色のボタンをクリックしてプレーヤーを新しいタブで開く方法です。録画と並べて、プレーヤーの状態と常に同期するユーザージャーニー全体を確認できるため、2つ目の方法をおすすめします。

リプレイプレーヤーの主な機能は次のとおりです。

• 再生コントロール：再生、一時停止、10秒の早送りと巻き戻し
• 速度の調整：0.25倍から最大16倍まで。長いセッションも素早く確認できます
• 非アクティブ時間のスキップ：操作のない部分を飛ばして、重要な部分に集中できます
• 共有ボタン：リプレイ内の特定の瞬間へのリンクをコピーします。問題が発生した正確な時点をチームメンバーに伝えられます

画面の横には、ユーザーとブラウザそれぞれで何が起きていたかを、タイムスタンプ付きで示すユーザージャーニーが表示されます。この画面からエラーも確認でき、エラーの箇所に直接ジャンプしたり、エラーで絞り込み・並べ替えをしたりすることも可能です。

ここからがSession Replayの最大の強みです。リプレイは既存のFaroテレメトリーと連携しているため、ダッシュボード上のフロントエンドエラーから該当セッションのリプレイに直接ジャンプし、エラーが発生した瞬間にユーザーが何をしていたかを正確に確認した上で、連携するトレースをさらに深く掘り下げることができます。

Frontend ObservabilityのSession Replayの詳細については、こちらのブログ記事と技術ドキュメントを参照してください。

Synthetic MonitoringとFrontend Observability：組み合わせることで効果を発揮

Grafana Cloud Synthetic Monitoringは、重要なユーザージャーニーに対して自動チェックを実行し、実際のユーザーが問題に気づく前に検知できるようにします。一方、Grafana Cloud Frontend Observabilityは、実ユーザーの体験をそのまま捉え、フロントエンドのパフォーマンスを計測し、改善につなげられるようにするものです。この2つは、Grafana CloudのDigital Experience Monitoringの基盤となり、ユーザーのデジタル体験をプロアクティブな視点と実環境の視点の両方から把握できます。

最近の改善により、問題の調査中にSynthetic MonitoringとFrontend Observabilityを行き来しやすくなりました。シンセティックチェックからフロントエンドの体験、さらにその背後にあるトレースまで、エンドツーエンドで相関できます。

Synthetic Monitoringのブラウザチェックが実行されるたびに、対応するFrontend Observabilityのセッションが自動的に作成されます。このセッションは、実際のユーザージャーニーを毎回同じ条件で再現した実行です。チェックの画面から、Frontend Observabilityのデータを補足情報としてその場で確認でき、その実行によって作成されたセッションに直接移動することも可能です。セッションに移動すると、セッションのリプレイ、ユーザージャーニー、トレースを確認できます。

シンセティックのブラウザチェックは、単なる成功・失敗の判定ではなくなります。すべての実行からフィードバックが得られるため、チェックが失敗したときも、何が起きたかを正確に確認できるのです。オンコール担当のエンジニアなら誰もが気になる、「この失敗は実際のユーザーに影響しているのか、影響を受けているのは何人なのか」など、次の疑問にも答えられるようになります。

失敗したチェックを調べてみる

Synthetic Monitoringで、この連携の動作を見てみましょう。QuickPizzaの典型的なユーザーフローを再現するブラウザチェックをすでに設定してあり、このチェックが失敗しているというアラートを受け取ったとします。

1. チェックのダッシュボードを開く：失敗しているチェックがすぐに確認できます。
2. 失敗した実行を見つける：下にあるタイムポイントエクスプローラーで、失敗したものを含む個々の実行を確認できます。その中から1つを選びましょう。
3. フロントエンドのセッションを表示する：下にスクロールすると、View Frontend Sessionというボタンがあります。ボタンを1クリックするだけで、まさにその実行のFrontend Observabilityセッションが開く、という流れです。

この画面には、調査に必要なものがすべてそろっています。チェックが実行したすべての操作をステップごとに映像で再現するセッションリプレイ、その実行のユーザー体験メトリクス、ユーザージャーニー全体、そしてその背後にあるトレースです。数回のクリックで、アラートから失敗した実行へ、そしてチェック中に何が起きたかを実際に確認するところまで進めました。

詳細はこちら

詳しくは、Digital Experience Monitoringソリューションページを参照してください。各ツールの詳細は、Frontend ObservabilityとSynthetic Monitoringの技術ドキュメントで確認できます。

Grafana Cloudは、Digital Experience Monitoringを始める最も手軽な方法です。月間10万回のテスト実行などを含む、充実した無料プランを用意しています。無料ではじめる