Ü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.