Javascript onerror | onabort

Javascript onerror – Fehler beim Compilieren

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

Javascript onerror aktiviert einen Event Handler, wenn ein Fehler bei der Scriptausführung auftritt oder ein Bild nicht geladen werden kann. Streng genommen ist onerror kein Event, sondern erkennt nur Scriptfehler bei der Compilierung. window.onerror wird nur durch Scriptfehler gezündet, aber nicht durch Benutzerfehler.

18-12-15 SITEMAP

Javascript-Fehler: onerror

Wie onabort war onerror ursprünglich kein Standard-Event, sondern wurde von Microsoft für Internet Explorer implementiert. Heute erkennt onerror Scriptfehler und fehlerhafte Bilder in allen aktuellen Browsern zuverlässig.

onerror ist an das window-Objekt gebunden und kann nicht in einem HTML-Tag als HTML-Attribut behandelt werden. window.onerror kommt heute mit 5 (früher nur mit 3) indirekten Parametern.

window.onerror = function (errorMsg, 
                           url, 
                           lineNumber, 
                           column, 
                           errorObj) {
…
}

Wenn ein Script nicht wie vorgesehen reagiert, öffnen wir die Console, um nachzusehen, ob und welche Fehler ausgegeben wurden. Das ist effizienter als das Öffnen einer Dialogbox mit alert und die manuelle Suche nach Syntaxfehlern in der Steinzeit von Javascript, aber während der Entwicklung und beim Testen auch schon wieder lästig.

Fehlermeldung in der Browser-Console

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.

Scriptfehler im Browserfenster

Mit HTML5 hat sich window.onerror gemausert und unterstützt (zumindest in Firefox) 5 Parameter, also zwei weitere neben den altdienten Parametern der Fehlernachricht, der Zeile und der Datei, in der ein Fehler auftratt.

Safari und IE9 machen noch nicht richtig mit und geben weiterhin nur die Zeilennummer aus (also auch nicht mehr als die Console), während Chrome und Firefox vorangehen. Chrome und IE10 geben die Spaltennummer heraus, Firefox zeigt bereits den Stack Trace an – 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.

console.log ('Fehler:' + errorMsg + 
             '\nScript: ' + url + 
             '\nZeile: ' + lineNumber + 
             '\nSpalte: ' + column + 
             '\nStackTrace: ' +  errorObj
);
Anzeige des Scriptfehlers in Firefox
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

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. Zwar unterstützen alle Browser das HTML picture-Tag und suchen sich aus den angebotenen Bildformaten das passende aus, aber was ist, wenn das picture-Tag nicht eingesetzt werden kann?

JPG und Avif vergleichen – JPEG JPG und Avif vergleichen – Avif

Javascript Image Comparison (GitHub) von Max Ulyanov vergleicht zwei Bilder miteinander, in diesem Fall ein JPEG- und ein AVIF-Format. AVIF wird zurzeit nur von Chrome und Opera unterstützt. In Browsern, die AVIF nicht unterstützen, wird ein JPG mit einer Nachricht eingesetzt.

Wichtig ist, dass onerror beim Prüfen auf fehlende Bilder / nicht unterstützte Dateiformate erst aufgerufen wird, wenn das img-Element bereits im HTML geladen ist.

<script>
let hasAvif = false;
let img = new Image ();

img.onload = function () {
	hasAvif = !! (img.height > 0 && img.width > 0);
};

img.onerror = function () {
	hasAvif = false;
	document.querySelector ("img#exchange").outerHTML = '<img class="comparison-image replaced" src="DSC09115-720-false.jpg" width="1260" height="730" srcset="DSC09115-720-false.jpg 720w,DSC09115-1440-false.jpg 1260w" sizes="(min-width:1440px) 1440px, 100vw" alt="Dieser Browser unterstützt AVIF nicht">';
}

img.src = 'img/DSC09115-720.avif';
</script>

onerror Attribute

message
Fehlermeldung als Text
filename
Speicherort und URL zur Scriptdatei
lineno
Zeilennummer
colno HTML5
Spaltennummer
error HTML5
Das Objekt, das den Fehler verursacht

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
Console Search Emulation Rendering Uncaught SyntaxError: Unexpected token ) www.mediaevent.de/ javascript/myerrorscript.js:3 Bild hallo ?