JavaScript グローバルイベントメカニズム 質問する

JavaScript グローバルイベントメカニズム 質問する

スローされたすべての未定義関数エラーをキャッチしたいと思います。JavaScript にはグローバル エラー処理機能がありますか? 使用例は、定義されていないフラッシュからの関数呼び出しをキャッチすることです。

ベストアンサー1

未処理の JavaScript エラーをキャッチする方法

window.onerror次のようにイベント ハンドラーにイベントを割り当てます。

<script type="text/javascript">
window.onerror = function(msg, url, line, col, error) {
   // Note that col & error are new to the HTML 5 spec and may not be 
   // supported in every browser.  It worked for me in Chrome.
   var extra = !col ? '' : '\ncolumn: ' + col;
   extra += !error ? '' : '\nerror: ' + error;

   // You can view the information in an alert to see things working like this:
   alert("Error: " + msg + "\nurl: " + url + "\nline: " + line + extra);

   // TODO: Report this error via ajax so you can keep track
   //       of what pages have JS issues

   var suppressErrorAlert = true;
   // If you return true, then error alerts (like in older versions of 
   // Internet Explorer) will be suppressed.
   return suppressErrorAlert;
};
</script>

コードにコメントされているように、 の戻り値window.onerrorが の場合true、ブラウザは警告ダイアログの表示を抑制する必要があります。

window.onerror イベントはいつ発生しますか?

簡単に言えば、イベントは、1) キャッチされない例外がある場合、または 2) コンパイル時エラーが発生した場合に発生します。

キャッチされない例外

  • 「いくつかのメッセージ」を投げる
  • 未定義のものを呼び出します。
  • cross_origin_iframe.contentWindow.document;、セキュリティ例外

コンパイルエラー

  • <script>{</script>
  • <script>for(;)</script>
  • <script>"oops</script>
  • setTimeout("{", 10);最初の引数をスクリプトとしてコンパイルしようとします

window.onerror をサポートするブラウザ

  • Chrome 13以上
  • Firefox 6.0以降
  • インターネットエクスプローラー5.5以上
  • オペラ 11.60+
  • Safari 5.1以降

スクリーンショット:

上記の onerror コードをテスト ページに追加した後の動作例:

<script type="text/javascript">
call_something_undefined();
</script>

window.onerror イベントによって詳細にエラー情報を表示する Javascript アラート

AJAX エラー報告の例

var error_data = {
    url: document.location.href,
};

if(error != null) {
    error_data['name'] = error.name; // e.g. ReferenceError
    error_data['message'] = error.line;
    error_data['stack'] = error.stack;
} else {
    error_data['msg'] = msg;
    error_data['filename'] = filename;
    error_data['line'] = line;
    error_data['col'] = col;
}

var xhr = new XMLHttpRequest();

xhr.open('POST', '/ajax/log_javascript_error');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log('JS error logged');
    } else if (xhr.status !== 200) {
        console.error('Failed to log JS error.');
        console.error(xhr);
        console.error(xhr.status);
        console.error(xhr.responseText);
    }
};
xhr.send(JSON.stringify(error_data));

JSFiddle:

https://jsfiddle.net/nzfvm44d/

参考文献:

おすすめ記事