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));
};

クライアントのほうはこれで OK。 受け取ったサーバーはこれを DB に記録しましょう。日時情報を忘れずに。

サーバーのほうの準備は1分で済まない気がしますが、「サーバに送りたい」というタイトルなのでセーフでしょう。…多分。

値は JS にて取得されるので、サーバーに収集した情報を WEB ブラウザなどで確認する場合には表示時にエスケープ処理を施すなど注意してください。