JavaScriptのerrorイベント

フロントエンド
date 2017.04.16 tag JavaScript

複雑なJavaScriptアプリケーションの場合、こちら側で想定していたエラー処理をすり抜けてしまう場合があるため「error」イベントを監視しておくのがいいです。
ブラウザ開発者ツールのコンソール上に出る「ReferenceError: a is not defined」のような情報ってエラー調査にすごく役に立つので。

実践

errorイベントコールバックの引数にはErrorEventオブジェクトが渡されるので、
ここのmessage、lineno、colnoあたりをどうにかして確認できるようにしましょう。
本番サービスとして稼働させる場合はサーバに送信して集約させるのが良さそうです。

window.addEventListener('error', function(e) {
    var message      = e.message;
    var fileName     = e.filename;
    var lineNumber   = e.lineno;
    var columnNumber = e.colnoa;

    // API送信用の関数を実行
    sendErrorLog(message, fileName, lineNumber, columnNumber);
});

ErrorEvent – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/ErrorEvent

備考

ErrorEventオブジェクトのmessageが「Script error.」となる場合は下記Qiitaを参照すべし。
補足としてサーバ上に設置しない場合もこのケースになります。

window.onerrorでエラー内容が取れない時の対応 – Qiita
http://qiita.com/sue71/items/885caeedb02ae6dc48c4