Fehlerüberwachung: Der Black-Box-Recorder

Der stille Absturz

In der Backend-Entwicklung ist die Fehlerverwaltung unkompliziert. Wenn Ihr Node.js-Server abstürzt, schreien die Protokolle in „stderr“ „FATAL ERROR“. Die Gesundheitsprüfung (Ping) schlägt fehl. Kubernetes startet den Pod neu. Der Pager (PagerDuty) klingelt auf Ihrem Telefon. Man merkt sofort, dass etwas nicht stimmt.

In der Frontend-Entwicklung sind Fehler stillschweigend. Stellen Sie sich einen Benutzer auf Ihrer E-Commerce-Website vor. Sie haben 30 Minuten damit verbracht, zu stöbern. Sie haben Artikel im Wert von 500 € in ihrem Warenkorb. Sie klicken auf „Zur Kasse gehen“. Die JavaScript-Engine stößt auf „TypeError: Eigenschaften von undefiniert können nicht gelesen werden (liest „Preis“)“. Was geschieht? Der Bildschirm explodiert nicht. Der Browser wird nicht geschlossen. Die Benutzeroberfläche friert unweigerlich ein. Der Button-Spinner dreht sich ewig. Der Benutzer wartet 10 Sekunden. Sie klicken erneut. Nichts. Sie seufzen, schließen den Tab und gehen zu Amazon. Sie (der Entwickler) haben keine Kenntnis, dass dies passiert ist. In Ihren Serverprotokollen wird für das Laden der Seite „200 OK“ angezeigt. Sie gehen davon aus, dass Ihre Software perfekt ist. In Wirklichkeit verlieren Sie Tausende von Dollar pro Stunde.

Dies nennt man Blindflug. Fehlerüberwachung (Sentry, Datadog, LogRocket) ist die Lösung. Es installiert einen „Black Box Recorder“ (SDK) im Browser jedes Benutzers. Wenn ein Absturz auftritt, wird der Status erfasst, an die Cloud gesendet und Sie benachrichtigt.

Warum Maison Code dies bespricht

Bei Maison Code glauben wir, dass Beobachtung der erste Schritt der Technik ist. Wir erben oft Codebasen von Kunden, die sagen: „Unsere Conversion-Rate ist um 20 % gesunken und wir wissen nicht, warum.“ Wir installieren Sentry und sehen innerhalb von 10 Minuten Tausende von „CheckoutError: undefiniert ist kein Objekt“ von Safari-Benutzern. Der Fehler war immer da. Der Kunde war einfach taub dafür. Wir implementieren Überwachung nicht nur, um Fehler zu erkennen, sondern auch, um Qualität zu quantifizieren. Wir helfen CTOs dabei, von „Ich denke, die Website ist stabil“ zu „Wir haben eine Sitzungsrate ohne Abstürze von 99,98 %“ überzugehen.

Das Werkzeug: Sentry

Sentry ist der unbestrittene Industriestandard für Application Performance Monitoring (APM) und Fehlerverfolgung. Es unterstützt jede Sprache, aber seine Integration mit JavaScript/TypeScript ist besonders leistungsstark. Es erfasst nicht nur die Fehlermeldung; es erfasst den Kontext.

Implementierung: Sentry in Next.js integrieren

Früher war es schwierig, Sentry einzurichten. Jetzt ist es automatisiert.

1. Der Zauberer: Führen Sie „npx @sentry/wizard@latest -i nextjs“ aus. Dieses Skript ist magisch.

   • Es erstellt ein Sentry-Projekt über die API.
   • Es aktualisiert „next.config.js“, um Quellkarten hochzuladen.
   • Es erstellt „sentry.client.config.ts“ (Browser), „sentry.server.config.ts“ (Knoten) und „sentry.edge.config.ts“ (Edge Runtime).

2. Nutzung (SDK): Sentry hakt sich automatisch in die globalen Ereignisse „window.onerror“ und „window.onunhandledrejection“ ein. Im Allgemeinen müssen Sie den Code nicht manuell in „try/catch“ einbinden.

