Javascript onerror | onabort

Javascript-Fehler: error

Scriptfehler sind der Normalfall beim Programmieren. Mit der Ausnahme von Evgeny, der meterlange Programme ohne Fehler hinlegt, bremsen uns Fehler wieder und wieder aus. Dabei erweitern Fehler permanent die Erfahrung, denn wir korrigieren, experimentieren und recherchieren bei jedem Fehler.

window.onerror wird nur durch Scriptfehler und fehlende Ressourcen gezündet, aber nicht durch Benutzerfehler. Heute behandelt try-catch vorausschauend mögliche Fehler, aber jeder Fehler, die nicht von einer try-catch-Anweisung abgefangen wird, erzeugt ein error-Event auf dem Window-Objekt.

Das error-Event ist an das window-Objekt gebunden und kann nicht in einem HTML-Tag als HTML-Attribut behandelt werden. window.onerror kommt heute mit fünf (früher nur mit drei) indirekten Parametern.

window.onerror = function (errorMsg, 
                           url, 
                           lineNumber, 
                           column, 
                           errorObj) {
    console.log ("Ein Fehler ist aufgetreten:", errorMsg);
    console.log ("In Datei:", url);
    console.log ("Zeile:", lineNumber, "Spalte:", column);
    console.log ("Objekt:", errorObj);
    return true; // verhindert die Anzeige im Browser
}

Wenn ein Script nicht wie vorgesehen reagiert, öffnen wir die Konsole, um nachzusehen, ob und welche Fehler ausgegeben wurden.

Wenn das Script minifiziert ist, ist eine Fehlermeldung für Zeile 3, auf der sich vielleicht 100 oder mehr Anweisungen drängeln, einfach nur nutzlos. Darüber hinaus testen wir Scripte auch auf den mobilen Geräten, wo eine Konsole nicht unbedingt zur Verfügung steht.

Am Ende treten Fehler im Script trotz aller Tests durch eine unvorhergesehene Konstellation oder Nutzung auf und offenbaren sich dem Entwickler vielleicht nie. Für solche Fälle bietet die vorausschauende Fehlerbehandlung mit dem error-Event ein Ausweichmanöver – z.B. bei einem fehlenden Bild ein Ersatzbild einzusetzen.

Promise Fehlerbehandlung und Verwendung mit try-catch

onerror erfasst Fehler bei Promises über die unhandlerejection, wenn Fälle entdeckt werden sollen, in denen ein Promise fehlschlägt.

window.addEventListener('unhandledrejection', event => {
	console.log('Unbehandelte Zurückweisung:', event.reason);
});

onerror ist auch eine Ergänzung zu try-catch, wenn Fehler abgefangen werden sollen, die nicht lokal innerhalb eines Blocks behandelt werden können.

try {
	someFunction();
} catch (error) {
	console.error ("Fehler in try-catch-Block", error.message);
}

window.onerror = function (message, url, line, column, error) {
	console.log("Globaler Fehler:", message);
}

Scriptfehler im Browserfenster

In den modernen Browsern hat sich window.onerror gemausert und unterstützt in Firefox und Chrome fünf Parameter, also zwei weitere neben den altdienten Parametern der Fehlernachricht, der Zeile und der Datei, in der ein Fehler auftratt.

Mac OS Safari macht nicht mit und gibt weiterhin nur die Zeilennummer aus, während Chrome und Firefox vorangehen und den Stack Trace anzeigen – das Fehler-Objekt.

myerrormsg.innerHTML = 
window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
	myerrormsg.innerHTML = `
		Fehler:  ${errorMsg}
		Script: ${url}
		Zeile: ${lineNumber}
		Spalte: ${column}
		StackTrace: ${errorObj}`;
}

Nur die Scriptfehler von lokalen Scripten werden angezeigt. Wenn Scripte auf einem anderen Server (z.B. einem CDN) liegen, sind die Fehlermeldungen aus Sicherheitsgründen reduziert und in vielen Fällen gibt es nur ein schlichtes verschwiegenes Script Error.

Die Fehlermeldung lässt sich auch diskret auf die Konsole packen und auch leicht formatieren. Dennoch:

console.log ('Fehler:' + errorMsg + 
             '\nScript: ' + url + 
             '\nZeile: ' + lineNumber + 
             '\nSpalte: ' + column + 
             '\nStackTrace: ' +  errorObj
);

Fehler: SyntaxError: missing ; after for-loop initializer
Script: https://www.mediaevent.de/javascript/myerrorscript.js
Zeile: 6
Spalte: 12
StackTrace: SyntaxError: missing ; after for-loop initializer

Syntaxfehler

Bei Syntaxfehlern wird das Script nicht ausgeführt und die Fehlerursache erscheint in der Browser-Konsole unter den Entwickler-Werkzeugen der Browser. Allerdings beobachten die Browser das Laden externer Ressourcen, seien es nun Scripte, iframe-Elemente, PDF-Dokumente oder Bilder mit zwei Events:

• onload – Laden erfolgreich,
• onerror – Fehler sind aufgetreten

Fehlendes Bild / nicht unterstütztes Dateiformat mit onerror erkennen

Ein fehlendes Bild oder ein Bildformat, das vom Browser nicht unterstützt wird, erkennen alle Browser. Wichtig ist, dass beim Prüfen auf fehlende Bilder / nicht unterstützte Dateiformate onerror erst aufgerufen wird, wenn das img-Element bereits im HTML geladen ist.

onerror wird nur dann ausgelöst, wenn ein Fehler auftritt, während der Browser versucht, das Bild zu laden. Da fehlende Bild ärgerlich für den Besucher / Benutzer / Käufer sind, sorgt ein Ersatzbild für einen besseren Eindruck. Auch gerade für Nutzer mit Sehbehinderung ist ein guter alt-Text für das Bild ein Gewinn.

window.onload = function () {
	const images = document.querySelectorAll("img");
	document.querySelector (".report").innerHTML = 
		`${images.length} img-Element(e) im Dokument`;
	
	for (const item of images) {
		item.onerror = function (evt) {
			document.querySelector (".report").innerHTML += 
				`
${this.src} nicht geladen`;
			item.src = "svg/missing.svg";
		}
	}
}

onerror Attribute

Informationen zum event

target

Das Objekt, zu dem das Ereignis ursprünglich gesendet wurde

eventPhase

Phase, in der das Ereignis bearbeitet wird: AT_TARGET, BUBBLING_PHASE, CAPTURING_PHASE

bubbles

true, wenn das Ereignis nach oben steigen kann

cancelable

Nein

timeStamp

Zeitpunkt in Millisekunden, zu dem das Ereignis eingetreten ist

onabort: Abbruch beim Laden

Event für img, video, object, audio, embed

onabort tritt ein, wenn der Benutzer das Laden einer Seite, eines Videos oder Bildes mit dem Stop-Button des Browsers oder durch Klicken eines Links abbricht.

<video controls id="gizmo">
   …
</video>

<script>
let gizmo = document.getElementById("gizmo");
gizmo.onabort = function() {
	alert('Laden des Videos abgebrochen')
}
</script>

onabort Attribute

target

Objekt zu dem das Ereignis ursprünglich gesendet wurde

cancelable

Nein/dd>

timeStamp

Zeit in Millisekunden, zu der das Ereignis eingetreten ist