JavaScriptで発生したエラーを収集する方法

WEB制作
JavaScriptで発生したエラーを収集する方法

プログラムのエラーを修正の為には、エラーメッセージを確認することが一番ですが、当たり前ですが、JSで発生したエラーはユーザーのディベロッパーツールには表示されますが、サーバー側には何も記録されません。

JSは、ブラウザによってエラーが発生することもあり、不具合の再現が困難な場合があります。

そういった問題を解決するためには、JSのエラーハンドリングを行って、サーバー側にログを残して置くと非常に便利です。

目次

window.onerror

JSのエラーハンドリングはwindow.onerrorを用いることでできます。

window.onerror = function(message, source, lineno, colno, error) { ... }

パラメータ

  • message: エラーメッセージ (string)
  • source: エラーが発生したファイルのURL (string)
  • lineno: エラーが発生した箇所の行番号 (number)
  • colno: エラーが発生した箇所の列番号 (number)
  • error: Error Object (object)

JavaScriptで発生したエラーを収集するプログラムのサンプル

JSでエラーが発生した場合にAPIにPOSTを送ってエラーをログに残していくプログラムのサンプルです。

window.onerror = function (msg, url, lineNo, columnNo, error) {
  var endpoint = '/api/v1/'; // Web api endpoint

  var string = msg.toLowerCase();
  if (string.indexOf(substring) > -1){
    var json = JSON.stringify({ 'Message': 'Script Error: See Browser Console for Detail' });
  } else {
    var json = JSON.stringify({
      'Message: ' + msg,
      'URL: ' + url,
      'Line: ' + lineNo,
      'Column: ' + columnNo,
      'Error object: ' + JSON.stringify(error)
    });
  }

  fetch(endpoint, {
    method : 'POST',
    body : json,
    headers : new Headers({ "Content-type" : "application/json" })
  }); 

  return false;
};