3. Manuelle Erfassung: Manchmal möchten Sie einen Fehler abfangen (damit die App nicht abstürzt), ihn aber trotzdem melden. „Typoskript

   • als Sentry aus „@sentry/nextjs“ importieren;

   asynchrone Funktion ProcessPayment() { versuche es mit { Warten auf stripe.confirmPayment(); } Catch (Fehler) { // Bei Sentry anmelden, aber dem Benutzer eine schöne Benutzeroberfläche anzeigen Sentry.captureException(error); toast.error(“Zahlung fehlgeschlagen, bitte versuchen Sie es erneut.”); } } „

Quellkarten: Der Rosetta-Stein

Produktions-JavaScript ist minimiert und hässlich. Es entfernt Leerzeichen, benennt Variablen in „a“, „b“ und „c“ um und schüttelt toten Code ab. Das ist großartig für die Leistung, aber schrecklich für das Debuggen.

Der Horror: „Text Fehler: undefiniert ist keine Funktion bei einem (app-123.js:1:432) bei b (app-123.js:1:890) „ Das sagt dir nichts.

Die Lösung: Quellkarten (.js.map). Diese Dateien ordnen den minimierten Code wieder der ursprünglichen TypeScript-Quelle zu. Wenn Sentry einen Absturzbericht erhält, sucht es nach der passenden Quellkarte. Dadurch wird die Stapelverfolgung effektiv „entminimiert“.

Das Ergebnis: „Text TypeError: user.address ist undefiniert bei berechneShipping (src/utils/shipping.ts:45:12) bei CheckoutForm (src/components/Checkout.tsx:102:4) „ Jetzt wissen Sie genau, dass Zeile 45 von „shipping.ts“ der Schuldige ist.

Der Kontext ist König

Zu wissen, wo es abgestürzt ist, ist Schritt 1. Zu wissen, wer den Absturz verursacht hat, ist Schritt 2. Mit Sentry können Sie das Fehlerereignis mit benutzerdefinierten Tags und Benutzerdaten anreichern.

„Typoskript // In Ihrem AuthProvider oder Layout useEffect(() => { if (Benutzer) { Sentry.setUser({ id: user.id, E-Mail: user.email, // Seien Sie vorsichtig mit personenbezogenen Daten (DSGVO) Segment: user.isVIP ? „VIP“: „Standard“ }); } }, [Benutzer]); „

Im Sentry-Dashboard können Sie jetzt leistungsstarke Abfragen ausführen:

• „Zeige mir alle Abstürze, die VIP-Benutzer betreffen.“
• „Zeige mir alle Abstürze unter iOS 17.“

Alert Fatigue: Der Junge, der den Wolf rief

Die größte Gefahr bei der Fehlerüberwachung ist Rauschen. Wenn Ihr Slack-Kanal „#alerts-prod“ alle 5 Minuten einen Ping mit „Bild konnte nicht geladen werden“ sendet, schalten Entwickler den Kanal stumm. Wenn dann die Datenbank ausfällt, merkt es niemand. Das ist Alarmmüdigkeit.

Strategie für Signal-to-Noise:

1. Unbedenkliche Fehler ignorieren: Konfigurieren Sie „ignoreErrors“ in „sentry.client.config.ts“ (z. B. „ResizeObserver-Loop-Limit“).
2. Spike-Schutz: Keine Warnung bei einem Fehler. Warnung, wenn: „Bei mehr als 50 Benutzern dieser Fehler in 5 Minuten auftritt.“

Sitzungswiederholung: Die nukleare Option

Manchmal reicht ein Stacktrace nicht aus. „Der Benutzer sagt, dass er auf die Schaltfläche geklickt hat, aber nichts passiert ist. Kein Fehler protokolliert.“ Session Replay (LogRocket / Sentry Replay) zeichnet eine videoähnliche Wiedergabe der Sitzung des Benutzers auf. Es zeichnet die DOM-Mutationen, Mausbewegungen und Klicks auf. Sie können buchstäblich auf den Bildschirm des Benutzers schauen. „Ah, sie haben beim Öffnen des Modals dreimal auf die Schaltfläche ‚Zurück‘ geklickt.“

Datenschutz (DSGVO/CCPA): Das ist empfindlich. Sie MÜSSEN Eingabefelder (Passwörter, Kreditkarten) maskieren. Sentry führt dies standardmäßig aus („maskAllText: true“) und wandelt Text in „****“ um. Überprüfen Sie diese Konfiguration manuell.

7. Leistungsverfolgung (Sentry-Transaktionen)

Fehler sind Abstürze. Transaktionen sind Langsamkeit. Sentry verfolgt den gesamten Anforderungslebenszyklus.

1. Der Benutzer klickt auf „Kaufen“.
2. Browser („fetch /api/buy“) -> 100 ms.
3. Next.js Server („db.insertorders“) -> 500 ms.
4. Stripe-API („Charge“) -> 2000 ms. Gesamt: 2,6 Sekunden. Wenn Sie nur Fehler überwachen, denken Sie, dass alles in Ordnung ist. Aber 2,6 Sekunden sind inakzeptabel. Sentry zeigt Ihnen den „Wasserfall“ der Anfrage und macht deutlich, dass Stripe der Engpass ist. Fix: Stripe nicht abwarten. Verwenden Sie eine Warteschlange.

8. Das Benutzer-Feedback-Widget

Bei einem Absturz kann Sentry automatisch einen Dialog öffnen. „Es sieht so aus, als wären wir abgestürzt. Erzählen Sie uns, was passiert ist.“ Benutzertyp: „Ich habe zweimal auf ‚Gutschein anwenden‘ geklickt.“ Das ist Gold. Es verbindet den „Stack Trace“ (Technical) mit dem „User Intent“ (Business). Aktivieren Sie dies für verifizierte Benutzer, um eine Beziehung aufzubauen.

10. Release-Zustand: Bereitstellungsvertrauen

Sie stellen Version 2.0 bereit. Steigen oder sinken die Fehler? Sentry Release Health verfolgt „Crash Free Sessions“. v1.0: 99,9 % absturzfrei. v2.0: 98,0 % absturzfrei. Dies löst eine automatische Warnung aus: „Regression Detected in v2.0“. Sie können ein sofortiges Rollback durchführen, bevor sich Kunden beschweren. Dies ist die Rückkopplungsschleife, die eine „Bereitstellung am Freitag“ ermöglicht.

11. Quellkartensicherheit

Das Hochladen von Quellkarten erleichtert das Debuggen. Aber es macht Ihren Quellcode auch der Öffentlichkeit zugänglich (wenn Sie ihn in das CDN hochladen). Konkurrenten können Ihre Algorithmen stehlen. Fix: Quellkarten auf Sentry Artifacts hochladen (privat). Laden Sie keine „.map“-Dateien auf Ihr öffentliches CDN hoch. Konfigurieren Sie Sentry so, dass Karten intern abgerufen werden. Jetzt erhalten Sie vollständige Stack-Traces, aber die Welt sieht verschleierten Code.

12. Fazit

Was man nicht sieht, kann man nicht reparieren. Durch die Überwachung werden Fehler von „Ghost Stories“ in „Actionable Tickets“ umgewandelt. Es ermöglicht Ihnen, einen Kunden anzurufen und zu sagen: „Uns ist beim Bezahlvorgang ein Fehler aufgefallen. Wir haben ihn behoben. Hier ist ein 10 %-Gutschein.“ So verwandeln Sie einen Misserfolg in Loyalität.

Keine Lust mehr auf blindes Debuggen?

Wenn Ihr Team stundenlang nach nicht reproduzierbaren Fehlern sucht, kann Maison Code hilfreich sein. Wir implementieren Observability Stacks, die Ihnen einen Röntgenblick in Ihre Produktionsumgebung ermöglichen.

Kontaktieren Sie uns, um den Blindflug zu stoppen.

---

---

Blindflug?

Wir integrieren Sentry/Datadog-Überwachungsstacks mit Quellkarten und Kontextanreicherung. Stellen Sie unsere Architekten ein.