Detail

Fehlerbehandlung in Webapplikationen (Teil 2)

Überblick

Im vorherigen Artikel haben wir aufgezeigt, dass die Fehleranalyse in JavaScript sehr aufwändig sein kann. Mit dem Open Source Tool Sentry von Functional Software, Inc. kann man viele, wenn nicht sogar alle Anforderungen an eine umfassende Fehleranalyse und -Reporting Lösung erfüllen.

 

  • Monitoring
  • Code Analyse
  • Bug Tracking
  • User Feedback

 

Sentry unterstützt verschiedene Plattformen, z.B. PHP, Node, Python, .NET etc. Hier wollen wir uns aber auf JavaScript fokussieren und Sentry in eine ExtJs App einbinden. Für React und Angular bietet Sentry eine native Unterstützung und damit eine sehr leichte Einbindung in die eigene App. Wir werden aber sehen, dass dies auch mit ExtJs und generell in JavaScript sehr leicht umzusetzen ist.

Einsatz in Sencha ExtJS

Als Open-Source Lösung ist Sentry kostenlos einzusetzen. Die Server Software für das Dashboard und Clients für verschiedene Plattformen sind als Download verfügbar. Es wird aber auch ein komplettes Hosting angeboten. Der Zugang für eine Einzelperson ist kostenlos und für einen ersten Einblick ist der Funktionsumfang ausreichend. Der Zugang lässt sich hier einrichten. Nach der Anmeldung kann man in den Einstellungen unter Error Tracking seinen persönlichen DSN (Data Source Name) einsehen. Dies ist im Prinzip eine URL worunter der Sentry Client seine Konfiguration abruft. Für JavaScript ist es der Client Raven.js. Dieser wird für die Kommunikation mit dem Sentry Dashboard genutzt, d.h. er erfasst und protokolliert Fehler und stellt eine umfassende API zur Verfügung, mit der man das Error Reporting nach seinen eigenen Wünschen anpassen kann.

In der index.html der Ext Applikation binden wir den Raven.js Client ein und über die DSN wird dieser über die globale Variable Raven konfiguriert. Über Raven lässt sich der Client vor allem zusammen mit der Dokumentation bequem benutzen:

 

script src="https://cdn.ravenjs.com/3.19.1/raven.min.js" crossorigin="anonymous">



Ist Sentry bzw. Raven korrekt konfiguriert, kann man seinen Errorhandler (siehe Teil 1: "Fehleranalyse in Webapplikationen") entsprechend anpassen und Sentry die Exception übergeben:

/**
 * init der Errorhandler Klasse
 * @return {[type]}
 */
init: function(){
    // bind error handler
    window.onerror = Ext.Function.bind(me.handleError, this);
}

/**
 * handleError
 *
 * @param message
 * @param file
 * @param line
 * @param column
 * @param errorObj Exception Klasse
 */
handleError:  function (message, file, line, column, errorObj) {
    if (Raven) {
        Raven.captureException(errorObj);
        Raven.showReportDialog();
    }
    // evtl weitere Fehlerbehandlung
}

 

Alle Exceptions werden an den Sentry Server weitergeleitet und dort im Dashboard gesammelt. Optional erstellt Sentry für Tools wie z.B. Jira oder Redmine eine Nachverfolgung, so dass gleich ein passendes Ticket erstellt wird. Dabei versucht Sentry, Vorfälle korrekt in nur jeweils ein Ticket zusammenzufassen.

Sicherheitsaspekte

Neben dem Dashboard auf sentry.io ist es auch möglich, einen eigenen Sentry Server aufzusetzen, womit man volle Kontrolle über seine Daten behält. Zudem werden standardmäßig Kreditkarten Daten erkannt und vom sogenannten Data Scruber herausgefiltert. Auch lassen sich eigene Datenfelder konfigurieren, die zusätzlich gefiltert werden. Sehr hilfreich bei sensiblen Daten, die andernfalls im Klartext im Fehlerreporting auftauchen würden.

Weitere Tools

Im dritten und letzten Teil dieser Blogartikel-Reihe werden wir RootCause von Bryntum vorstellen.

Cookie-Einstellungen

Auch wir verwenden Cookies. Durch die weitere Nutzung unserer Website sind Sie mit der Verwendung dieser Cookies einverstanden. Darüber hinaus sind auf dieser Website Dienste anderer Dienstleister eingebunden. Dazu werden ebenfalls Cookies gesetzt, die sie jeder Zeit ändern können. Wir verwenden keine Cookies für Werbezwecke oder Social Media. Weitere Details: Datenschutzerklärung und Impressum

Details anzeigen

Name Cookie Dauer Zweck
eye-cookie Consent Cookie 10 Jahre Dieses Cookie speichert Informationen zum Verwalten Ihrer Cookie-Einstellungen für diese Webseite
Details anzeigen

Wir verwenden Dienste von Drittanbietern.

Name Cookie Dauer Zweck
Goolge Maps google-maps Google Maps Cookie
Google Recaptcha google-recaptcha
Google Analytics GA