コンソールでの JS エラー診断方法 - Application Real-Time Monitoring Service

ARMS ブラウザ監視の JS エラー診断機能は、エラーの分布を表示し、ユーザーの動作をトレースすることで、エラーの原因を迅速に特定するのに役立ちます。

機能へのアクセス

ARMS コンソールにログインします。左側のナビゲーションウィンドウで、ブラウザ監視 > ブラウザ監視 を選択します。
ブラウザ監視 ページで、上部のナビゲーションバーからリージョンを選択し、管理対象のアプリケーション名をクリックします。
左側のナビゲーションウィンドウで、アプリケーション > JS エラー診断 を選択します。

JS エラー診断 ページの右上隅で、時間範囲を選択できます。

エラー概要

エラーの概要 セクションには、選択した時間範囲内の JS エラーに関する主要な統計情報と傾向が表示されます。表示されるメトリックは以下のとおりです。

エラーの数：選択した時間範囲内で発生した JS エラーの総数。
JS エラー率：選択した時間範囲内で、エラーが発生したページビュー数が全ページビュー数に占める割合。
影響を受けるユーザー数：JS エラーの影響を受けたユーザー数およびその割合。

エラーの概要 セクションでは、以下の操作が可能です。

チャート上にカーソルを合わせると、その時点におけるエラー数、エラー率、影響を受けたユーザー数を示すツールチップが表示されます。
チャート上のデータポイントにカーソルを合わせてポインターが手のアイコンになったら、そのデータポイントをクリックして 異常の考察 ダイアログボックスを開きます。詳細については、「例外インサイトの表示」をご参照ください。
チャート上の任意の区間をクリックしてドラッグすると、特定の時間枠にズームインできます。元の表示に戻すには、右上隅の ズームのリセット をクリックします。

説明

JS エラー診断 ページでは、エラーの概要 エリアには、デフォルトでアプリケーションレベルの概要情報が表示されます。ページエラー率ランキング エリアの ページエラー率トップ 5 タブ、または 異常の考察 ダイアログボックスで分析をクリックすると、該当ページの概要情報が表示されます。

例外インサイト

異常の考察 ダイアログボックスには、特定時点における JS エラーの詳細情報が表示されます。表示されるメトリックは以下のとおりです。

エラーの数：該当時点における JS エラーの総数。
JS エラー率：該当時点における、エラーが発生したページビュー数が全ページビュー数に占める割合。
影響を受けるユーザー数：JS エラーの影響を受けたユーザー数およびその割合。
High frequency error Top 5：該当時点において最も多く発生した上位 5 件の JS エラー。ARMS がキャプチャしたエラーメッセージ、発生回数、影響を受けたユーザー数が含まれます。
ページエラー率トップ 5：該当時点において JS エラー率が最も高い上位 5 ページ。ページ名、ページの JS エラー率、ページビュー数が含まれます。

異常の考察 ダイアログボックスでは、以下の操作が可能です。

High frequency error Top 5 タブをクリックします。操作列で診断をクリックすると、エラーの詳細 ページに移動します。詳細については、「エラー詳細の表示」をご参照ください。
ページエラー率トップ 5 タブをクリックします。対象ページの操作列で分析をクリックすると、そのページのエラー概要を表示できます。

エラー率順ページランキング

ページエラー率ランキング タブには、選択した時間範囲内で JS エラーが発生したページが、JS エラー率の降順で一覧表示されます。一覧に含まれるメトリックは以下のとおりです。

ページ：JS エラーが発生したページ。
エラー率：選択した時間範囲内で、該当ページの全ページビューのうちエラーが含まれていた割合。
Views：該当ページのページビュー数。

操作列で分析をクリックすると、該当ページのエラー概要を表示できます。

頻発エラー

高頻度エラー タブには、選択した時間範囲内で発生した JS エラーが、発生回数の降順で一覧表示されます。一覧に含まれるメトリックは以下のとおりです。

エラーメッセージ：ARMS がキャプチャした JS エラーメッセージ。
ページ：JS エラーが発生したページ。
エラーの数：該当 JS エラーの発生回数。
影響を受けるユーザー数：該当 JS エラーの影響を受けたユーザー数およびその割合。

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

説明

