JavaScript Fehler automatisch loggen

Wer auf seiner Seite viel JavaScript in Einsatz hat, wird das Problem kennen: Leute, die mit uralt-Browsern unterwegs sind haben Probleme mit einigen Teilen der Website. Das liegt oft auch daran, dass zum Beispiel JavaScript-Befehle im Browser nicht funktionieren. Wer von den Benutzern darauf hingewiesen wird, kann sich glücklich schätzen. Die meisten Leute verlassen die Seite einfach wieder.

Um solche Probleme herauszufinden, gibt es in der Webanalyse Mittel, um die Conversion-Rate und die Bounce-Rate für diverse Browser zu vergleichen. Schneidet ein Browser schlecht ab, sollte man damit mal etwas genauer testen. Klingt ja schön und gut, doch muss die Seite bereits eine Weile online sein, um dort gerade für ältere Browser eine aussagekräftige Masse an Traffic zu bekommen.

Neben JavaScript sind es auch CSS-Fehler, die die Conversion-Rate senken können. Beim defekten JavaScript sind die Ergebnisse allerdings oftmals problematischer: Wichtige Funktionen sind gar nicht benutzbar oder Tracking-Codes laufen nicht richtig, wodurch man Ärger mit seinen Affiliates bekommen könnte.

Die Lösung ist ganz leicht: Man lässt sich einfach benachrichtigten, falls irgendwo auf der Seite ein JavaScript-Fehler auftritt. Dazu bietet JavaScrtipt ein Event, mit dem man auf Fehler reagieren kann und so zum Beispiel per Ajax einen Log-Eintrag erstellen kann.

<!DOCTYPE html>
<html>
  <head>		
    <script>
      window.onerror = function myErrorHandler(errorMsg, url, line)
      {
        setTimeout(function(){
          document.getElementById("errors").innerHTML += 
            "<strong>" + errorMsg + '</strong><br />'
            + "<em>" + url + ":" + line + "</em><br /><br />";
        },1);
      }
      alart('test');
    </script>
  </head>
  <body>
    <div id="errors">
    </div>
  </body>
</html>

In diesem Beispiel werden über window.onerror die JavaScript-Fehler abgefangen. Dieser Code sollte relativ weit oben im HTML-Head stehen, um auch alle Fehler mitzubekommen. Ich schreibe hier erst mal den Fehler inkl. Position in ein div. Das setTimout ist da, da die Seite im Head noch nicht zu Ende geladen hat und somit noch nicht in das div geschriben werden kann.

Nun wollen wir natürlich nicht dem User noch zeigen, dass dort ein Fehler aufgetreten ist (außer bei uns selbst), sondern ein Script im Background aufrufen, was dann z.B. eine Mail schickt. Das kann man zwar theoretisch per Ajax machen, ich rate aber davon ab, weil meine Erfahrung gezeigt hat, dass auch hier noch Probleme auftreten können (begonnen beim XSS).

Stattdessen rufe ich einfach eine Url im verstecken IFrame auf, wo die Details per GET-Parameter übergeben werden. Zusätzlich habe ich das Script bereits in ein neues JS-File eingebaut, damit man es leichter in seine Websites integrieren kann. Die error.js sieht dann so aus:

window.onerror = function myErrorHandler(errorMsg, url, line)
{
  iframe = document.createElement("IFRAME");
  iframe.setAttribute("src", "send_error.php?url="+escape(url) + "&line=" + escape(line) + "&message=" + escape(errorMsg) + "&user_agent=" + escape(navigator.userAgent));
  iframe.width = 1;
  iframe.height = 1;
  iframe.style.position = 'absolute';
  iframe.style.left = '-100px';
  setTimeout(function(){
    document.body.appendChild(iframe);
  },1);
}

Eingebunden wird die Datei dann so:

<!DOCTYPE html>
<html> 
  <head>
    <script src="error.js"></script>
    <script>
      alart('test');
    </script>
  </head>
</html>

In den GET-Parametern kann in der send_error.php nun einfach auf die Fehlermeldung und dem UserAgent zugegriffen werden, so dass diese in eine Datenbank geschrieben oder per Mail versand werden kann.

Wert will kann auch noch weitergehen und Bildschirmauflösung und ähnliches mitsenden. Es sollte aber bedacht werden, dass Fehler die der Log selbst verursacht nicht geloggt werden und im schlimmsten Fall sogar eine Rekrusion auslösen und damit mehr schaden als helfen. Aus diesem Grund sollte der Code so simpel wie möglich sein und in vielen Browsern getestet werden. Auch Bibliotheken wie jQuery oder Komprimierungstools wie Minify sollten nicht benutzt werden, da auch diese beschädigt sein könnten.

Am Server sollte man aus Sicherheitsgründen die Anzahl der Fehler pro IP pro Stunde begrenzen, damit ein Angreifer nicht so leicht einfach ganz viele Logs erstellen kann.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

JavaScript Fehler automatisch loggen

Über uns

Cookie-Einstellungen