Hallo Freunde der Web-Entwicklung. Heute soll es um die Fehlerbehandlung in Javascript (folgend JS) gehen. JS wird heute nicht mehr einfach nur zum Validieren von Formularen oder anderen kleineren Spielereien genutzt. In vielen modernen Web-Anwendungen ist JS zentraler Bestandteil der Site. Schaut man sich z. B. GMail an, stellt man fest, dass es schon echte JS-Anwendungen geworden sind, mit denen wir User im Web interagieren. Folglich können hier dann auch schon mal "echte" schwerwiegendere Fehler auftreten. Realisiere ich z. B. einen Teil der Registrierungs-Logik in JS und aufgrund eines Fehlers kann der Prozess nicht abgeschlossen werden, kann das schon mal umsatzkritisch werden. Darauf muss auch ein Frontend Entwickler entsprechend reagieren und vorbereitet sein.
Fehler in JS abfangen
JS stellt uns von Haus aus den nützlichen Event-Handler onerror im window Objekt zur Verfügung. Eine einfache Methode JS Fehler abzufangen könnte so aussehen:
window.onerror=function(){
alert('Ein Fehler ist aufgetreten!')
}Das ist natürlich nur zu Testzwecken geeignet. Auf produktiven Umgebungen sollte der Fehler verarbeitet werden. Also z. B. in eine Log-Datei oder in eine Datenbank geschrieben werden.
Fehlerdetails
Dem onerror Handler können drei Parameter übergeben werden:
window.onerror=function(msg, url, line_number){
alert('Error message: '+msg+'nURL: '+url+'nLine Number: '+line_number);
}msg steht für die konkrete Fehlerbeschreibung.
url besagt, in welcher Datei der Fehler aufgetreten ist
und line_number gibt Auskunft darüber, in welcher Zeile der Fehler aufgetreten ist.
Error Handling platzieren
Wo den Event-Handler konkret platzieren fragt ihr euch nun? Um keine Frontend Performance Regeln zu brechen, müsste man den Code natürlich in den Footer geben. Dort ist er dann aber weniger bis überhaupt nicht nützlich. Denn was passiert, wenn während des Renderings einer Seite bereits JS-Fehler auftreten und das Fehler-Handling erst im Footer greift? Das JS-Error-Handling sollte demzufolge vor allen anderen JS-Files eingebunden werden. Idealerweise als separates Modul oder Plugin.
Plugin
Es gibt natürlich schon diverse Plugins die ein JS Error Handling abdecken. Eines wäre z. B. hier zu finden:
Vor- und Nachteile
Vorteile sind natürlich das ein Seitenbetreiber frühzeitig JS Fehler erkennt und diese beseitigen kann, bevor (oder wenn überhaupt) er von verärgerten Usern darauf hingewiesen wird. Außerdem ist ein Fehler für den User nicht sichtbar wenn er mittels onerror abgefangen wird. Das kennen wir aus dem Backend. Hier ist es schon längst gängige Praxis Fehler abzufangen und darauf zu reagieren, statt sie für den User sichtbar auf der Webseite auszugeben.
Ein Nachteil ist z. B., dass so ein JS-Error-Log schnell sehr voll werden kann, wenn jeder Fehler protokolliert wird und eine Seite stark frequentiert ist. Fehler die von Browsern durch Addons und Bookmarklets ausgelöst wurden landen nämlich auch im onerror-Event. Hier muss entsprechend gefiltert und aufgeräumt werden.
Fazit
Eine JS Fehlerbehandlung lohnt sich in jedem Fall. Gerade wenn geschäftskritische Sites und Module in JS realisiert wurden. Fehler schlagen nicht beim User auf und gehen dort unter, sondern landen beim Seitenbetreiber, der sie auswerten kann. Frisch ran ans Werk ;)