JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでグローバルエラーハンドラを作成する方法｜window.onerrorの使い方を解説

JavaScriptでは、window.onerrorイベントハンドラを使うことで、ページ全体で発生した未処理の例外（Unhandled Exception）を一括して捕捉できます。ここでは、エラーメッセージ・発生元のURL・行番号・列番号などの詳細情報を取得できる、グローバルエラーハンドラの実装例を紹介します。

グローバルエラーハンドラの実装例

<!DOCTYPE html>
<html>
<body>
<script>
window.onerror = function(errMsg, url, line, column, error) {
  var result = !column ? '' : '\ncolumn: ' + column;
  result += !error;
  document.write("Error= " + errMsg + "\nurl= " + url + "\nline= " + line + result);
  var suppressErrorAlert = true;
  return suppressErrorAlert;
};
setTimeout(function() {
  eval("{");
}, 500)
</script>
</body>
</html>

window.onerrorに渡される引数

  • errMsg … エラーの内容を示すメッセージ文字列
  • url … エラーが発生したスクリプトのURL
  • line … エラーが発生した行番号
  • column … エラーが発生した列番号（非対応ブラウザではundefined）
  • error … 発生したErrorオブジェクト（非対応ブラウザではundefined）

ハンドラ内でtrueを返すと、ブラウザ標準のエラー表示（デフォルトのエラーダイアログやコンソール出力）が抑制されます。上記の例では、変数suppressErrorAlertにtrueを代入して返すことで、独自のエラー表示のみを行うようにしています。

動作確認の仕組み

このサンプルでは、setTimeout()とeval()を組み合わせて、意図的に構文エラーを発生させています。eval("{")は不正なJavaScriptコードのため構文エラーとなり、500ミリ秒後にそのエラーがグローバルハンドラによって捕捉され、エラー内容・URL・行番号などが出力されます。

補足：より現代的な書き方

近年のブラウザでは、window.addEventListener("error", ...)を使う方法も推奨されています。こちらは複数のハンドラを登録でき、柔軟なエラー処理が可能です。

window.addEventListener("error", function(event) {
  console.log("エラー:", event.message);
  console.log("ファイル:", event.filename);
  console.log("行:", event.lineno, "列:", event.colno);
});

開発時のデバッグから本番環境でのエラーログ収集まで、グローバルエラーハンドラを適切に実装しておくことで、予期しないJavaScriptエラーを見逃さずに把握できるようになります。

  1. JavaScriptの正規表現を使って文字列からスペースを削除する方法

    JavaScriptで文字列内のスペースを削除したい場合は、replace()メソッドと正規表現を組み合わせるのが最も一般的な方法です。正規表現 /\s/g を使うことで、文字列中のすべての空白文字（半角スペース、タブ、改行など）を簡単に取り除くことができます。 基本的な使い方 \s は空白文字全般にマッチする特殊文字で、末尾の g（グローバルフラグ）を付けることで、最初に見つかった1箇所だけでなく、文字列全体のすべてのスペースが置換対象になります。 サンプルコード <html>    <head>    &n

  2. javascript:void(0)エラーを修正する方法｜原因と対処法を徹底解説

    インターネットの閲覧は便利な反面、思いがけないエラーに悩まされることも少なくありません。特定のWebページへアクセスしようとした際に表示されるエラーには、簡単に解決できるものと、なかなか原因がつかめず厄介なものがあります。今回取り上げる「javascript:void(0)」エラーは、後者の部類に入るトラブルです。このエラーは、Windows 10ユーザーがGoogle Chromeで特定のサイトにアクセスした際に発生することがあります。ただし、Chrome固有の問題ではなく、SafariやFirefoxなど他のブラウザでも同様の症状が起こり得ます。javascript:void(0)エラー自