Claude Code + Better Stack: Das ultimative Setup für das Error-Debugging

Deutschالعربية English Español Français हिन्दी Bahasa Indonesia 日本語 한국어 Português Русский 中文

컴퓨터/소프트웨어창업/스타트업AI/미래기술

Transcript

00:00:00Die Fehlerverfolgung in Better Stack ist wirklich beeindruckend.

00:00:02Es unterstützt jede Art von App, die du bauen möchtest,

00:00:04rendert Sitzungswiederholungen

00:00:05und bietet dir sogar einen Prompt, den du in jeden

00:00:07KI-Coding-Agenten mit wichtigen Informationen einfügen kannst,

00:00:10um Fehler schnell zu beheben.

00:00:11Aber es ist nicht wirklich effizient, den Browser zu öffnen

00:00:13und den Fehler in deinen Coding-Agenten zu kopieren,

00:00:15besonders wenn du Unmengen an Fehlern bearbeiten musst.

00:00:17Hier kommt der Better Stack MCP-Server ins Spiel,

00:00:20der deinen Debugging-Prozess massiv beschleunigt,

00:00:22indem er deinem Agenten alle Informationen über deine Fehler gibt,

00:00:25die er zur Behebung direkt im Terminal nutzen kann.

00:00:27Schauen wir uns genau an, wie das funktioniert.

00:00:28Und bevor wir loslegen, vergiss nicht zu abonnieren.

00:00:30Für diese Demo beheben wir einen Fehler

00:00:36in meiner Video-Emulations-App.

00:00:37Das ist ein tatsächlicher Fehler.

00:00:39Ich habe ihn nicht für dieses Video erfunden,

00:00:41und er tritt hin und wieder auf.

00:00:43Ich werde versuchen, ihn live zu reproduzieren.

00:00:44Er tritt immer dann auf, wenn ich ein Video hochlade.

00:00:46Ich lade also ein Short hoch, das ich über Kent C. Dodds gemacht habe,

00:00:49das du auf dem Better Stack Kanal finden kannst.

00:00:51Ich wähle ein Preset aus.

00:00:52Dieses hier mag ich, weil es mich an Fallout erinnert.

00:00:55Und ich werde die Entwicklertools untersuchen.

00:00:57Wir haben bereits zwei Fehler,

00:00:59aber das ist nicht der, den wir beheben werden.

00:01:01Der neue Fehler tritt auf, wenn ich ein bisschen herumscrolle.

00:01:03Ich scrolle also herum und hoffe, dass er ausgelöst wird,

00:01:06was schließlich auch passiert.

00:01:08Und da ist er, ein nicht abgefangener Sicherheitsfehler,

00:01:10der verhindert, dass die Timeline scrollt.

00:01:12Da dies eine React-App ist,

00:01:14habe ich sie mit Better Stack verbunden,

00:01:15unter Verwendung des Sentry React SDK.

00:01:17Ich verwende einen Better Stack-spezifischen DSN,

00:01:19den man sehr einfach erhält, indem man eine Anwendung verbindet,

00:01:22den App-Typ wählt, den man überwachen möchte,

00:01:24und dann nach unten scrollt, um diesen Prompt zu finden,

00:01:27den man kopieren und in seinen KI-Agenten einfügen kann.

00:01:29Und er kümmert sich um die gesamte Einrichtung.

00:01:30Danach können wir sehen,

00:01:31dass wir Fehler in Better Stack erhalten.

00:01:33Hier ist derjenige, der vor Kurzem ausgelöst wurde,

00:01:34vor etwa sechs Minuten.

00:01:35Wenn wir darauf klicken, erhalten wir einen Haufen Daten,

00:01:38wie Browser-Informationen

00:01:39und die genauen Schritte, die zu diesem Fehler führten.

00:01:41Wir können sogar hier klicken, damit die KI ihn uns erklärt.

00:01:44Wir könnten uns auch eine anonyme Sitzungswiederholung ansehen,

00:01:46von allem, was bis zu diesem Fehler passiert ist.

00:01:48Aber für den Moment konzentrieren wir uns auf die Behebung mit Claude Code.

00:01:51Wir könnten auf "AI prompt" klicken

00:01:53und diesen Prompt direkt in Claude Code kopieren,

00:01:55aber das könnte sehr mühsam sein,

00:01:57wenn wir viele Fehler bearbeiten wollen.

00:01:59Holen wir uns diese Informationen also direkt in Claude Code,

