Window: error-Ereignis

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie einen Handler der Event-Handler-Eigenschaft der Schnittstelle zuweisen:

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

Ereignistyp

Das Ereignisobjekt ist eine Instanz von ErrorEvent, wenn das Ereignis von einem Benutzeroberflächenelement erzeugt wurde, andernfalls eine Instanz von Event.

Beschreibung

Event-Handler-Eigenschaft

Aus historischen Gründen verhält sich die Event-Handler-Eigenschaft onerror bei Window- und WorkerGlobalScope-Objekten anders als andere Event-Handler-Eigenschaften.

Dies gilt nur für Handler, die onerror zugewiesen wurden, nicht für Handler, die mit addEventListener() hinzugefügt wurden.

Abbrechen des Standardverhaltens

Die meisten Event-Handler, die Event-Handler-Eigenschaften zugewiesen wurden, können das Standardverhalten des Ereignisses abbrechen, indem sie false zurückgeben:

textarea.onkeydown = () => false;

Damit eine Event-Handler-Eigenschaft das Standardverhalten des error-Ereignisses von Window abbricht, muss sie dagegen true zurückgeben:

window.onerror = () => true;

Wird das Standardverhalten abgebrochen, erscheint der Fehler nicht in der Konsole. Die Ausführung des aktuellen Skripts wird dennoch beendet.

Argumente

Die Signatur des Event-Handlers unterscheidet sich zwischen addEventListener() und onerror. Der an Window.addEventListener() übergebene Event-Handler erhält ein einzelnes ErrorEvent-Objekt. Der onerror-Handler erhält dagegen fünf Argumente, die den Eigenschaften des ErrorEvent-Objekts entsprechen:

message

Ein String mit einer für Menschen lesbaren Fehlermeldung, die das Problem beschreibt. Entspricht ErrorEvent.message.

Hinweis: In HTML registriert das Event-Handler-Attribut im Inhalt onerror des <body>-Elements error-Event-Listener für window (nicht für das <body>-Element). Bei diesem Event-Handler heißt der erste Parameter event statt message, obwohl er ebenfalls einen String enthält. Um die Fehlermeldung zu protokollieren, verwenden Sie also <body onerror="console.error(event)">.

source

Ein String mit der URL des Skripts, das den Fehler verursacht hat.

lineno

Eine Ganzzahl mit der Zeilennummer der Skriptdatei, in der der Fehler aufgetreten ist.

colno

Eine Ganzzahl mit der Spaltennummer der Skriptdatei, in der der Fehler aufgetreten ist.

error

Der ausgelöste Fehler. In der Regel ein Error-Objekt.

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;
};

Dieses besondere Verhalten tritt nur beim onerror-Event-Handler von window auf. Der Handler Element.onerror erhält weiterhin ein einzelnes ErrorEvent-Objekt.

Beispiele

Interaktives Beispiel

HTML

<div class="controls">
  <button id="script-error" type="button">Generate script error</button>
  <img src="bad-image.jpg" class="bad-img" alt="I don't exist" />
</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>

body {
  display: grid;
  grid-template-areas: "control log";
}

.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

button {
  height: 2rem;
  margin: 0.5rem;
}

img {
  width: 0;
  height: 0;
}

JavaScript

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", () => {
  throw new Error("This is a script error");
});

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Dieses Ereignis bei Element-Zielen: error-Ereignis
• Window: unhandledrejection-Ereignis