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

JavaScriptで未処理の例外をすべてキャッチする方法

JavaScriptで発生した未処理の例外（Unhandled Exception）をすべて捕捉したい場合は、window.onerror を利用します。この onerror イベントハンドラは、エラーの正確な内容を特定するために、次の3つの情報を受け取ることができます。

onerrorハンドラが受け取る3つの情報

  • エラーメッセージ（msg） − ブラウザが本来表示するものと同じエラー内容のメッセージ
  • URL（url） − エラーが発生したファイルの場所
  • 行番号（line） − 上記URL内でエラーが発生した行番号

実装サンプルコード

以下のコードを実行すると、未処理の例外を捕捉してアラートで情報を表示できます。

<html>
<head>
<script>
window.onerror = function (msg, url, line) {
alert("Message : " + msg);
alert("url : " + url);
alert("Line number : " + line);
}
</script>
</head>

<body>
<p>下のボタンをクリックすると結果を確認できます：</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

この例では、定義されていない関数 myFunc() を呼び出しているため、クリック時にエラーが発生し、window.onerror に登録した関数が自動的に実行されます。その結果、エラーメッセージ・発生元のURL・行番号が順にアラート表示されます。

補足：より柔軟なエラー監視の方法

window.onerror への直接代入は古くから使われる手法ですが、上書きの競合を避けたい場合は addEventListener を使う方法も推奨されます。

window.addEventListener('error', function (event) {
console.log('エラーメッセージ:', event.message);
console.log('ファイル:', event.filename);
console.log('行番号:', event.lineno);
});

また、Promise内で発生して捕捉されなかったエラーについては、unhandledrejection イベントを併用することで漏れなく監視できます。これらを組み合わせることで、アプリケーション全体のエラーを効率的にトラッキングし、ログ収集やデバッグに役立てることが可能です。

  1. JavaScriptのすべてのエラーをキャッチする方法【onerrorイベントハンドラの使い方】

    ページ上で発生するすべてのJavaScriptエラーを捕捉したい場合は、onerror()メソッドを使用します。onerrorイベントハンドラは、JavaScriptで最初に提供されたエラー処理のための仕組みであり、ページ上で例外が発生するたびに、windowオブジェクトに対してerrorイベントが発火します。 onerrorイベントハンドラが受け取る3つの情報 onerrorイベントハンドラは、エラーの正確な内容を特定するために、以下の3つの情報を受け取ることができます。 エラーメッセージ — ブラウザがそのエラーに対して表示するものと同じメッセージ URL — エラーが発生したファイルの

  2. JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

    JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。 URLオブジェクトの作成例 以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="