00:02:02indem wir den Better Stack MCP-Server verwenden,

00:02:04den ich bereits eingerichtet habe.

00:02:05Du kannst das tun, indem du diesen Befehl ausführst

00:02:07oder die Konfiguration deiner Coding-Umgebung bearbeitest

00:02:10und dich bei Better Stack anmeldest.

00:02:11Der MCP-Server gibt uns Zugriff auf viele nützliche Tools.

00:02:15Und wenn du Kontext sparen willst,

00:02:16kannst du das verzögerte Laden von Tools

00:02:18in der Claude settings.json aktivieren,

00:02:19wodurch nur die Tools geladen werden, die du brauchst,

00:02:21anstatt alles in den Kontext zu packen.

00:02:23Da ich mich bereits im Projektverzeichnis befinde,

00:02:26kann ich einen Prompt schreiben wie:

00:02:27Gib mir alle Fehlerdetails für diese Anwendung.

00:02:29Claude Code nutzt die richtigen Tools, um die App zu finden

00:02:32und gibt mir eine Zusammenfassung der neuesten Fehler.

00:02:35Das ist an sich schon extrem leistungsfähig,

00:02:36weil man dies regelmäßig als Routine laufen lassen kann,

00:02:40um eine E-Mail zu erhalten, wann immer ein neuer Fehler auftritt,

00:02:42oder Benachrichtigungen über WhatsApp oder Telegram,

00:02:44oder Claude sogar automatisch PRs erstellen zu lassen,

00:02:46um neue Probleme direkt zu beheben.

00:02:47Holen wir uns erst einmal die Details dieses Sicherheitsfehlers,

00:02:50für den er bereits einen Prompt vorgeschlagen hat.

00:02:52Aber was ich tun werde, ist zu fragen,

00:02:54ob es andere Fehler gibt, die damit zusammenhängen,

00:02:56damit sie gemeinsam behoben werden können.

00:02:58Nun ruft er parallel die Details der Codebasis ab,

00:03:01liefert mir die Ursache des Problems

00:03:03zusammen mit einem Lösungsvorschlag

00:03:04und sagt mir, dass die 404-Fehler ein separates Problem sind.

00:03:07Er wird sie also nicht zusammenfassen.

00:03:08Lassen wir Claude nun das Sicherheitsproblem beheben,

00:03:10in einem neuen Feature-Branch und einen Pull Request erstellen,

00:03:12was sehr schnell erledigt ist.

00:03:14Wenn wir uns den PR ansehen,

00:03:16werfen wir einen Blick auf die geänderten Dateien.

00:03:17Ich kann kaum glauben, dass es nur diese eine Zeile Code ist,

00:03:20die alles behebt.

00:03:21Ich werde das also lokal testen,

00:03:23und nachdem ich einige Minuten herumgescrollt habe,

00:03:25kann ich zuversichtlich sagen: Der Fehler ist nicht reproduzierbar.

00:03:27Der PR wurde nun gemergt,

00:03:29und an diesem Punkt können wir etwas wirklich Cooles machen.

00:03:31Anstatt manuell in Better Stack zu gehen

00:03:33und auf den Resolve-Button zu klicken,

00:03:35kann ich einfach die neuen Änderungen ziehen,

00:03:36dann Claude sagen, er soll prüfen, ob der Fix aktiv ist,

00:03:38und falls ja, das Problem in Better Stack als gelöst markieren.

00:03:41Er hat nun bestätigt, dass der Fix vorhanden ist

00:03:43und löst die drei Sicherheitsaspekte in Better Stack auf,

00:03:45was er erledigt hat, während ich geredet habe.

00:03:47Wenn wir zurück zur Better Stack-Oberfläche gehen,

00:03:49sehen wir, dass dieses Problem gelöst wurde,

00:03:51und ebenso alle vorherigen Instanzen davon.

00:03:53Und wir können diese Schritte immer wieder wiederholen,

00:03:56bis wir jeden einzelnen Fehler in unserer App behoben haben.

00:03:58Ich glaube aufrichtig, dass dies die Richtung ist,

00:04:00in die sich die Dinge entwickeln.

00:04:01Wir werden mehr Agenten nutzen und seltener die UI

00:04:03oder den Browser besuchen, weil es einfach praktischer ist.

00:04:07Ich empfehle dir also, den Better Stack MCP-Server auszuprobieren,

00:04:09um zu sehen, was er genau tun kann,