JS エラー診断 ページでは、高頻度エラー タブには、デフォルトでアプリケーションレベルの JS エラーが表示されます。ページエラー率ランキング エリア、または 異常の考察 ダイアログボックスの ページエラー率トップ 5 タブで分析をクリックすると、該当ページの JS エラーが表示されます。

エラー詳細

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

概要情報
- 名前
- タイプ
- 時間（JS エラーが検出された時刻）
- デバイス
- OS
- ブラウザ
- IP
- ネットワーク方式
- Region
- 行
- Column
- URL
- オブジェクト（JS エラーが発生したファイルのパス）
- アプリケーションバージョン番号
スタック情報：エラーに至るまでの関数呼び出しのシーケンス。
ユーザー行動のバックトラッキング：エラーを再現するためのユーザー操作のトレース。

エラーの詳細 タブでは、以下の操作が可能です。

JS エラーの正確な位置を特定するには、スタック情報 セクションのエントリを展開し、ソースマップの選択 をクリックします。ソースマップファイル ダイアログボックスで、既存のソースマップを選択するか、新しいソースマップをアップロードして、確定する をクリックします。

その後、ARMS はソースマップを使用して、難読化されたコードを元のソースコードに関連付け、エラーの正確な位置を明らかにします。
ユーザーの操作履歴を表示するには、「ユーザー動作トレース」セクションをご参照ください。
エラーの分布を表示するには、Error Distribution タブをクリックします。

ユーザー動作トレース

エラーの詳細 タブの ユーザー行動のバックトラッキング セクションには、エラーのコンテキストを再現するためのユーザーの操作履歴が表示されます。

スタックトレース セクションには、Error Request failed with status code 504 のような具体的なエラーメッセージと、詳細な呼び出しスタックが表示されます。動作ログには、API リクエスト、クリックイベント、ページナビゲーション などのイベントタイプが時系列で記録されています。セッションの表示 をクリックすると、セッション全体を確認できます。

エラー分布

JS エラー診断ページの Error Distribution タブには、特定の JS エラーが以下のディメンションごとにどのように分布しているかが表示されます。

時間分布：ページレベルのエラー分布でのみサポートされます。
ブラウザーの分布
OS の分布
デバイスの分布
バージョンの分布
Geographical View：中国ビューでは省・直轄市・自治区単位で、ワールドビューでは国・地域単位で集計されます。

Error Distribution タブでは、以下の操作が可能です。

時間分布 セクションで、分布チャート上にカーソルを合わせると、具体的なエラー数が表示されます。
OS の分布、デバイスの分布、バージョンの分布、および ブラウザーの分布 セクションで、分布チャート上にカーソルを合わせると、具体的なエラー数とその割合が表示されます。
Geographical View セクションで、中国タブまたは World タブの エラーの数 列ヘッダーの矢印をクリックすると、テーブルを昇順または降順に並べ替えられます。

よくある質問

ユーザー動作トレース機能を有効化または無効化するにはどうすればよいですか？

この機能はデフォルトで有効になっています。無効にするには、behavior: false を config オブジェクトに追加します。SDK 設定の詳細については、「SDK リファレンス」をご参照ください。
ユーザー動作トレースを有効化した後、デバッグ中に console.log によって出力されたメッセージが、ソースコード内の本来の位置ではなく ARMS SDK ファイル bl.js にトレースされてしまいます。これを解決するにはどうすればよいですか？

これは、ARMS がブラウザコンソールの出力を監視するために、console オブジェクトの log などのメソッドをオーバーライドしているためです。解決方法は以下のとおりです。
- 方法 1（推奨）：Chrome でブラックボクシングを設定します。
  1. Chrome を開き、Ctrl + Shift + I を押して DevTools を起動し、[設定] アイコンをクリックします。
  2. 左側の[設定項目]パネルのナビゲーションウィンドウで、[ブラックボクシング]をクリックします。[パターンを追加]をクリックします。[パターン]フィールドに /bl.*\.js$ と入力し、[追加]をクリックします。
- 方法 2：SDK 設定項目 behavior: false を使用してユーザー動作トレースを無効化します。
```
<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://sdk.rum.aliyuncs.com/v1/bl.js", "__bl");
</script>
```
上記の手順を実行すると、console.log によって出力されたメッセージが、ソースコード内の対応する位置を指すようになります。