WEB ブラウザで起きた JavaScript のエラーをサーバに送りたい

本記事は1分で実現できる有用な技術 Advent Calendar 2015の4日目の記事です。

WEB アプリケーションを開発していると「ユーザのブラウザで起きたエラーをサーバに送って DB に収集したい」という要望が出てきたり、外部からお願いされたりすることがあります。こういう場面で、「どうやればいいのん」と悩む方は少なくないようです。

このような場合にはイベントハンドラの onerror を利用すると便利です。エラーハンドリングしたい対象のコードより先に呼ばれる位置で、次のようなコードをぺいっと貼っ付けておきましょう。

そうそう、try-catch している場合には onerror に引っかからないので、そういった場合には個別に呼び出してください。

window.onerror = function(errorMsg, fileName, lineNumber) {
    var errorInfo = {
        'errorMsg'   : errorMsg,           // エラーメッセージ
        'fileName'   : fileName,           // エラーが発生したスクリプトのファイル名
        'lineNumber' : lineNumber,         // エラーが発生した行
        'urlDispPage': location.href,      // エラー発生時に閲覧していた URL
        'userAgent'  : navigator.userAgent // エラーが発生したクライアントのユーザエージェント
    };

    // お好みの方法でサーバーに送信
    // 以下は一例
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '受け取り先');
    xhr.setRequestHeader('Content-Type', 'applicatoin/json;charset=UTF-8');
    xhr.send(JSON.stringify(errorInfo));
};