web-dev-qa-db-ja.com

すべてのJavaScriptエラーをキャッチし、サーバーに送信します

JavaScriptエラーをグローバルに処理し、クライアントブラウザーからサーバーに送信する経験がある人はいるかと思いました。

私のポイントは非常に明確だと思います。クライアント側で発生するすべての例外、エラー、コンパイルエラーなどを知り、それらをサーバーに送信して報告したいと思います。

主にMooToolsとhead.js（JS側）とDjangoをサーバー側で使用しています。

javascripterror-handlingclient-side
220
Olivier Girardot

私は最近、テストで Sentry をテストし、正常に動作します（JSおよびその他のPHPなどの言語）

1-オープンソース（独自のサーバーにインストールできます）2-無料プランを使用できます（100レポート/日）

または、サーバーにインストールします： github.com/getsentry

17
Tarek

私はチェックアウトします window.onerror

例：

window.onerror = function(message, url, lineNumber) {  
  //save error and send to server for example.
  return true;
};

Trueを返すとデフォルトハンドラーの起動が妨げられ、falseを返すとデフォルトハンドラーが実行されることに注意してください。

310
Mike Lewis

ウェブサイトでGoogleアナリティクスを使用している場合は、次の操作を実行できます。

window.onerror = function(message, source, lineno, colno, error) {
  if (error) message = error.stack;
  ga('send', 'event', 'window.onerror', message, navigator.userAgent);
}

上記のコードに関するいくつかのコメント：

  • 最新のブラウザでは、完全なスタックトレースがログに記録されます。
  • スタックトレースをキャプチャしない古いブラウザの場合、代わりにエラーメッセージがログに記録されます。 （私の経験ではほとんど以前のiOSバージョンです）。
  • ユーザーのブラウザのバージョンもログに記録されるため、どのOS /ブラウザのバージョンがどのエラーをスローしているかを確認できます。これにより、バグの優先順位付けとテストが簡素化されます。
  • このコードは、Googleアナリティクスを「analytics.js」、 このように とともに使用する場合に機能します。代わりに「gtag.js」を使用している場合は、 this 、関数の最後の行を微調整する必要があります。 詳細はこちらを参照 。

コードを配置したら、次のようにしてユーザーのJavascriptエラーを表示します。

  1. Googleアナリティクスで、Behaviorセクションをクリックしてから、Top Eventsレポートをクリックします。
  2. イベントカテゴリのリストが表示されます。リストで[window.onerror]をクリックします。
  3. Javascriptスタックトレースとエラーメッセージのリストが表示されます。 Secondary dimensionボタンをクリックし、表示されるテキストボックスにEvent Labelと入力して、ユーザーのOS /ブラウザバージョンのレポートに列を追加します。
  4. レポートは下のスクリーンショットのようになります。
  5. OS /ブラウザ文字列をより人間が読める説明に変換するには、それらをコピーして https://developers.whatismybrowser.com/useragents/parse/ に貼り付けます

enter image description here

9
Martin Omander

また、 http://jslogger.com サービスはそれを支援できます。

Javascriptエラーとイベントをクラウドに記録する

from http://jslogger.com/features ：

これからは、サイトのユーザーエクスペリエンスを損なうすべてのエラーをスパイできます。すべてのJavascriptエラーがキャッチされ、後でデバッグできるようになります。

免責事項：サービス/会社と提携していません。

1
Ivan Kurmanov

試すことができます Atatus -これは、最新のWebアプリ向けのReal User Monitoring（RUM）に加えて、新しいJavaScriptエラー追跡サービスです。

エラーをキャプチャするだけでなく、エラーをトリガーしたユーザーイベントもキャプチャします。これにより、最後にエラーを再現する手順が提供されます。

エラーのキャプチャに加えて、ページの読み込み時間もキャプチャし、さまざまな視点（ジオ、ブラウザ、ページドリルダウン、ページヒストグラム、Ajaxモニタリング、トランザクションモニタリング）で表示します。

https://www.atatus.com/

利用可能なドキュメント： https://www.atatus.com/docs

免責事項：私はAtatusのWeb開発者です。

1
Fizer Khan

代わりにサードパーティのサービスを使用しようとしないでください。

エラーハンドラーは、以下のシナリオをキャッチできます。

  1. キャッチされていないTypeErrorはキャプチャできません
  2. キャッチされていないReferenceErrorはキャプチャできません。例：var.click（）
  3. TypeErrorをキャプチャできます
  4. 構文エラーをキャプチャできます
  5. ReferenceErrorをキャプチャできます

JavaScriptエラーをキャッチするには：

window.addEventListener('error', function (e) {
  //It Will handle JS errors 
})

AngularJSエラーをキャプチャするには：

app.config(function ($provide) {
$provide.decorator('$exceptionHandler', function ($delegate) {
   return function (exception, cause) {
       //It will handle AngualarJS errors
      }
   })
})
0
sam ruben