Javascript: Clientseitige Fehler tracken
12. Mai 2007 | In: Javascript
Bei der Entwicklung von Webseiten sind die Teile einer Anwendung, die Clientseitig ausgeführt werden immer der Flaschenhals des Projekts, da Fehler, die dort durch Browserinkompatibilitäten auftreten meist das Html, die Stylesheets oder das verwendete Javascript betreffen. Solche Fehler sind oft nur sehr schwer aufzuspüren, da sich die x möglichen Client-Konfigurationen nicht alle nachstellen lassen.
Um zumindest teilweise auf auftretende Javascript-Fehler reagieren zu können und die programmierten Scripte anzupassen, ist es sinnvoll, Javascript-Fehler zu tracken.
Das geht z.B. über einen Zählpixel (Web-Bug) und die Javascript Methode window.onerror, die immer dann ausgelöst wird, wenn im Dokument ein Javascript-Fehler auftritt.
window.onerror bietet nicht nur die Information, das ein Fehler aufgetreten ist, sonder auch noch eine erklärende Fehlermeldung, die Url des Dokuments, in dem der Fehler auftrat und einen Fehler-Code.
Zusätzlich zu diesen Informationen macht es Sinn, den User-Agent und das Betriebssystem mit zu tracken. Natürlich können beliebige Information wie Cookies, Farbtiefe, die Bildschirmauflösung, welche Plugins in welcher Version installiert sind, je nach Bedarf mit getrackt werden.
Der dafür notwendige Javascript-Code sieht so aus:
window.onerror = function( m, u, n ) { /// Url zum Tracking-Script var url = '/track.php?type=1'; /// Hänge weitere Information an url += '&m=' + escape( m ); url += '&u=' + escape( u ); url += '&n=' + escape( n ); url += '&dt=' + escape( document.title ); url += '&dr=' + escape( document.referer ); url += '&os=' + escape( navigator.platform ); /// schreibe einen Web-Bug document.write( '<img src="' + url +'" style="display:none;" width="1" height="1" />' ); // alert( 'Fehler wurde getrackt: ' + m + ' (' + n + ')\nUrl: ' + u ); /// liefere einen gültigen Wert zurück! return( true ); } |
Bei jedem auftretendem Javascript-Fehler wird unsere Tracking-Funktion aufgerufen und meldet die gesammelten Informationen an ein serverseitiges Script, was diese Aufzeichnet.
window.onerror ist dem Internetexplorer und dem Firefox bekannt, der Opera unterstützt sie leider nicht. Auch muss man bedenken, das window.onerror nur Fehler abfängt, die während der Scritpabarbeitung auftauchen, setzt man falsche Klammer, wird das nicht erkannt. Aber ein solch fehlerhates Scritp wird ja auch keiner online stellen :)
Alternativ kann man über eine eigene Methode Fehler im aktuellen Script auch gänzlich unterdrücken, indem man den Errorhandler wie folgt umbiegt:
window.onerror = function() { return( true ); } |
Testen kann man das Script, indem man mutwillig einen Fehler produziert, z.B. versucht ein Objekt einer nicht vorhandenen Klasse zu instanzieren. Dazu fügt man den Code innerhalb eines <script>-Tags in eine Html-Datei ein und zusätzlich die Foglende Zeile:
var MyPrivateError = new MyPrivateError(); |
Ein Demo kann man hier ansehen und hier inklusive der pasenden “track.php” herunterladen

Schreib einen Kommentar
Fülle das Kommentar-Formular vollständig aus oder melde dich über Twitter oder Facebook an.