Error Tracking

Pro-Funktion

Erfassen Sie jeden JavaScript-Fehler, Netzwerkfehler und unerwartete Exception bevor Ihre Benutzer diese melden. Error Tracking erfasst vollständige Stack-Traces mit Session-Kontext, um Ihnen schneller zu debuggen.

---

Überblick

Zenovay erfasst Client-seitige Fehler automatisch, wenn diese auftreten, einschließlich:

• JavaScript-Fehler: Nicht abgefangene Exceptions und Syntaxfehler
• Promise-Rejections: Unbehandelte Promise-Rejections
• Netzwerkfehler: Fehlgeschlagene API-Aufrufe und Fehler beim Laden von Ressourcen
• Console-Fehler: Fehler, die über console.error() protokolliert werden

Jeder Fehler enthält:

• Vollständiger Stack-Trace mit Source Maps
• Session-Kontext (was der Benutzer gerade tat)
• Browser- und Geräte-Informationen
• Link zu Session-Replay (falls aktiviert)

---

Error Tracking aktivieren

Error Tracking ist standardmäßig aktiviert, wenn Sie das Zenovay-Tracking-Skript hinzufügen. Zur Überprüfung:

1. Öffnen Sie Domains, wählen Sie Ihre Website und dann die Registerkarte Errors
2. Falls die Registerkarte Daten oder eine Aufforderung zum Aktivieren zeigt, ist das Skript aktiv
3. Bestätigen Sie, dass die Fehlererfassung in den Feature-Einstellungen der Domain aktiviert ist

---

Error-Dashboard

Fehlerliste

Das Errors-Dashboard zeigt alle erfassten Fehler gruppiert nach:

• Fehlermeldung: Eindeutiger Fingerprint des Fehlers
• Anzahl der Vorkommen: Wie oft dieser Fehler aufgetreten ist
• Betroffene Benutzer: Anzahl der betroffenen eindeutigen Besucher
• Zuletzt gesehen: Wann der Fehler zuletzt auftrat

Fehlerdetails

Klicken Sie auf einen Fehler, um folgendes zu sehen:

• Vollständiger Stack-Trace: Mit Source-Map-Zeilennummern
• Benutzer-Kontext: Browser, Gerät, Land, Seiten-URL
• Session-Replay: Link zum Anschauen, was passiert ist (falls aktiviert)
• Breadcrumbs: Ereignisse, die zum Fehler führten
• Trend-Diagramm: Fehlerhäufigkeit über Zeit

---

Fehlergruppierung

Ähnliche Fehler werden automatisch gruppiert nach:

1. Fehlermeldung (normalisiert)
2. Stack-Trace-Fingerprint
3. Fehlertyp

Dies verhindert, dass tausende identischer Fehler Ihr Dashboard überfluten.

Benutzerdefinierte Fingerprinting

Verwenden Sie benutzerdefinierte Error-Tags, um verwandte Fehler zu gruppieren:

try {
  // Ihr Code
} catch (error) {
  window.zenovay('track', 'error', {
    error_message: error.message,
    error_stack: error.stack,
    tags: {
      feature: 'checkout',
      action: 'payment_submit'
    }
  });
}

---

Fehlertypen

JavaScript-Fehler

Standard-Laufzeitfehler:

// Automatisch erfasst
TypeError: Cannot read property 'foo' of undefined
ReferenceError: bar is not defined
SyntaxError: Unexpected token

Netzwerkfehler

Fehlgeschlagene fetch/XHR-Anfragen:

// Fehlgeschlagener API-Aufruf - automatisch erfasst
fetch('/api/data')
  .then(r => r.json())
  .catch(error => {
    // Fehler mit Anfragdetails erfasst
  });

Netzwerkfehler-Details enthalten:

• Anfrage-URL
• HTTP-Methode
• Response-Status (falls verfügbar)
• Anfragedauer

Promise Rejections

Unbehandelte Promise-Rejections:

// Automatisch erfasst
Promise.reject(new Error('Something went wrong'));

// Async-Funktion-Fehler
async function fetchData() {
  throw new Error('Failed to fetch');
}

---

Source Maps

Laden Sie Source Maps hoch für lesbare Stack-Traces:

Automatisches Hochladen (empfohlen)

