Window: error イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

error イベントは、リソースの読み取りに失敗したり、使用できなかったりした場合 — 例えば、スクリプトに実行エラーがあった場合に Window オブジェクトに発生します。

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("error", (event) => {});

onerror = (event, source, lineno, colno, error) => {};

メモ: 歴史的な理由により、 windowonerror はイベントハンドラープロパティの中で唯一、複数の引数を受け取ります。

イベント型

イベントオブジェクトは、ユーザーインターフェイス要素から生成された場合は ErrorEvent インスタンスであり、そうでない場合は Event インスタンスです。

Event ErrorEvent

使用上の注意

イベントハンドラープロパティ

歴史的な理由から、 onerror イベントハンドラープロパティは Window オブジェクトに対してのみ、他のイベントハンドラープロパティとは異なる動作をします。

これは onerror に割り当てられたハンドラーにのみ適用され、 addEventListener() を使用して追加したハンドラーには適用されないことに注意してください。

キャンセル

イベントハンドラープロパティに割り当てられたほとんどのイベントハンドラーでは、ハンドラーから false を返すことで、イベントの既定値の動作を取り消すことができます。

js
textarea.onkeydown = () => false;

しかし、 Windowerror イベントの既定の動作をイベントハンドラープロパティから取り消すためには、代わりに true を返す必要があります。

js
window.onerror = () => true;

取り消された場合、エラーはコンソールに現れませんが、現在のスクリプトの実行は停止します。

引数

イベントハンドラーのシグネチャは addEventListener()onerror で異なります。 Window.addEventListener() に渡されるイベントハンドラーは、単一の ErrorEvent オブジェクトを受け取りますが、 onerror ハンドラーは ErrorEvent オブジェクトのプロパティと一致する 5 つの引数を受け取ります:

event

文字列で、関数を説明する人間が読むのに適したエラーメッセージが入ります。 ErrorEvent.message と同じです。

source

文字列で、エラーが発生したスクリプトファイルの名前が入ります。

lineno

整数で、エラーが発生したスクリプトファイルの行番号が入ります。

colno

整数で、エラーが発生したスクリプトファイルの列番号が入ります。

error

発生したエラーです。ふつうは Error オブジェクトです。

js
window.onerror = (a, b, c, d, e) => {
  console.log(`message: ${a}`);
  console.log(`source: ${b}`);
  console.log(`lineno: ${c}`);
  console.log(`colno: ${d}`);
  console.log(`error: ${e}`);

  return true;
};

メモ: これらの引数名は HTML イベントハンドラー属性で監視可能で、最初の引数は message ではなく event と呼ばれます。

この特別な動作は windowonerror イベントハンドラーに対してのみ起こります。 Element.onerror ハンドラーの場合は単一の ErrorEvent オブジェクトを受け取ります。

ライブデモ

HTML

html
<div class="controls">
  <button id="script-error" type="button">Generate script error</button>
  <img class="bad-img" />
</div>

<div class="event-log">
  <label for="eventLog">Event log:</label>
  <textarea
    readonly
    class="event-log-contents"
    rows="8"
    cols="30"
    id="eventLog"></textarea>
</div>

JS

js
const log = document.querySelector(".event-log-contents");

window.addEventListener("error", (event) => {
  log.textContent = `${log.textContent}${event.type}: ${event.message}\n`;
  console.log(event);
});

const scriptError = document.querySelector("#script-error");
scriptError.addEventListener("click", () => {
  const badCode = "const s;";
  eval(badCode);
});

結果

仕様書

Specification
HTML
# event-error
HTML
# handler-onerror

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
error event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

関連情報

  • Element を対象としたこのイベント: error イベント