[Javascript]のError(例外)のそこそこな詳細を出力するクロスブラウザなコード/集約エラーハンドラでエラー内容取得

Errorオブジェクトは…ブラウザによってプロパティがまちまちだったりしてめんどくさい。 以下の関数を使えばだいたいのブラウザで詳細な情報を出力できる。

コード

※動作確認: Chrome, FireFox, IE10, IE11, iOS(Safari, UIWebView)

function errorToString(e) {
  var ua = navigator.userAgent;
  var m = e.message;
  var s = e.stack;
  return /Firefox/.test(ua) ? (m + '\n' + s.replace(/(.+)/g, '\tat $1'))
    : /like Mac OS X/.test(ua) ? e.name + ':' + m + '\n\tat ' + s.replace(/(\n|\r\n)/g, '\n\tat $1')
    : s || m + ' at ' + e.sourceURL + (e.line ? ':' + e.line : '');
};

try
{
  throw new Error('死');
}
catch(error)
{
  console.error(errorToString(error));
}

実装に関するメモ

  • e.message を実装していないブラウザはほぼ無いはず
  • e.stack は古いブラウザ以外は大抵実装されてる。FireFoxはmessageの内容を含まないけど、IEやChromeはmessageの内容もstackで取得できる値に含まれている。

キャッチされない例外の集約エラーハンドラ

errorイベント(集約エラーハンドラ)で取得したイベントから例外メッセージを取得しようとする時に、 ブラウザ間に差異がある。また、スタックトレースが取得できないブラウザがある(これは仕様上無理)。

以下のようなコードを記述すればだいたいのブラウザで問題ないかと思う。

function onError(event) {
  var e = event.error;
  var message = e instanceof Error
    ? errorToString(e)
    : 'Error:' + e.message + ' at ' + e.filename + ':' + e.lineno + (e.colno ? ':' + e.colno : '');

  //
  // message をサーバに送るロギング処理などを記述
  //
  console.error(message);
};

window.addEventListener('error', onError)

throw new Error('死');
Share
関連記事