00:04:11um deinen Debugging-Workflow zu beschleunigen.

00:04:12Und wenn du mehr Details

00:04:14über den MCP-Server selbst erfahren willst,

00:04:16dann schau dir dieses Video von James an.

Key Takeaway

Die Kombination aus Better Stack MCP-Server und Claude Code automatisiert den gesamten Debugging-Zyklus von der Fehlererkennung im Terminal bis zur Erstellung und Verifizierung von Pull Requests.

Highlights

Der Better Stack MCP-Server ermöglicht den direkten Zugriff auf Fehlerdaten innerhalb des Terminals über KI-Agenten wie Claude Code.
Die Integration erfolgt über das Sentry React SDK unter Verwendung eines Better Stack-spezifischen DSN für Echtzeit-Monitoring.
KI-Agenten können über den MCP-Server Fehlerursachen analysieren, Feature-Branches erstellen und Pull Requests zur Behebung generieren.
Fehlerbehebungen lassen sich automatisiert verifizieren und der Status in der Better Stack-Oberfläche direkt via Terminal auf gelöst setzen.
Die Konfiguration unterstützt verzögertes Laden von Tools in der settings.json, um Kontext-Fenster der KI effizient zu nutzen.

Timeline

Effizienzsteigerung durch MCP-Server Integration

Better Stack bietet Sitzungswiederholungen und KI-Prompts für Coding-Agenten zur Fehlerbehebung.
Der manuelle Transfer von Fehlerdaten aus dem Browser in KI-Tools erzeugt operative Reibungsverluste.
Der MCP-Server stellt Fehlerdetails ohne Umwege direkt im Terminal zur Verfügung.

Die klassische Fehlerverfolgung erfordert oft das Kopieren von Informationen zwischen verschiedenen Oberflächen. Diese Brüche im Arbeitsfluss werden durch einen dedizierten Server für das Model Context Protocol aufgehoben. Informationen über den Anwendungszustand fließen dadurch automatisiert in die Entwicklungsumgebung.

Live-Reproduktion und SDK-Einrichtung

Ein nicht abgefangener Sicherheitsfehler blockiert das Scrollen der Timeline in einer React-App.
Das Sentry React SDK verbindet die Anwendung über einen individuellen DSN mit der Monitoring-Plattform.
Detaillierte Breadcrumbs und anonymisierte Sitzungswiederholungen dokumentieren die Schritte bis zum Absturz.

Ein konkretes Szenario in einer Video-Emulations-App zeigt, wie Scroll-Ereignisse einen Sicherheitsfehler auslösen. Die Einrichtung der Überwachung erfolgt durch einen von der KI generierten Prompt, der die notwendigen Konfigurationsschritte übernimmt. Dies ermöglicht die Erfassung von Browser-Informationen und exakten Fehler-Zeitstempeln.

Automatisierte Fehlerbehebung mit Claude Code

Der Befehl zur Anmeldung bei Better Stack aktiviert die MCP-Tools innerhalb der Coding-Umgebung.
KI-Modelle identifizieren die spezifische Fehlerursache durch parallelen Abruf von Fehlerdetails und Codebasis-Kontext.
Die Trennung von nicht zusammenhängenden Fehlern wie 404-Meldungen verhindert fehlerhafte Code-Zusammenfassungen.

Durch die Abfrage der Fehlerdetails direkt in Claude Code entfällt das manuelle Suchen in Protokollen. Die KI schlägt Lösungen vor und differenziert zwischen verschiedenen Problemklassen. Ein automatisierter Workflow erstellt daraufhin einen neuen Feature-Branch und den zugehörigen Pull Request.

Validierung und Synchronisation des Fehlerstatus

Eine einzige Codezeile behebt das Sicherheitsproblem nachweislich in der lokalen Testumgebung.
KI-Agenten prüfen nach dem Pull der Änderungen eigenständig die Wirksamkeit des Fixes.
Die Markierung als gelöst in der Better Stack-UI erfolgt synchron durch einen Terminal-Befehl.

Nachdem der Fehler nicht mehr reproduzierbar ist, übernimmt der Agent die administrativen Aufgaben. Anstatt die Weboberfläche zu besuchen, weist der Entwickler die KI an, den Status aller Instanzen des Fehlers zu aktualisieren. Dieser Prozess lässt sich für eine vollständige Bereinigung der Fehlerliste beliebig oft wiederholen.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video