web-dev-qa-db-ja.com

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

フォーム付きのページが多数含まれている私のプロジェクト。これは銀行CRMシステムのバックエンドであるため、作業プロセス中のエラーはすべてキャプチャして調査する必要があります。サーバー側ではJava例外システムが強化されていますが、クライアント側でエラーが発生した場合、JavaScriptで取得できる情報はIEのjs-errorウィンドウ、またはスクリーンショットのみです。上級ユーザーが作成したページ。

JavaScriptコードには、Jqueryを利用したUI拡張機能と、ハードコードされたインラインイベントハンドラーおよび関数の両方が含まれています。

だから私は、あらゆる種類のjs-errorsをキャプチャするためのアプローチが使用できるかどうか尋ねていますか？追加のライブラリや、MozillaのFirebugやChromeのWebコンソールのようなスタックトレースを提供できるものはありますか？

javascriptjqueryerror-handlingstack-trace
24
shershen

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;
}
30
voithos

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

フロントエンドの例外をキャプチャするのはかなり難しい場合があります。テクノロジーは改善されましたが（ブラウザーJSエンジン）、まだ多くの制限があります。

  1. サーバー側のロギングエンドポイントが必要になります。悪用される可能性があるため、これにはいくつかの複雑さがあります（つまり、PENテスターは脆弱性を公開しようとする可能性があります）。ここでもCORSを処理する必要があります。私たちはクラスで最高なので、私は明らかにこれにSentryをお勧めします。必要に応じて、サーバーを（オープンソースとして）自分でホストすることもできます。
  2. コードで実際にエラーをキャプチャする実装はかなり複雑です。さまざまな理由でwindow.onerrorに依存することはできません（主にブラウザーがこれまでに悪い情報をここに提供するためです）。 raven.js クライアント（TraceKitに基づく）で実行することは、try/catchステートメントでそれらをラップするためにいくつかの関数にパッチを適用することです。たとえば、window.setTimeoutなどです。これにより、ほとんどのブラウザーで完全なスタックトレースを生成するエラーハンドラーをインストールできます。
  3. コードのソースマップを生成していて、データを処理するサーバーがそれらをサポートしていることを確認する必要があります。 Sentryはこれを両方とも（標準を介して）自動的にスクレイピングするか、 [〜＃〜] api [〜＃〜] を使用してそれらをアップロードできるようにします。これがないと、コードを縮小していると仮定すると、ほとんど使用できなくなります。
  4. 最後の主要な問題はノイズです。ほとんどのブラウザ拡張機能はスクリプトに直接挿入するため、ノイズを除去する必要があります。これは2つの方法で解決します。無視するパターンのブラックリスト（「スクリプトエラー」は最も役に立たない）と、受け入れるドメインのホワイトリスト（「example.com」）です。 2つの組み合わせは、ほとんどのランダムノイズを除去するのに十分効果的であることがわかりました。

サーバー上で知っておくべきこと：

  • クライアントは時々開いたまま（ボットや悪意のあるユーザーなど）になり、大量の役に立たないデータや単純な古いエラーを引き起こします。
  • サーバーは、これらのイベントのカスケードを処理でき、正常に失敗する必要があります。 Sentryは、レート制限とサンプリングデータによってこれを行います。
  • 例外はブラウザ言語にローカライズされており、一元化されたデータベースがないと、例外を自分で翻訳するのが困難になります（ただし、その意味は一般的に明らかです）。
16
David Cramer

ウェブサイトで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アナリティクスを使用する場合に機能します like this 。代わりに「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/ にコピーアンドペーストします

enter image description here

2
Martin Omander

http://exceptionhub.com トリックする必要があります。 http://errorception.com/ デバッグに関する情報はそれほど多くありませんが、見栄えも良いようです。

proxinoは彼らが何をしているのかを知らないようで、前回チェックしたときにonloggerイベントをログに記録するためにロガーコードに完全なjQueryを組み込んでいます。 JavaScriptエラーをログに記録するクライアント側JavaScriptをほとんど把握していないサービスは信用できません。

2
Allan Ebdrup

簡単に実装したい場合は、アプリに this guys javascriptコードを追加してください。それ以外の場合は、実装する場合は this を試してwindowerrorのスタックトレースを取得します。ajaxを使用してエラーを報告できます。 A 良い方法 olarkによって報告されたエラーを追跡する

2
Tamil

JsLog.me サービスの使用をお勧めします

エラーとスタックトレースに加えて、コンソール出力全体をキャプチャできます。プロジェクトで使用します。コンソールログ全体をログに記録することで、QAチームが問題を再現する方法を記録できます。また、Chrome consoleのような大きなJSONオブジェクトでもうまく機能し、検索機能があります。

1
Alexey Petushkov

Atatus はJavaScriptエラーをキャプチャし、エラーの前のユーザーアクションもキャプチャします。これは、エラーの理解に役立ちます。 Atatusは、エラーだけでなくそのパフォーマンスもフロントエンドの監視に役立ちます（リアルユーザーモニタリング）

https://www.atatus.com/

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

0
Fizer Khan