JS エラー診断 - Application Real-Time Monitoring Service - Alibaba Cloud ドキュメントセンター

Application Real-Time Monitoring Service (ARMS) のブラウザ監視モジュールは、JavaScript (JS) エラー診断機能を提供します。JS エラーの基本情報と分布を確認し、ユーザーの行動をバックトラックできます。この機能は、エラーを特定して修正するのに役立ちます。

ポータル

ARMS console にログインします。左側のナビゲーションペインで、ブラウザ監視 > Browser Monitoring を選択します。
ブラウザ監視 ページで、上部のナビゲーションバーでリージョンを選択し、管理するアプリケーションの名前をクリックします。
表示されるページで、左側のナビゲーションペインの アプリケーション > JS エラー診断 を選択します。
JS エラー診断 ページで、右上隅に必要な期間を設定できます。

アプリケーションのエラー概要の表示

エラー概要 セクションには、選択した期間内の JS エラーの統計と傾向が表示されます。これには、次のメトリックが含まれます。

エラー: 選択した期間内に発生した JS エラーの総数。
JS エラー率: 選択した期間内の JS エラーが発生したページビュー (PV) の総 PV に対する割合。
影響を受けるユーザー: JS エラーの影響を受けるユーザーの数と割合。

エラー概要 セクションで、次の操作を実行します。

カーブの上にポインターを置きます。カーブの変曲点に対応する時点でのエラー数、エラー率、および影響を受けるユーザー数がフローティング表示されます。
カーブの変曲点の上にポインターを置きます。ポインターが手の形に変わったら、変曲点をクリックします。例外インサイト ダイアログボックスが表示されます。詳細については、例外インサイトの表示を参照してください。
カーブセクションで、マウスの左ボタンを押したまま、マウスをドラッグして領域を選択し、カーブの選択した部分を拡大して表示します。右上隅の ズームのリセット をクリックして、ビューを復元します。

説明

JS エラー診断 ページでは、エラー概要 セクションにアプリケーション固有のエラー概要がデフォルトで表示されます。例外インサイト ダイアログボックスの エラー率でランク付けされたページ タブまたは ページエラー率トップ 5 タブで、分析をクリックします。対応するタブの概要情報が表示されます。

例外インサイトの表示

例外インサイト ダイアログボックスには、特定の時点での JS エラーに関する情報が表示されます。これには、次のメトリックが含まれます。

エラー: 特定の時点での JS エラーの総数。
JS エラー率: 特定の時点での JS エラーが発生した PV の総 PV に対する割合。
影響を受けるユーザー: JS エラーの影響を受けるユーザーの数と割合。
頻度の高いエラートップ 5: 特定の時点で最も頻繁に発生する上位 5 件の JS エラー。ARMS によってキャプチャされた JS エラーに関する情報、エラー数、および影響を受けるユーザー数が含まれます。
ページエラー率トップ 5: 特定の時点で JS エラー率が最も高い上位 5 つのページ。JS エラーが発生したページの名前、ページの JS エラー率、および PV 数が含まれます。

例外インサイト ダイアログボックスでは、次の操作を実行できます。

頻度の高いエラートップ 5 タブをクリックし、操作列の診断をクリックします。JS エラーの詳細 ページが表示されます。詳細については、エラー詳細の表示を参照してください。
ページエラー率トップ 5 タブをクリックします。表示されるタブで、表示するページに対応する操作列の分析をクリックします。ページのエラー概要が表示されます。

エラー率でランク付けされたページの表示

エラー率でランク付けされたページ タブでは、選択した期間内の JS エラー率によってページが降順にランク付けされます。これには、次のメトリックが含まれます。

ページ: JS エラーが発生したページ。
エラー率: ページで JS エラーが発生した PV の選択した期間内の総 PV に対する割合。
ページビュー: ページの表示回数。

操作列の分析をクリックします。ページのエラー概要が表示されます。

頻度の高いエラーの表示

頻度の高いエラー タブでは、選択した期間内の発生回数によって JS エラーが降順にランク付けされます。これには、次のメトリックが含まれます。

エラー情報: ARMS によってキャプチャされた JS エラー情報。
ページ: JS エラーが発生したページ。
エラー: JS エラーの発生回数。
影響を受けるユーザー: JS エラーの影響を受けるユーザーの数と割合。

操作列の診断をクリックして、エラーの詳細 タブに移動します。詳細については、エラー詳細の表示を参照してください。

説明

