JavaScript エラーダッシュボード

JavaScript エラーダッシュボードは、ブラウザアプリケーションで発生した JavaScript エラーに関する詳細情報をキャプチャします。この詳細なデータを使用して、エラーの重大度レベルを判断し、ビジネスへの影響に従ってエラーに対処できます。

JavaScript エラーダッシュボードでは、次のことができます。

• 選択した期間内にブラウザアプリで発生したすべての JavaScript エラーを表示します。
• 単一のエラーインスタンスとその影響にドリルダウンします。
• エラーインスタンスと詳細をタイムスタンプとページ名別に表示します。
• マップとファイルをアップロードして、ソースコードのエラーをトラブルシューティングします。

要　件

SaaS コントローラ 22.2.0 以上が必要です。

JavaScript エラーダッシュボードは、次の SaaS リージョンでサポートされています。

JavaScript エラーダッシュボード

コントローラ UI で JavaScript エラーダッシュボードにアクセスするには、次の手順を実行します。

1. [User Experience ] に移動してブラウザアプリを選択します。 
2. 左側のパネルで、[JavaScript Errors] をクリックします。

JavaScript エラーダッシュボードには、時間範囲内のブラウザアプリのすべての JavaScript エラーが表示されます。 

[Trend ] ウィジェットには、時間枠内のエラー数とタイムスタンプが表示されます。時間枠を比較して、時間の経過とともに特定のエラーが多かれ少なかれ発生しているかどうかを確認できます。 をクリックして時間枠を比較します。

個々のエラーメッセージの一覧表で、エラーメッセージをダブルクリックすると、1 つのエラーインスタンスにドリルダウンできます。これにより、JavaScript エラーの概要ビューが表示されます。

エラーの概要

JavaScript エラーダッシュボードからエラーメッセージをクリックすると、次のメトリックを表示する [Summary ] ページに移動します。

• Impacted Pageviews：エラーの影響を受けたページビュー（ブラウザアプリの Web ページのインスタンス）の数
• Error instances：すべての Web ページにわたるエラーインスタンスの数
• % of total error instances：1 つの特定のエラーを（すべての Web ページにわたる）エラーの総数で割った値
• Errors per minute：この特定のエラーが 1 分あたりに発生した回数
• First occurrence：最初のエラー発生のタイムスタンプ

[Trend ] ウィジェットには、時間枠内のエラー数とタイムスタンプが表示されます。時間枠を比較して、時間の経過とともに特定のエラーが多かれ少なかれ発生しているかどうかを確認できます。[Trends ] ウィジェットで をクリックして、時間枠を比較します。

エラーインスタンス

個々のエラーを見ると、[Instances ] ページにはすべてのエラーの詳細がリストされます。

エラーメッセージを展開してスタックフレームを表示します。スタックフレームをクリックして、エンドユーザーデバイスの詳細やスクリプトの発信元などのエラープロパティを表示します。

エラーProperties セクションで、ソースマッピングまでスクロールダウンし、ソースマップとソースファイルをアップロードして、ソースコード内でエラーが発生した場所を特定します。 

ソースマッピング

エラーのトラブルシューティングを行うときは、JavaScript コードのどこでエラーが発生したかを正確に把握しておくと役立ちます。アプリケーションのソースマップとソースファイルをアップロードして、エラーの正確な場所を見つけることができます。

[Instances] ビューで、エラーの発生元のスクリプトを展開すると、ソースマップとソースファイルをアップロードしてエラーをさらにトラブルシューティングするオプションがあります。マップとファイルをアップロードすると、HTML スニペットボックスにファイルのソースコードが入力され、ソースコード内のエラーが発生した場所が正確に強調表示されます。

ソースマップとソースファイルをアップロードするには、次の手順を実行します。

1. エラーメッセージを展開します。
2. スタックフレームをクリックします。
3. [Properties] セクションで、[Source Mapping] まで下にスクロールします。

4. ソースマップとソースファイルを JSON 形式でアップロードします。 

ソースマップとソースファイルがアップロードされると、HTML スニペットボックスに、エラーが発生した箇所が強調表示された JavaScript が表示されます。これらの詳細を使用してエラーを修正できます。 

ソースマップとソースファイルのアップロードについて

• ソースマップとソースファイルのアップロードには、3 つのシナリオが考えられます。方法は以下のとおりです。

  • • ソースマップファイルのみをアップロードします（ソースマップファイルにソースファイルも含まれている場合）。
    • 最初にソースマップファイルをアップロードしてから、ソースファイルをアップロードします。
      • 1 つ以上のソースファイルをアップロードすることを選択できます。 
      • ソースマップファイルがアップロードされると、そのソースマップファイルに関連付けられているソースファイルのリストが UI に表示されます。
    • ソースマップファイルなしでソースファイルをアップロードします。 
      • ソースファイルをアップロードした後にソースマップファイルをアップロードすると、アップロードされたソースファイルは自動的に削除されます。
• ソースマップとソースファイルに許可される最大サイズは 10 MB です。
• 新しいソースファイルまたはソースマップファイルをアップロードすると、アップロードされた古いファイルは削除/上書きされます。
• 同じソースマップを共有するソースファイルには、異なる名前を付けることをお勧めします。ソースファイルが異なるパスにある場合でも、最初のソースファイルの名前が  /path/to/myBrowserApp.js  で 2 番目のソースファイルの名前が  /different/path/to/myBrowserApp.js の場合、最初のソースファイル  /path/to/myBrowserApp.js をアップロードし、後で 2 番目のソースファイル  /different/path/to/myBrowserApp.js をアップロードすると、スタックが最初のソースファイルに関連付けられている場合は、最初のソースファイルを再度アップロードする必要があります。これは、ソースファイルがファイル名を識別子として使用して永続化されるためです。

（オプション）アプリケーションのリリース ID を追加する

SourceMapping 機能を使用する前に、アプリケーションにリリース名、バージョン、キーなどのアプリケーションのリリース情報を追加できます。エラーが発生すると、JavaScript エージェントはエラー情報とリリース ID を含むビーコンを送信します。エラーをトラブルシューティングするためにソースマップとソースファイルをアップロードすると、リリース ID が一致し、エラーの原因となったコードの正確な行が強調表示されます。リリース ID を構成するには、「Add Application Release Details」を参照してください。