クライアント側のjavascriptのエラーログ

Question

フォームを含む多くのページを含む私のプロジェクト。これは、銀行業務CRMシステムのバックエンドなので、作業中のエラーはキャプチャされ、調査されます。 サーバ側では、Java例外システムが強化されていますが、クライアント側でエラーが発生した場合、javascriptにはIEのjsエラーウィンドウが表示され、上級ユーザが作成したページのスクリーンショットが表示されます。

JavascriptコードはjQueryのパワードUI拡張機能やハードコーディングされたインラインのイベントハンドラと機能の両方が含まれています。

だから私は、あらゆる種類のJS-エラーを取得するための任意のアプローチを使用することができるかどうかを確認するのですか？ MozillaのFirebugやChromeのWebコンソールのようなスタックトレースを与えるライブラリやライブラリがありますか？

Answer 1

はwindow.onerrorに見て。エラーをキャプチャしてサーバーに報告する場合は、おそらくAJAXリクエストを試すことができます。

window.onerror = function(errorMessage, errorUrl, errorLine) { 
    jQuery.ajax({ 
     type: 'POST', 
     url: 'jserror.jsf', 
     data: { 
      msg: errorMessage, 
      url: errorUrl, 
      line: errorLine 
     }, 
     success: function() { 
      if (console && console.log) { 
       console.log('JS error report successful.'); 
      } 
     }, 
     error: function() { 
      if (console && console.error) { 
       console.error('JS error report submission failed!'); 
      } 
     } 
    }); 

    // Prevent firing of default error handler. 
    return true; 
} 

Answer 2

あなたは自分のアプリでJavaScriptコードthis人を置く無痛実装を行いたい場合。そうでなければあなたは1を実装する場合は、windowerrorにスタックトレースを取得するためにthisを試してみて、あなたはエラーを報告するajaxを使用することができます。 A nice wayは、olarkによって報告されたエラーを追跡する

Answer 3

http://exceptionhub.com このトリックにする必要があります。 http://errorception.com/ デバッグのための情報はあまり提供していませんが、良いと思われます。

proxinoは、彼らが何をしているかを知っていないようだ、彼らはイベント私がチェックした最後の時間をONERRORログインするために彼らのロガーコードで完全にjQueryをincudingところ。 JavaScriptのエラーを記録するためにクライアントサイドのJavaScriptをほとんど把握していないサービスは信頼できません。

Answer 4

私はそれはエラーとスタックトレースに加えて、全体のコンソール出力をキャプチャすることができJsLog.meサービス

を使用することをお勧めします。私たちはプロジェクトでそれを使用し、コンソールログ全体を記録することでQAチームが問題の再現方法を記録するのに役立ちます。また、Chromeコンソールのような大きなJSONオブジェクトでうまく動作し、検索機能も備えています。

Answer 5

免責事項：私は、オープンソースで有料サービスであり、Javascriptを含む多くの言語のクラッシュレポートを作成するCEOであり、作成者はSentryです。

フロントエンドの例外をキャプチャするのはかなり難しいことがあります。テクノロジはより良くなっています（ブラウザのJSエンジン）が、まだ多くの制限があります。

1. サーバーサイドロギングエンドポイントが必要です。これを悪用する可能性があるため、これは複雑です（PENテスト担当者が脆弱性を公開しようとする可能性があります）。ここでもCORSに対処する必要があります。私はクラスで最高のので、Sentryにはこれを推奨しています。あなたが望むのであれば、自分自身を（オープンソースとして）ホストすることができます。
2. 実際にコード内のエラーをキャプチャする実装はかなり複雑です。さまざまな理由でwindow.onerrorに頼ることはできません（主にブラウザが歴史的にここで悪い情報を与えるためです）。 raven.jsクライアント（TraceKitに基づく）では、try/catchステートメントでラップするための多数の関数をパッチしています。たとえば、window.setTimeoutです。これにより、ほとんどのブラウザーで完全なスタックトレースを生成するエラーハンドラーをインストールできます。
3. コードのソースマップを生成し、データを処理するサーバーがそれらをサポートしていることを確認します。 Sentryは自動的にそれらを掻き集める（標準を介して）か、APIでアップロードできるようにします。これがなければ、コードを細分化しているとすれば、物事はほとんど使えなくなります。
4. 最後に大きな問題はノイズです。ほとんどのブラウザ拡張機能はスクリプトに直接挿入されるため、ノイズをフィルタリングする必要があります。これは、無視するパターンのブラックリスト（「スクリプトエラー」が最も役に立たない）と受け入れるドメインのホワイトリスト（「example.com」）の2つの方法で解決します。この2つの組み合わせが効果的であることがわかりました。ほとんどのランダムノイズを除去するのに十分です。

サーバー上で知っておくべきいくつかの点：

• クライアントは、時々、オープン持続（すなわちボット、または不正なユーザ）と無駄なデータや簡単な古いエラーを大量に発生します。
• サーバーはこれらのイベントのカスケードを処理でき、正常に失敗するはずです。 Sentryは、速度を制限してデータをサンプリングすることによってこれを行います。
• 例外はブラウザ言語にローカライズされています。中央データベースを使用しないと、あなたはそれらを自分で翻訳し続けることになります。

Answer 6

Atatusは、JavaScriptエラーをキャプチャし、エラーの前のユーザー操作もキャプチャします。これは、エラーをよりよく理解するのに役立ちます。 Atatusは免責

https://www.atatus.com/

だけではなく、エラーのために、あなたのフロントエンドを監視するのに役立ちますが、また、その性能（実ユーザー監視）：私はAtatusでのWeb開発者です。