JavaScript で全体のエラーを検知, 捕捉してハンドリングする方法

phi phi on javascript

エラーが起きたい際に, 共通で何か処理をやりたい場面ってよくありますよね?

例えば

  • エラーが起きた行をconsole 以外で表示したい
  • エラーの内容を日本語化したい
  • エラーの内容をサーバーに送りたい

などなど.

今回は JavaScript で起きたエラーを検知, 捕捉して ハンドリングする方法を紹介します.

エラー時に必ず呼ばれる関数を登録しよう

JavaScript ではエラーが起きると window オブジェクトの
error イベントが発火します.

なので下記のように error イベントを登録しておけば エラー時に何か処理を行うといったことを簡単で実現できます.

window.onerror = function(msg, url, line, col, error) {  
    console.log(msg); // エラーの内容
};

引数は

  • msg ... エラーメッセージ
  • url ... エラーが起きたファイルのパス
  • line ... エラーが起きた行
  • col ... エラーが起きた列
  • error ... エラーオブジェクト

となっています.

こちらサンプルです. [runstnat]

error オブジェクトをうまく使えばコールスタックの内容なんかも取れるので
スマホ開発などで超絶便利だったりします♪