本記事は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 ブラウザなどで確認する場合には表示時にエスケープ処理を施すなど注意してください。