JavaScriptエラー
アプリケーションの複雑化と細かなコードの蔓延化により、エラーの正確な位置を正確に特定することが困難になっています。
JavaScriptエラー機能を使用して、JavaScriptエラーを継続的に監視します。スタックトレースを用いて、エラーのデバッグやエラーの持つスクリプト行の特定を行えます。
目次
JavaScriptエラーの表示
- Site24x7にログインします。
- ［RUM］→［アプリケーション名］→［JavaScriptエラー］→［エラー］に移動します。
- 画面上部に、エラーの合計、エラーが発生したWebページの合計、エラーのあるファイルの合計、ユーザーの合計が表示されます。
- グラフ上部には、エラーと影響の受けたユーザーが表示されます。
この情報は、最小、平均、最大、95パーセンタイル、99パーセンタイルの値で取得できます。 - グラフの下部には、エラーが表示されます。特定のエラーをクリックして、それを詳細に分析できます。
エラー詳細の表示
JavaScriptエラーをクリックして、詳細ページを開きます。
詳細タブ
エラー詳細画面上部には、問題の発生したデバイスやブラウザー、影響のあったユーザーID、エラー収集時間といった情報が表示されます。
それら項目をクリックすると、その項目でフィルターを行い新しいタブで表示します。
スタックトレースでは、ファイル名、メソッド名、エラーのあるライン番号が表示されます。これにより、解読が難しいファイル内の細かなエラーのあるコード行を把握できます。
- ソースマップおよびJSソースファイルがアップロードされた場合、エラーコード行に表示されます。
- ソースマップおよびJSソースファイルがアップロードされていない場合、エラーコード行を取得するためにアップロードする必要があります。
ソースマップの自動検知
RUMエージェントがWebサイトにホストされている場合、ソースマップを自動で検出します。
ケース1：ソースマップのファイル名、相対パスまたは絶対パスがファイルに指定されている場合、RUMエージェントが同じディレクトリ内のソースマップを当該ファイルとして検索します。
構文：
- sourceMappingURL= (ファイル名)
- sourceMappingURL= (相対パス)
- sourceMappingURL= (絶対パス)
例：
- sourceMappingURL= (script.js.map)
- sourceMappingURL= (dummy_dir/script.js.map)
- sourceMappingURL= (https://<Some domain name>/src/map/script.js.map)
ケース2：ソースマップが指定されていない
ファイル内でソースマップが指定されていない場合：
- RUMエージェントが自動でファイルのレスポンスヘッダー内のソースマップを捜索します。
構文：
x-sourcemap-url: (ソースマップパス)
例：
- ヘッダーに指定されていない場合、エージェントはファイルと同じ名前のディレクトリで検索を行います。
例：
ファイル名がscript.min.jsの場合、script.min.js.mapという名前のソースマップが検索されます。
- ソースマップが自動検出された場合、エラーコードをもつ行が表示されます。次のスクリーンショットでは、"convertUpperCase"メソッドの行90:8と、メソッド"exe"の行32:19が"script.min.js"ファイル内でエラーコードを持つことを意味します。
However, if you want to see the code snippets for the same, you must manually upload the JS Source file.
- ソースマップの検知に失敗した場合、手動でソースマップとJSファイルをアップロードするように促す画面が表示されます。
- ［ファイルアップロード］をクリックします。
- ［ファイルアップロード］と表示された場合：
- バージョンを入力します。
- ソースマップを閲覧しアップロードします。
- JSソースファイルを指定しアップロードします。
- ［Zipアップロード］と表示された場合：
- バージョンを入力します。
- 必要なファイルをすべて含むZipファイルを指定しアップロードします。
- ［送信］をクリックします。
- 同じファイル（同じファイル名）で異なるバージョンをアップロードした場合、それらファイルは異なるものと認識されます。
- 同じファイル（同じファイル名）で同じバージョンをアップロードした場合、新規ファイルとして既存のものと置換されます。
- 異なるファイルをマップしたい場合、ドロップダウンから選択して、［再解析］をクリックします。
この項目では、直近のアクションが表示されます。これにより、エラーの結果のアクションを把握できます。
例えば、［ログイン］→［メール送信］→［プレイ］をクリックした場合、RUMエージェントがそれらアクションをbreadcrumbとして記録します。
また、次のボタンを押下するまでの時間といった、それらアクションの長さを表示できます。
エラーインスタンスタブ
［エラーインスタンス］タブで、指定した期間での選択したエラーレポートを表示します。
| パラメーター | 説明 |
| 収集時刻 | エラーが検知された時間です。 |
| ファイル | エラーが発生したファイル名です。 |
| ページ | エラーが発生したWebページのURLです。 |
| ブラウザー | エラーが発生したブラウザーです。 |
| デバイスタイプ | エラーが発生したデバイスです。 |
| ユーザー | 問題が発生したユーザーです。 |
アップロードファイルの表示
- ［RUM］→［アプリケーション名］→［JavaScriptエラー］に移動します。
- ソースファイルを選択して、アップロードしたファイルを表示します。
ドロップダウンメニューからファイルタイプやバージョンを選択して、検索できます。
「ファイル名で検索」を使用して名前でファイルを検索することもできます。
ファイルのアップロードと削除
- ［アップロード］をクリックして、ソースマップとJSソースファイルをアップロードできます。
- ファイルを選択し［削除］をクリックすることで、ファイルを削除できます。
ユースケース
例は次のとおりです。
- アプリケーションのMinified JSファイルにエラーが発生しています。
- しかし、次のスクリーンショットで示されているように、ファイルが縮小化されているため、単一行のデバッグが困難であり、エラーを発生させているコードの解析が困難となっています。
- そこでRUMの JavaScriptエラー項目を使用して、エラーコードを特定します。
特定方法は次のとおりです。- Site24x7にログインし、［RUM］をクリックします。
- ［JavaScriptエラー］をクリックします。
- 画面右上の期間を［最新30分］に設定します。
- エラーリストから、分析したいエラーをクリックします。
- Webサイトにマップファイルがホストされていないため、ソースマップとオリジナルのJSファイルをアップロードするよう表示されます。
- ［ファイルアップロード］をクリックしてファイルをアップロードし、［送信］をクリックします。
その結果、次の画像のようにエラーコードをもつ行が表示されます。