5. ブラウザーアプリケーションの健全性を一目で確認

  • ランディングページで利用できるUIとオプションに慣れる
  • ページビュー/エラー、リクエスト/エラー、およびJavaScriptエラーを1つのビューで識別しする
    Web Vitalメトリクスと、ブラウザーアプリケーションに関連して発生したディテクターを確認する

1. Application Summary ダッシュボードの概要

1.1. ヘッダーバー

前のセクションで見たように、RUM Application Summary ダッシュボードは5つの主要セクションで構成されています
。 最初のセクションは選択ヘッダーで、 RUM-browser RUM-browser ブラウザーアイコンまたはアプリケーション名の前の > を使用してペインを折りたたむことができます。また、アプリケーション名(下の例では jmcj-store )のリンクをクリックすると、Application Overview ページにアクセスできます。

また、右側のトリプルドット trippleburger trippleburger メニューから、 Application OverviewApp Health ダッシュボード を開くことができます。

RUM-SummaryHeader RUM-SummaryHeader

まず View Dashboard リンクをクリックし Browser App Health ダッシュボード を開きます(別タブで開かれます)。 次に元のRUMタブに戻り Open Application Overview リンクか、アプリの名前をクリックして、Application Overview ダッシュボードを開きます。

Application OverviewBrowser App Health ダッシュボードを次のセクションで詳しく見ていきます。

2. Application Overview

RUM Application Overview ダッシュボードでは 一目で アプリケーションの状態の概要を確認できます。

2.1. Page Views / Network Requests / Errors

最初セクションに表示されている Page Views / ErrorsNetwork Requests and Errors チャートはアプリケーション内のリクエスト数と問題の傾向を示しています。 これは、Javascriptのエラーや、バックエンドサービスへのネットワーク呼び出しに失敗した可能性があります。

RUM-chart RUM-chart

上の例では、Networkチャートではネットワーク呼び出しに失敗していないことがわかりますが、Page Viewsチャートでは多くのページで何らかのエラーが発生していることが確認できます。このようなエラーは一般ユーザーからは見えないことが多いのですが、Web サイトのパフォーマンスに重大な影響を与える可能性があります。

チャート上にカーソルをホバーすると Page Views / Network Requests / Errors の件数を確認できます。

RUM-chart-clicked RUM-chart-clicked

2.2. JavaScript Errors

2番目のセクションでは、アプリケーションで発生したJavaScriptエラーの概要と、各エラーの件数が表示されます。 RUM-javascript RUM-javascript

上の例では、3種類のJavaScriptエラーがあることがわかります。1つは選択した時間帯に29回発生し、他の2つはそれぞれ12回発生しています。

エラーの一つをクリックすると、ポップアウトが開き、時系列でエラーの概要(下図)が表示されます。また、JavaScript エラーのスタックトレースが表示され、問題が発生した場所を知ることができます(詳細については、次のセクションで説明します)。

RUM-javascript-chart RUM-javascript-chart

2.3. Web Vitals

3番目のセクションでは、Googleがランキングシステムで使用する3つのメトリクスである重要な(Google)Web Vitalsを表示しており、エンドユーザーにとってのサイトの表示速度を非常によく表しています。

WEB-vitals WEB-vitals

ご覧の通り、当サイトは3つのメトリクスすべてで Good スコアを獲得し、良好な動作をしています。これらのメトリクスは、アプリケーションの変更がもたらす影響を特定し、サイトのパフォーマンスを向上させるために使用することができます。

Web Vitalsペインに表示されているメトリクスをクリックすると、対応する Tag Spotlight ダッシュボードに移動します。例えば Largest Contentful Paint (LCP) をクリックすると、以下のスクリーンショットのようなダッシュボードが表示され、このメトリクスのパフォーマンスに関するタイムラインとテーブルビューを見ることができます。これにより、OS やブラウザーのバージョンなど、より一般的な問題の傾向を把握することができます。

WEB-vitals-tag WEB-vitals-tag

2.4. Most Recent Detectors

4番目であり最後のセクションでは、アプリケーションでトリガーされたディテクターの概要を表示することにフォーカスしています。このスクリーンショット用にディテクターを作成しているため、皆さんのペインでは何も表示されていないはずです。次のセクションで実際にディテクターを追加し、トリガーされるようにします。

detectors detectors

下のスクリーンショットでは、 RUM Aggregated View Detector のクリティカルアラートと、選択した時間ウィンドウでこのアラートが何回トリガーされたかを示す件数が表示されています。アラートが表示されている場合は、アラートの名前(青いリンクで表示されている)をクリックすると、アラートの詳細を表示するアラート概要ページに移動します(注意:この操作を行うと、現在のページから離れることになります。)

alert alert


次のセクションに進む前に、RUM Application Summaryダッシュボードとその基礎となるチャートとダッシュボードを数分間試してみてください。