Javascript onerror | onabort: Fehler und fehlende Bilder

Wie onabord 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.

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.

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 mit onerror erkennen

Ein fehlendes oder fehlerhaftes Bild wird von allen Browsern erkannt.

<img src="hallo" width="100" height="100" alt="Bild hallo" />
…
window.addEventListener ('load', function () {
   var imgs = document.querySelectorAll('img');
   for (var i=0; i<imgs.length; i++) {
      imgs[i].onerror = function () {
         document.querySelector('#emsg').innerHTML += 'Fehlendes Bild ' + 
         imgs[i].getAttribute ('src');
      }
   }
});

Wichtig ist, dass onerror beim Prüfen auf fehlende Bilder erst aufgerufen wird, wenn das Dokument vollständig geladen ist.

onerror Attribute

message

Fehlermeldung

filename

Speicherort und Pfad 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 Ladens einer Seite

Event für IMG

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

Javascript onabort ruft einen Event Handler auf, wenn der Benutzer das Laden einer Seite – mit dem Stop-Button des Browsers oder durch Klicken eines Links – abbricht und damit das Laden des Bildes abbricht.

<img id="oa" src="maske.png" alt="" width="600" height="311" />

<script type="text/javascript" charset="utf-8">
var oa = document.getElementById("oa");
oa.onabort = function() {
	alert('abort!!!')
}
</script>

onabort funktioniert nur in Internet Explorer, nicht aber in Firefox oder Safari.

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