JS エラー診断 ページでは、頻度の高いエラー タブにアプリケーション固有の JS エラーがデフォルトで表示されます。例外インサイト ダイアログボックスの エラー率でランク付けされたページ タブまたは ページエラー率トップ 5 タブで、分析をクリックします。対応するページの JS エラーに関する情報が表示されます。

エラー詳細の表示

エラーの詳細 タブには、次の情報が表示されます。

概要
- 名前
- タイプ
- 日付: JS エラーが検出された時刻。
- デバイス
- OS
- ブラウザ
- IP
- 接続タイプ
- リージョン
- 行
- 列
- URL
- ファイル: JS エラーが発生したファイルのパス。
- アプリバージョン
スタック情報: JS エラーの場所に関する情報。
ユーザー行動トレース: エラーをバックトラックするために使用されるユーザー行動トレース。

エラーの詳細 タブでは、次の操作を実行できます。

JS エラーの正確な場所を指定するには、スタック情報 セクションのスタックの左側にある三角形のアイコンをクリックして、行を表示します。ソースマップの選択 をクリックします。ソースマップファイル ダイアログボックスで、既存のソースマップファイルを選択するか、新しいソースマップファイルをアップロードし、OK をクリックします。
ARMS はソースマップファイルを使用して、JS エラーの正確な場所を取得します。
ユーザー行動トレースを表示するには、ユーザー行動のバックトラックセクションに移動します。
JS エラーの分布を表示するには、エラービュー タブをクリックします。

ユーザー行動のバックトラック

エラーの詳細 タブの ユーザー行動トレース セクションには、エラーをバックトラックするのに役立つユーザー行動トレースが表示されます。

Section Behavior

エラー分布の表示

JS エラー診断ページの エラービュー タブには、特定の JS エラーの分布が表示されます。これには、次のメトリックが含まれます。

時間ビュー: このセクションには、ページ固有のエラー分布のみが表示されます。
ブラウザビュー
OS ビュー
デバイスビュー
バージョンビュー
地理的ビュー: 統計は、[中国ビュー] タブでは省、市、または自治区別に収集され、[世界ビュー] タブでは国または地域別に収集されます。

エラービュー タブでは、次の操作を実行できます。

時間ビュー セクションで、ポインターを分布マップの上に移動して、エラー数を表示します。
ブラウザビュー、OS ビュー、デバイスビュー、および バージョンビュー セクションで、ポインターを分布マップの上に移動して、エラーの数と割合を表示します。
地理的ビュー セクションの 中国ビュー タブまたは 世界ビュー タブで、右側の表の エラー 列名の横にある矢印をクリックして、昇順と降順を切り替えます。

FAQ

ユーザー行動のバックトラックを有効または無効にするにはどうすればよいですか?
デフォルトでは、この機能は有効になっています。この機能を無効にするには、config に behavior: false SDK 構成項目を追加します。SDK 構成項目の詳細については、SDK リファレンスを参照してください。
ユーザー行動のバックトラックを有効にした後、console.log に出力された情報に基づいて、ソースコードではなく ARMS SDK コード bl.js のエラーが特定されます。この問題を解決するにはどうすればよいですか?
その理由は、ARMS が console オブジェクトの log を書き換えて、ブラウザコンソールによって出力されたコンテンツを監視するためです。解決策:
- 方法 1 (推奨): Chrome ブラウザのブラックボックス化を設定します。
  1. Chrome ブラウザを開き、Ctrl+Shift+I を押してデベロッパーツールパネルにアクセスし、[設定] アイコンをクリックします。
  2. 設定パネルの左側のナビゲーションペインで、ブラックボックス化 をクリックします。表示されるページで、パターンの追加 をクリックします。パターン フィールドに、/bl. *\.js$ と入力します。次に、追加をクリックします。
- 方法 2: behavior: false SDK 構成項目を使用して、ユーザー行動のバックトラックを無効にします。
```
<script>
    ! (function ( c , b, d, a ) {
        c [a] || ( c[a] = {});
        c [a].config = {
            pid: "xxxxx",
            imgUrl: "https://arms-retcode.aliyuncs.com/r.png?",
            sendResource: true,
            enableLinkTrace: true,
            behavior: false // ユーザー行動のバックトラックを無効にする
        };
        with(b) with(body) with(insertBefore(createElement("script"), firstChild)) setAttribute("crossorigin", "", src = d)
    })(window, document, "https://retcode.alicdn.com/retcode/bl.js", "__bl");
</script>
```
上記の処理の後、console.log に出力された情報に基づいて、ソースコードのエラーを特定できます。