JavaScript
ブラウザでのグローバルエラー処理

Angular 2 AngularJS ASP.NET CSS HTML jQuery Node.js PHP React Regular Expressions

構文

window.onerror = function（eventOrMessage、url、lineNumber、colNumber、error）{...}

パラメーター

パラメータ	詳細
eventOrMessage	一部のブラウザは、イベントハンドラを1つの引数`Event`オブジェクトで呼び出すことがあります。しかし、他のブラウザ、特に古いブラウザや古いモバイルのブラウザは、最初の引数として`String`メッセージを提供します。
URL	2つ以上の引数を指定してハンドラを呼び出した場合、2番目の引数は通常、問題の原因となるJavaScriptファイルのURLです。
lineNumber	複数の引数を指定してハンドラを呼び出した場合、3番目の引数はJavaScriptソースファイル内の行番号です。
colNumber	複数の引数を指定してハンドラを呼び出した場合、4番目の引数はJavaScriptソースファイル内のカラム番号です。
エラー	複数の引数を指定してハンドラを呼び出すと、5番目の引数が問題を説明する`Error`オブジェクトになることがあります。

備考

残念ながら、 window.onerrorは歴史的に各ベンダーによって異なって実装されています。 パラメータセクションで提供される情報は、さまざまなブラウザとそのバージョン間で期待されるものの近似値です。

すべてのエラーをサーバー側に報告するwindow.onerrorの処理

次の例では、 window.onerrorイベントをリッスンし、画像ビーコン技法を使用して、URLのGETパラメータを使用して情報を送信します。

var hasLoggedOnce = false;

// Some browsers (at least Firefox) don't report line and column numbers
// when event is handled through window.addEventListener('error', fn). That's why
// a more reliable approach is to set an event listener via direct assignment.
window.onerror = function (eventOrMessage, url, lineNumber, colNumber, error) {
    if (hasLoggedOnce || !eventOrMessage) {
        // It does not make sense to report an error if:
        // 1. another one has already been reported -- the page has an invalid state and may produce way too many errors.
        // 2. the provided information does not make sense (!eventOrMessage -- the browser didn't supply information for some reason.)
        return;
    }
    hasLoggedOnce = true;
    if (typeof eventOrMessage !== 'string') {
        error = eventOrMessage.error;
        url = eventOrMessage.filename || eventOrMessage.fileName;
        lineNumber = eventOrMessage.lineno || eventOrMessage.lineNumber;
        colNumber = eventOrMessage.colno || eventOrMessage.columnNumber;
        eventOrMessage = eventOrMessage.message || eventOrMessage.name || error.message || error.name;
    }
    if (error && error.stack) {
        eventOrMessage = [eventOrMessage, '; Stack: ', error.stack, '.'].join('');
    }
    var jsFile = (/[^/]+\.js/i.exec(url || '') || [])[0] || 'inlineScriptOrDynamicEvalCode',
        stack = [eventOrMessage, ' Occurred in ', jsFile, ':', lineNumber || '?', ':', colNumber || '?'].join('');

    // shortening the message a bit so that it is more likely to fit into browser's URL length limit (which is 2,083 in some browsers)
    stack = stack.replace(/https?\:\/\/[^/]+/gi, '');
    // calling the server-side handler which should probably register the error in a database or a log file
    new Image().src = '/exampleErrorReporting?stack=' + encodeURIComponent(stack);
    
    // window.DEBUG_ENVIRONMENT a configurable property that may be set to true somewhere else for debugging and testing purposes.
    if (window.DEBUG_ENVIRONMENT) {
        alert('Client-side script failed: ' + stack);
    }
}

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow