JavaScript-Fehlerverfolgung

Erfassen Sie automatisch JavaScript-Fehler auf Ihrer Website mit detailliertem Kontext für schnelleres Debugging.

Zenovay Fehler-Dashboard mit gruppierte JavaScript-Fehlern, Anzahl und Status. — JavaScript-Fehler werden hier gruppiert mit Vorkommenszahlen, betroffenen Benutzern und Lösungsstatus angezeigt.

Fehlerverfolgung aktivieren

Die Fehlerverfolgung erfasst automatisch nicht abgefangene JavaScript-Fehler und unbehandelte Promise-Ablehnungen, sobald sie für eine Website aktiviert wird. Es ist Teil des gleichen Tracking-Scripts, das Sie bereits installiert haben:

<script
  defer
  data-tracking-code="YOUR_TRACKING_CODE"
  src="https://api.zenovay.com/z.js"
></script>

Aktivierung

Die Fehlerverfolgung wird durch ein Feature-Flag für jede Website gesteuert:

Öffnen Sie das Dashboard Ihrer Website und gehen Sie zu Einstellungen → Erweitert
Aktivieren Sie unter Feature Flags die Option Fehlerverfolgung

Das war's. Es ist keine Script-Änderung erforderlich, das Flag wird dem Tracker automatisch übermittelt. Neue Fehler werden dann im Tab Fehler angezeigt.

Information

Die Fehlerverfolgung ist eine Pro-Funktion. Wenn das Umschalter ein erforderliches Plan-Badge zeigt, müssen Sie auf Pro, Scale oder Enterprise sein, um sie zu aktivieren.

Was erfasst wird

Fehlerinformationen

Für jeden Fehler erfasst Zenovay:

Daten	Beschreibung
Fehlermeldung	Die Fehlerbeschreibung
Fehlertyp	TypeError, ReferenceError, usw.
Stack-Trace	Vollständiger Aufrufstack
Quelldatei	Datei, in der der Fehler aufgetreten ist
Zeile & Spalte	Genaue Position
URL	Seite, auf der der Fehler aufgetreten ist
User-Agent	Browser und Betriebssystem
Besucher-ID	Verknüpfung zur Sitzung
Zeitstempel	Zeitpunkt des Fehlers

Kontextdaten

Zusätzlicher Kontext, der mit jedem Fehler erfasst wird:

Seiten-URL und Referrer
Browser- und Geräteinformationen
Breadcrumbs: aktuelle Navigation, Klicks, Konsolenausgaben und Netzwerkanfragen vor dem Fehler
Release und Umgebung, unter der der Fehler gemeldet wurde (wenn Ihr Code diese setzt)

Fehler anzeigen

Fehler-Dashboard

Öffnen Sie das Dashboard Ihrer Website und wählen Sie den Tab Fehler (unter Zuverlässigkeit in der Seitenleiste):

Sehen Sie Fehleranzahl-Trends im Zeitverlauf
Zeigen Sie die häufigsten Fehlergruppen nach Auftreten an
Filtern Sie nach Status
Klicken Sie auf eine beliebige Fehlergruppe für Details

Fehlerliste

Die Fehlerliste zeigt:

Spalte	Beschreibung
Fehler	Fehlermeldung (gekürzt)
Anzahl	Anzahl der Vorkommnisse
Erstmals gesehen	Zeitpunkt des ersten Auftretens
Zuletzt gesehen	Letztes Auftreten
Status	Nicht gelöst, Überprüfung läuft, Gelöst oder Ignoriert

Fehler-Detailansicht

Klicken Sie auf eine Fehlergruppe, um zu sehen:

Vollständige Fehlermeldung
Stack-Trace
Betroffene Browser, Betriebssysteme und Geräte
Seiten, auf denen der Fehler auftritt
Zeitleiste der Vorkommnisse
Breadcrumbs, die zum Fehler führen

Sie können auch den Status einer Gruppe ändern (als Überprüfung läuft, Gelöst oder Ignoriert markieren), um Ihre Liste auf das zu konzentrieren, das noch Aufmerksamkeit benötigt.

Fehlertypen

Häufige Fehlertypen

Typ	Beschreibung	Häufige Ursachen
`TypeError`	Typbezogener Fehler	Zugriff auf undefinierte Eigenschaften
`ReferenceError`	Verweis auf Undefiniertes	Undefinierte Variablen
`SyntaxError`	Ungültige Syntax	Fehlerhaftes JSON, Tippfehler
`RangeError`	Wert außerhalb des Bereichs	Ungültige Array-Länge
`URIError`	URI-Verarbeitungsfehler	Fehlerhafte URIs
`EvalError`	eval()-Fehler	Veraltet, selten zu sehen

