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

JavaScriptエラーをグローバルに処理した経験があり、それをクライアントのブラウザーからサーバーに送信する経験があるかどうか疑問に思いました。

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

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

私は最近、Sentryを本番環境でテストしましたが、正常に動作します（JSおよびPHPのような他の言語）

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

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

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

例：

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

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

ウェブサイトでGoogle Analyticsを使用している場合は、私ができることを実行できます。

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

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

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

コードを配置したら、次のようにしてユーザーの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/にコピーアンドペーストします

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

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

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
      }
   })
})

また、http：//jslogger.comサービスはそれを助けることができます：

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

http://jslogger.com/featuresから：

これからは、サイトのユーザーエクスペリエンスを損なうすべてのエラーをスパイすることができます。すべてのJavascriptエラーは検出され、後でデバッグするために提供されます。

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

あなたはアタトゥスを試すことができますこれは、最新のWebアプリ用のリアルユーザーモニタリング（RUM）とともに新しいJavaScriptエラー追跡サービスです。

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

エラーのキャプチャに加えて、ページの読み込み時間をキャプチャし、地域、ブラウザ、ページのドリルダウン、ページヒストグラム、Ajaxモニタリング、トランザクションモニタリングなど、さまざまな観点から表示します。

https://www.atatus.com/

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

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

キャッチされていないライブラリは良い無料の方法未処理の拒絶反応を含む、すべてのJSエラーをキャプチャしています。

この新しいサービスhttp://rescuejs.com/をチェックしてみてください。https://bugsnag.com/

サーバー側のコードを自分で書くことなく、すべてのJavaScriptエラーを記録できます。また、ブラウザのバージョンなども追跡します。

100％「エンタープライズ対応」だとは思いませんが、チェックする価値はあります。