Splunk RUM

15 minutes  
ペルソナ

あなたはフロントエンドエンジニアまたはSREで、パフォーマンス問題の最初のトリアージを行うよう任されています。オンラインブティックアプリケーションに関する潜在的な顧客満足度の問題を調査するよう依頼されました。

すべての参加者のブラウザセッションから受信したテレメトリによって提供された実際のユーザーデータを調査します。目標は、パフォーマンスの悪かったブラウザ、モバイル、またはタブレットセッションを見つけて、トラブルシューティングプロセスを開始することです。

Last Modified 2025/04/30

5. Splunk RUMのサブセクション

1. RUMダッシュボード

Splunk Observability Cloud のメインメニューから、RUMをクリックします。RUM ホームページに到着します。このビューについては、先ほどの短い紹介ですでに説明しました。

複数のアプリ 複数のアプリ

演習
  • ドロップダウンが以下のように設定/選択されていることを確認して、ワークショップを選択してください:
    • 時間枠-15m に設定されていること。
    • 選択されているEnvironment[ワークショップ名]-workshop であること。
    • 選択されているApp[ワークショップ名]-store であること。
    • SourceAllに設定されていること。
  • 次に、Page Views / JavaScript Errorsチャートの上にある [ワークショップ名]-store をクリックします。
  • これにより、UX MetricsFront-end HealthBack-end HealthCustom Eventsごとにメトリクスを分類し、過去のメトリクス(デフォルトでは 1 時間)と比較する新しいダッシュボードビューが表示されます。

RUMダッシュボード RUMダッシュボード

  • UX Metrics: ページビュー、ページロード、Web バイタルメトリクス。
  • Front-end Health: JavaScript エラーとロングタスクの期間と数の内訳。
  • Back-end Health: ネットワークエラー、リクエスト、最初のバイトまでの時間。
  • Custom Events: Custom Events の RED メトリクス(レート、エラー、期間)。
演習
  • 各タブ(UX MetricsFront-end HealthBack-end HealthCustom Events)をクリックしてデータを調べます。

「Custom Events」タブのチャートを調べると、どのチャートレイテンシースパイクを明確に示していますか?

それは 「Custom Event Latency」 チャートです

Last Modified 2025/05/02

2. Tag Spotlight

演習
  • Custom Eventsタブを選択して、そのタブにいることを確認します。

  • Custom Event Latencyチャートを見てください。ここに表示されているメトリクスはアプリケーションのレイテンシーを示しています。横の比較メトリクスは、1 時間前(上部のフィルターバーで選択されています)と比較したレイテンシーを示しています。

  • チャートタイトルの下にあるすべて表示リンクをクリックします。

RUM Tag Spotlight RUM Tag Spotlight

このダッシュボードビューでは、RUM データに関連付けられたすべてのタグが表示されます。タグはデータを識別するために使用されるキーと値のペアです。この場合、タグは OpenTelemetry 計装によって自動的に生成されます。タグはデータをフィルタリングし、チャートやテーブルを作成するために使用されます。Tag Spotlight ビューでは、ユーザーセッションを詳しく調べることができます。

演習
  • 時間枠を過去 1 時間に変更します。
  • Add filtersをクリックし、OS Versionを選択し、!=をクリックしてSyntheticsRUMLoadGenを選択し、フィルターを適用ボタンをクリックします。
  • Custom Events Nameチャートを見つけ、リスト内のPlaceOrderを見つけてクリックし、Add to filterを選択します。
  • 上部のグラフに大きなスパイクがあることに注目してください。
  • User Sessionタブをクリックします。
  • Durationの見出しを 2 回クリックして、セッションを期間で並べ替えます(最も長いものが上部に表示されます)。
  • テーブルの上にあるをクリックし、追加の列のリストからSf Geo Cityを選択し、保存をクリックします。

これで、最も長い期間の降順でソートされたユーザーセッションテーブルができました。このテーブルには、サイトでショッピングしたすべてのユーザーの都市も含まれています。OS バージョン、ブラウザバージョンなど、さらにフィルターを適用してデータを絞り込むこともできます。

RUMTag Spotlight RUMTag Spotlight

Last Modified 2025/05/02

3. セッションリプレイ

セッション

セッションは、ユーザーがアプリケーションと対話する際に実行するアクションに対応するトレースの集まりです。デフォルトでは、セッションはセッションでキャプチャされた最後のイベントから 15 分経過するまで続きます。最大セッション時間は 4 時間です。

演習
  • User Sessionテーブルで、最も長いDuration(20 秒以上)の上位のSession IDをクリックすると、RUM セッションビューに移動します。

RUMセッション RUMセッション

演習
  • RUM セッションリプレイ Replayボタンをクリックします。RUM セッションリプレイでは、ユーザーセッションを再生して確認することができます。これはユーザーが体験した内容を正確に確認するための優れた方法です。
  • ボタンをクリックしてリプレイを開始します。

RUM セッションリプレイでは情報を編集することができます。デフォルトではテキストが編集されます。画像も編集することができます(このワークショップ例では実施済み)。これは、機密情報が含まれるセッションを再生する場合に役立ちます。また、再生速度を変更したり、再生を一時停止したりすることもできます。

ヒント

セッションを再生する際、マウスの動きがキャプチャされていることに注目してください。これは、ユーザーがどこに注意を向けているかを確認するのに役立ちます。

Last Modified 2025/05/02

4. ユーザーセッション

演習
  • 右上隅のXをクリックして、RUM セッションリプレイを閉じます。
  • スパンの長さに注目してください。これは注文を完了するのにかかった時間で、良くありません!
  • ページを下にスクロールすると、タグメタデータ(Tag Spotlight で使用されるもの)が表示されます。タグの後に、ウォーターフォールが表示され、読み込まれたページオブジェクト(HTML、CSS、画像、JavaScript など)が表示されます。
  • ページを下にスクロールし続けて、青いAPMリンク(URL の末尾に/cart/checkoutがあるもの)まで移動し、その上にカーソルを置きます。

RUMセッション RUMセッション

これにより APM パフォーマンスサマリーが表示されます。このエンドツーエンド(RUM から APM)のビューは、問題のトラブルシューティングを行う際に非常に便利です。

演習
  • 上のスクリーンショットのように、paymentservicecheckoutserviceがエラー状態にあることがわかります。
  • ワークフロー名の下にあるfront-end:/cart/checkoutをクリックすると、APM サービスマップが表示されます。

RUMからAPMへ RUMからAPMへ