Realtime Error Tracking im Web mit Sentry.io

Komplett fehlerfrei laufende Anwendungen sind wohl der Traum eines jeden Entwicklers, aber leider bei weitem keine Realität. Im Entwicklungsprozess lässt es sich kaum vermeiden, dass sich Bugs in den Code einschleichen. Treten diese Bugs im Produktivsystem auf, ist das umso ärgerlicher. Spätestens wenn sich Benutzer beschweren oder die Anwendung sogar komplett meiden, ist der Ärger und der Druck, den Bug zu beheben, groß.

Im besten Fall wird das Fehlverhalten gemeldet, idealerweise sogar mit Screenshot und einer Beschreibung der Aktionen, die dazu geführt haben. Im schlimmsten Fall kriegt man als Betreiber oder Entwickler der Anwendung nicht mal etwas vom Fehlverhalten mit und plötzlich bleiben die Benutzer aus. So weit soll es natürlich gar nicht erst kommen. Wie lässt sich das also vermeiden?

Dass man als Entwickler nichts von dem Fehler mitbekommt, ist ein besonderer Fall, der so vor allem in der Frontend-Entwicklung auftritt, da man keine Kontrolle über die Umgebung hat, in der die Anwendung läuft. Geht man davon aus, dass man zuverlässig mitbekommt, wenn Fehler auftreten, so tappt man bei der Ursachensuche und -behebung erstmal im Dunkeln. Wer schon mal einen Fehler beheben musste, ohne ausreichend Informationen zu haben, um ihn zu reproduzieren, weiß, wie unangenehm und schwierig die Situation ist.

Neben den Benutzer-Aktionen, die den gesuchten Fehler verursachen, gibt es weitere Faktoren, die für das Fehlverhalten ausschlaggebend sein können. Darunter fallen u.a. Version der Anwendung, Datum und Uhrzeit und der Benutzerkontext. Ein Faktor kommt im Web besonders zum Tragen: die Betriebssystem-Browser-Kombination. Der Browser – als Umgebung, in der die Anwendung läuft – ist oftmals der Grund, dass es schwerfällt, den Fehler überhaupt erst zu finden.

Um solche Fehler mitzubekommen und alle nötigen Informationen zu sammeln, die man benötigt, um den Fehler zu beheben, muss man entweder eine enorme Menge manueller Arbeit investieren und eine eigene Tracking-Lösung entwickeln oder auf kostenpflichtige, etablierte Tools wie z.B. Sentry.io zurückgreifen. Sentry unterstützt eine Vielzahl der gängigen Sprachen und Frameworks und bietet eine gute Dokumentation, welche den Einstieg in Setup und Verwendung erleichtert. Zudem bietet Sentry einen „Free plan“, der es erlaubt, Sentry unverbindlich zu nutzen und zu testen.

Getting started

Der erste Schritt für eine Integration von Sentry ist, das dazugehörige Package mit NPM wie folgt zu installieren:

npm install --save raven-js

Danach steht einem das Raven-Modul zur Verfügung, welches mit einem DSN (Data Source Name) initialisiert werden muss. Der DSN dient als eine Art Token und findet sich in den Projekteinstellungen.

Raven.config('your DSN').install();

Damit ist Sentry initialisiert und trackt Fehler mit dem folgenden Aufruf:

Raven.captureExcecption(error);

Wird ein Fehler erfasst, taucht dieser in Echtzeit in den Sentry Issues auf. Ein Error Report enthält bereits grundlegende Informationen wie Browser-Betriebssystem-Kombination, Uhrzeit und URL. Sentry reichert den Report mit weiteren Informationen an.

Raven.setExtraContext({
    someKey: someData,
});

Um Benutzerinformationen hinzuzufügen, bspw. wenn der Benutzer sich erfolgreich eingeloggt hat, muss der Code um Folgendes ergänzt werden:

Raven.setUserContext({
    email: userMail
});

Ein weiteres tolles Feature ist das Erfassen von Versionen, welche dabei helfen, den Fehler einer Version der Anwendung zuzuordnen.

Raven.setRelease('version-1')

Für uns hat es sich als sehr sinnvoll herausgestellt, die Git Commit ID als Release-Version anzugeben. So können wir einen Fehler genau einem Commit zuordnen.

Weiterhin bietet Sentry die Möglichkeit, das Environment, auf dem der Fehler aufgetreten ist, anzugeben.

Raven.setEnvironment('production')

So können Error Reports pro Environment anders behandelt werden. Dies ist besonders hilfreich was die Integration anderer Dienste angeht.

Source Maps

Um das Debuggen zu vereinfachen, nimmt Sentry Source Maps entgegen, mit denen man den Source Code in der ursprünglichen untransformierten Form ansehen kann. Dafür benötigt man – lädt man die Artefakte manuell hoch – die bereits erwähnte Version des Releases, damit die richtige Source Map zum richtigen Release zugeordnet werden kann.

Integrations

Sentry bietet außerdem eine Vielzahl von Integrationsmöglichkeiten. Eine Integration, die für viele Teams hilfreich ist, ist Slack. In Slack legt man Regeln fest, wie Fehler in einem Slack Channel mitgeteilt werden. So muss man nicht selbst aktiv in Sentry nach den Fehlern suchen, sondern wird automatisch und zeitnah benachrichtigt. Um die Fehleranalyse noch müheloser zu machen, integriert man SessionStack in Sentry. SessionStack nimmt Interaktionen mit der Anwendung auf, inklusive JavaScript Exceptions, fehlerhaften Netzwerk-Requests und Debug Messages. Diese Aufnahmen werden direkt in Sentry wiedergegeben, um dem Problem auf den Grund zu gehen.

Da Sentry Benutzerdaten erfasst und aufbereitet, ist natürlich auch Datenschutz ein Thema. Die Nutzungsbedingungen und Datenschutzerklärung von Sentry sind sehr ausführlich unter folgendem Link nachzulesen: Sentry.io Datenschutzbedingungen.

Mittlerweile ist Sentry bei nahezu allen von uns entwickelten Web-Apps im Einsatz und hilft wesentlich dabei, Fehler zu tracken und ihre Ursache zu ermitteln. Wir sind nicht mehr darauf angewiesen, dass Nutzer Fehler melden, bei denen man zunächst – je nach Beschreibung – im Dunkeln tappt. Ein Error Tracking Tool wie Sentry hilft enorm dabei, eine Web-App stabiler zu machen und so das Benutzererlebnis zu verbessern. Somit ist es – für jeden, der Web-Apps entwickelt und betreibt – empfehlenswert, ein Error Tracking Tool in Betracht zu ziehen.

Mehr zu dem Thema gibt es in unserem TechTalk Realtime Error Tracking in Web-Apps zu sehen.