JavaScript エラーページ: 時間軸に沿ってエラーを調査する

New Relic Browser の JavaScript エラー ページを使用すると、本番環境の JavaScript において、どのブラウザ上で、いつ、どんなエラーが発生したのか、簡単に確認できます。それぞれのエラーが発生した回数やページ読み込み数に基づいて、エラーを調査することができます。これにより、ユーザーのサイトの体験に影響を与えているエラーを特定することができます。

JavaScript エラーレポート機能を利用するには、PRO 以上のサブスクリプションレベルが必要となります。

JavaScript エラーレポートの有効化

JavaScript エラーメッセージには、任意のテキストで構成されており、通常、機密情報や個人情報は含まれていません。ただし、意図的に機密情報をメッセージに含めることはできます。JavaScript エラーレポート機能を有効にする前に、サイト内のエラーメッセージに機密情報が含まれていないことを確認してください。詳しくは、New Relic Browser におけるセキュリティをご覧ください。

New Relic Browser は JavaScript エラーレポート機能を自動的に有効にすることはしません。PRO 機能を利用できる場合は、以下の方法でこの機能を有効にしてください。

  1. New Relic のメニューバーから、Browser > Browser apps > (選択したアプリ) > Settings [設定]を選択します。
  2. Browser agent instrumentation [Browserエージェントの計測] から、Pro features [Pro
    機能]を選択します。
  3. Save application settings [アプリ設定を保存する] を選択します。
  4. 利用可能になるまで、5分程度待ちます。
  5. 推奨: 5分経ってもデータが表示されない場合は、エージェントを再起動してみてください。
選択したアプリの JS errorsBrowser Overview ページから Pro 機能を有効にできます。

JavaScript エラーページの表示

JavaScript エラーレポート機能を有効にすると、Browser Overview ページには、Page Views with JS errors [JS エラー付きページビュー]チャートが表示されるようになり、JS erros エラーページには詳細情報が表示されるようになります。

screen-browser-jserrors-dashboard.png
Browser > Browser apps > (選択したアプリ) > JS errors: このページは、リストとトップチャート内に色分けして JavaScript エラーを表示します。

JavaScript エラーを表示する手順は以下のとおりです。

  1. New Relic メニューバーから、Browser > Browser apps > (選択したアプリ) > JS errors を選択します。
    もしくは
    選択したアプリケーションの Browser Overview ページから JavaScript エラーページに移動するには、Page views with JS errors チャートのタイトルにあるリンクを選択します。
  2. JavaScript error instances チャートにある色分けされた特定のエラーを見るには、リスト内の対応するエラーメッセージにマウスをあてます。
  3. エラーの詳細を表示するには、リストから該当の名前を選択します。

ページ上にある JavaScript error instances チャートは、エラーが発生したユニークなページビュー数で重み付けした各エラーを示します。エラーがクリックハンドラで発生しており、ユーザーがあるページのロード中に 100 回をクリックしていた場合、このチャートでは、100 回のクリックとしてではなく、1回のクリックとして、ユーザーの行動を記録します。

エラーの詳細調査

サイトに致命的な JSエラーがいくつかあり、また、ユーザーに気づいていないエラーがいくつかあるとします。その場合、エラーインスタンスの詳細を調査することで、スタックから、ページの重要な機能でエラーが発生しているか確認できます。あるいは、エラーを再現するための手がかりとなる URL とブラウザの情報も知ることができます。

screen-browser-jserrors-details.png
Browser > Browser apps > (選択したアプリ) > JS errors > (選択したエラー): 選択した JavaScript エラーコードは、Overview チャートと Error instance details [エラーインスタンスの詳細] のタブを含む(利用可能な場合)

New Relic 標準の UI 機能ページ機能から詳細情報にドリルダウンできます。以下は、JavaScript エラーページを含む各種オプションの概要です。

  • エラーの詳細を表示するには、リストからの対象の名前を選択します。
  • 関数名、ブラウザ種別、スタックトレース、その他のエラーに関するエラーの詳細を表示したい場合は、Error instance details [エラーインスタンスの詳細]を選択し、矢印ボタンを使って、個別のエラーインスタンス経由でページを表示します。
  • このエラーを含むsession tracesセッショントレースの確認やユーザーの体験や行動の文脈におけるエラーを表示するには、セッショントレースのリンクを選択します。
  • JavaScript ページに戻る場合は、X (閉じる) をクリックします。

インスタンス詳細とスタックトレースの調査

JavaScript Error instance details タブは、コントローラー名、ブラウザ種別、スタックトレース、その他のエラーに関する情報を表示します(利用可能な場合)。また、エラー分のページングが表示されており、そのリンクから別のエラー詳細を確認できます。例: 1/11.

スタックトレースの詳細は、開発中に使用しなかったブラウザからのエラーのスタックを含む、特定のブラウザで発生したエラー箇所を特定するのに役立ちします。スタックトレースには、ページやコード内の URL や 省略された場所が含まれています。JavaScript エラーのトラブルシューティングにスタックトレースと New Relic Browser を使った “実例”を見たい方は、New Relic ブログポスト[英語][external link] をご覧ください。

screen-browser-jserrors-instance.png
Browser > Browser apps > (選択したアプリ) > JS errors > (選択したエラー) > Error instance details: Error instance details [エラーインスタンスの詳細] には、エラー分のページングが表示されており、そのリンクから別のエラー詳細を確認できます。例えば、1/7。上記は iPhone の Safari を含む複数のブラウザで見つかった JavaScript エラーの例です。

エラーのグループ化

New Relic Browser は、主に JavaScript エラーのスタックトレース別にエラーをグループ化します。なぜなら、同じスタックを使用しているエラーは、コード内の同じ場所から来ており、おそらく同じような原因があると考えられるからです。スタックトレースは、ブラウザ間で異なる場合があるため、ブラウザエージェントは、それらを一緒にグループ化する前に、収集対象の各スタックトレースを「canonical stack trace」[標準的なスタックトレース] 形式に変換します。スタックトレースを利用できないエラーは、さらにグループ分けするためのスタック情報がないため、一緒にグループ化されます。

エラーメッセージには、アジアやその他の非ラテン文字が表示されることがあります。ローカル言語でメッセージはブラウザに表示されるため、このようなことが起こることがあります。また、このテキストは、New Relic Browser によってキャプチャされます。New Relic Browser で、他の情報を得るために、対象期間を広げて、わかりやすい言語のエラーメッセージを探してみてください

利用不可能なエラー

スタックトレース経由でスローされたエラーの情報をキャッチするため、New Relic は JavaScript functions をラップしています。エラーがスローされなければ、使用できません。利用できないエラーは、以下のとおりです。

  • SyntaxError もしくは Script error。これは、スクリプトのロード中に発生するので、スタックトレースを生成しません。
  • インラインの JavaScript エラーまたはイベントハンドラのエラー。ラップ対象外のため。
  • 別のドメイン上にあるサードパーティのスクリプトからスローされたエラー
  • 古すぎるブラウザ上で発生したエラー。使用可能なスタックトレースを提供できなかったり、全くスタックトレースを提供しないケースもあります。

関連情報

関連する情報は以下のとおりです。