Fehler werden auch nach Kategorie (JavaScript, Netzwerk, Ressource oder benutzerdefiniert) und Schweregrad klassifiziert, den das Dashboard verwendet, um Ihnen bei der Priorisierung zu helfen.

Promise-Ablehnungen

// Unbehandelte Ablehnung - wird automatisch erfasst
Promise.reject(new Error('Something failed'));

// Behandelte Ablehnung - wird nicht erfasst
Promise.reject(new Error('Something failed'))
  .catch(error => handleError(error));

Source Maps

Minifizierter Code erzeugt unlesbare Stack-Traces:

Error: undefined is not a function
    at a.b (main.min.js:1:2345)
    at c.d (main.min.js:1:3456)

Mit hochgeladenen Source Maps kann das Dashboard Ihren ursprünglichen Code anzeigen:

Error: undefined is not a function
    at processPayment (checkout.js:45:12)
    at handleSubmit (form.js:123:8)

Source Maps werden über die Fehlerverfolgung-API hochgeladen und Fehlern durch eine release-Kennung zugeordnet. Integrieren Sie den Upload in Ihre Build-Pipeline, sodass jede Release mit ihren Maps ausgeliefert wird.

Für die vollständige Upload-Referenz (Endpoint, Felder und ein CI-Beispiel) siehe Source Maps für JS-Fehler.

Fehler filtern

Fehler, die von Zenovays eigener Tracking-Infrastruktur stammen, werden automatisch ausgelöscht, sodass Sie nur Fehler aus Ihrem eigenen Code sehen.

Um verbleibende Geräusche zu reduzieren, konzentrieren Sie sich im Dashboard auf das, was umsetzbar ist:

Verwenden Sie den Status Ignoriert, um einen bekannten Drittanbieter- oder Browser-Erweiterungsfehler zu stummschalten, damit er Ihre Liste nicht länger überlastet.
Lösen Sie Gruppen auf, die Sie behoben haben, damit neue Vorkommnisse herausstechen.

Fehler-Benachrichtigungen

Erhalten Sie Benachrichtigungen, wenn Fehler ansteigen, indem Sie eine Automatisierungsregel verwenden:

Öffnen Sie das Dashboard Ihrer Website und gehen Sie zu Einstellungen → Automatisierung
Erstellen Sie eine Regel mit dem Trigger Fehlerrate-Schwellenwert
Legen Sie den Schwellenwert fest (Fehler pro Stunde)
Wählen Sie, wie Sie benachrichtigt werden möchten: E-Mail, Webhook oder Slack

Wenn die Fehlerrate Ihren Schwellenwert überschreitet, wird die von Ihnen konfigurierte Aktion ausgelöst.

Integration mit Session Replay

Wenn Session Replay für die Website aktiviert ist, können Fehler mit Aufzeichnungen verknüpft werden, damit Sie sehen können, was der Benutzer gerade getan hat, als ein Fehler aufgetreten ist. Session Replay hat einen Modus Nur Fehler (unter Einstellungen → Erweitert → Feature Flags), der Sitzungen speziell um Fehler aufzeichnet, was die Speicherung auf die Sitzungen konzentriert, die es wert sind, beobachtet zu werden.

Dies hilft Ihnen zu verstehen:

Was der Benutzer gerade getan hat
UI-Zustand, wenn der Fehler aufgetreten ist
Schritte zur Reproduktion

Best Practices

Fehler gezielt behandeln

Fangen Sie Fehler auf und behandeln Sie die, von denen Sie sich erholen können, und lassen Sie die, die Sie nicht können, an den Tracker weitergeleitet werden:

// Gut: spezifische, wiederherstellbare Behandlung
try {
  const data = JSON.parse(userInput);
} catch (error) {
  if (error instanceof SyntaxError) {
    showValidationError('Invalid JSON format');
  } else {
    throw error; // nicht wiederherstellbar - lass es erfassen
  }
}

Geräuschreduzierung

Browser-Erweiterungs- und bekannte Drittanbieter-Fehler als Ignoriert markieren
Gruppen auflösen, während Sie Behebenungen ausliefern
Nach Schweregrad und Auftreten priorisieren

Fehlerbehebung

Fehler werden nicht angezeigt

Überprüfen Sie:

Das Script wird vor dem Auftreten von Fehlern geladen
Die Fehlerverfolgung ist unter Einstellungen → Erweitert → Feature Flags aktiviert
Ein Werbeblocker blockiert keine Anfragen an api.zenovay.com

Fehlende Stack-Traces