Wenn Sie Webpack, Vite oder Rollup verwenden, können Source Maps während des Builds automatisch hochgeladen werden:

# Source Maps mit der API hochladen
curl -X POST "https://api.zenovay.com/api/external/v1/sourcemaps" \
  -H "X-API-Key: YOUR_API_KEY" \
  -F "release=v1.2.3" \
  -F "sourcemap=@./dist/main.js.map"

Manuelles Hochladen

Hochladen über das Dashboard:

1. Öffnen Sie Domains, wählen Sie Ihre Website und dann die Registerkarte Errors
2. Klicken Sie auf Source Maps und dann Upload Source Map
3. Wählen Sie Ihre .js.map-Dateien
4. Verknüpfen Sie mit einer Release-Version

---

Session-Integration

Wenn Session Replay aktiviert ist:

1. Jeder Fehler verlinkt direkt zum Session-Replay
2. Replay öffnet sich im genauen Moment, in dem der Fehler auftrat
3. Sehen Sie, was der Benutzer vor dem Fehler tat
4. Verstehen Sie den vollständigen Kontext, nicht nur den Stack-Trace

---

Filterung & Warnungen

Fehlerfilterung

Filtern Sie Fehler nach:

• Datumsbereich
• Browser
• Gerätetyp
• Land
• Release-Version
• Fehlertyp

Fehler-Warnungen

Richten Sie Warnungen für neue oder ansteigende Fehler ein:

1. Öffnen Sie Domains, wählen Sie Ihre Website und dann die Registerkarte Errors
2. Klicken Sie auf Configure alerts
3. Legen Sie einen Schwellenwert fest (z.B. "mehr als 10 Vorkommen in 5 Minuten")
4. Wählen Sie einen Benachrichtigungskanal (E-Mail, Slack, Webhook)

---

Fehler ignorieren

Einige Fehler sind nicht umsetzbar. Konfigurieren Sie Ignorierungsregeln:

Nach Fehlermeldung

{
  "error_ignore_patterns": [
    "ResizeObserver loop limit exceeded",
    "Script error."
  ]
}

Nach URL-Muster

{
  "error_ignore_urls": [
    "chrome-extension://",
    "moz-extension://"
  ]
}

---

Manuelles Error Tracking

Verfolgen Sie abgefangene Fehler oder benutzerdefinierte Fehlerbedingungen:

// Abgefangenen Fehler verfolgen
try {
  riskyOperation();
} catch (error) {
  window.zenovay('track', 'error', {
    error_message: error.message,
    error_stack: error.stack,
    context: {
      operation: 'riskyOperation',
      userId: currentUser.id
    }
  });
}

// Benutzerdefinierte Fehlerbedingung verfolgen
if (unexpectedState) {
  window.zenovay('track', 'error', {
    error_message: 'Unexpected application state',
    severity: 'warning',
    context: { state: JSON.stringify(appState) }
  });
}

---

API-Zugriff

Greifen Sie auf Fehlerdaten über API zu:

# Fehler auflisten
GET /api/websites/:websiteId/errors
Authorization: Bearer YOUR_API_KEY

# Fehlerdetails abrufen
GET /api/websites/:websiteId/errors/:errorId
Authorization: Bearer YOUR_API_KEY

---

Datenschutz

Error Tracking respektiert die Privatsphäre von Benutzern:

• Stack-Traces enthalten keine Benutzerdaten
• PII wird automatisch aus dem Fehler-Kontext entfernt
• Respektiert DNT- und Zustimmungseinstellungen
• Fehlerdaten folgen Ihrer Aufbewahrungsrichtlinie

---

Best Practices

1. Source Maps hochladen: Essentiell zum Debuggen von minifiziertem Code
2. Warnungen einrichten: Erfahren Sie sofort von kritischen Fehlern
3. Wöchentlich überprüfen: Regelmäßige Fehlerüberprüfung verhindert technische Schulden
4. Release-Versionen kennzeichnen: Verknüpfen Sie Fehler mit spezifischen Versionen
5. Session-Replays ansehen: Kontext ist alles zum Debuggen

---

Nächste Schritte

• Session Replay - Sehen Sie, was Benutzer vor Fehlern taten
• Heatmaps - Visualisieren Sie Benutzerinteraktionen
• Troubleshooting - Debuggen Sie häufige Probleme