Claude Code + Better Stack : La seule configuration de débogage d'erreurs qu'il vous faut

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

Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00Le suivi d'erreurs dans Better Stack est vraiment impressionnant.

00:00:02Il prend en charge n'importe quel type d'application,

00:00:04reproduit les sessions,

00:00:05et vous donne même un prompt que vous pouvez intégrer

00:00:07à n'importe quel agent de codage IA avec des infos cruciales

00:00:10pour vous aider à corriger les erreurs rapidement.

00:00:11Mais il n'est pas très efficace d'ouvrir le navigateur

00:00:13et de coller l'erreur dans votre agent de codage,

00:00:15surtout si vous avez des tonnes d'erreurs à gérer.

00:00:17C'est là qu'intervient le serveur MCP Better Stack,

00:00:20accélérant massivement votre processus de débogage

00:00:22en donnant à votre agent toutes les infos sur vos erreurs

00:00:25pour qu'il puisse les corriger directement dans le terminal.

00:00:27Voyons exactement comment cela fonctionne.

00:00:28Et avant de commencer, n'oubliez pas de vous abonner.

00:00:30Pour cette démo, nous allons corriger une erreur

00:00:36sur mon application d'émulation vidéo.

00:00:37Il s'agit d'une véritable erreur.

00:00:39Ce n'est pas une invention pour cette vidéo,

00:00:41elle survient de temps à autre.

00:00:43Je vais donc essayer de la reproduire en direct.

00:00:44Cela arrive chaque fois que je télécharge une vidéo.

00:00:46Je vais télécharger un Short sur Kent C. Dodds,

00:00:49que vous trouverez sur la chaîne Better Stack.

00:00:51Je vais choisir un préréglage.

00:00:52J'aime bien celui-ci car il me rappelle Fallout.

00:00:55Et je vais inspecter les outils de développement.

00:00:57Nous avons déjà deux erreurs,

00:00:59mais ce ne sont pas celles que nous allons corriger.

00:01:01La nouvelle erreur apparaît si je manipule la timeline.

00:01:03Je vais donc scroller un peu et j'espère qu'elle surgira,

00:01:06ce qui finit par arriver.

00:01:08La voici : une erreur de sécurité non capturée,

00:01:10qui empêche le défilement de la timeline.

00:01:12Comme c'est une application React,

00:01:14je l'ai connectée à Better Stack

00:01:15en utilisant le SDK React de Sentry.

00:01:17Et j'utilise un DSN spécifique à Better Stack,

00:01:19que vous obtenez facilement en connectant une appli,

00:01:22en choisissant le type d'appli à suivre,

00:01:24puis en descendant pour trouver ce prompt,

00:01:27que vous pouvez copier-coller dans votre agent IA.

00:01:29Il s'occupe de toute la configuration.

00:01:30Et après cela,

00:01:31nous voyons les erreurs arriver dans Better Stack.

00:01:33Voici celle qui s'est déclenchée récemment,

00:01:34il y a environ six minutes.

00:01:35En cliquant dessus, on accède à plein de données,

00:01:38comme les infos du navigateur,

00:01:39les étapes exactes ayant mené à l'erreur.

00:01:41On peut même cliquer ici pour que l'IA nous l'explique.

00:01:44On pourrait aussi visionner un replay anonyme

00:01:46de tout ce qui a précédé cette erreur.

00:01:48Mais concentrons-nous sur la correction via Claude Code.

00:01:51On pourrait cliquer sur le prompt IA

00:01:53et le copier directement dans Claude Code,

00:01:55mais cela pourrait être fastidieux

00:01:57si nous avons beaucoup d'erreurs à traiter.

00:01:59Récupérons donc ces infos directement dans Claude Code

00:02:02grâce au serveur MCP Better Stack,

00:02:04que j'ai déjà configuré,

00:02:05mais vous pouvez le faire en lançant cette commande

00:02:07ou en éditant la config de votre environnement

00:02:10et en vous connectant à Better Stack.

00:02:11Le serveur MCP donne accès à de nombreux outils utiles.

00:02:15Et si vous voulez économiser du contexte,

00:02:16vous pouvez activer le chargement différé des outils

00:02:18dans le fichier JSON de configuration de Claude,

00:02:19ce qui ne chargera que les outils nécessaires

00:02:21au lieu de tout mettre dans le contexte.

00:02:23Comme je suis déjà dans le répertoire du projet,

00:02:26je peux écrire un prompt du style :

00:02:27"donne-moi tous les détails des erreurs pour cette appli".

00:02:29Claude Code utilise les bons outils pour trouver l'appli

00:02:32et me donne un résumé des dernières erreurs.

00:02:35C'est déjà très puissant en soi

00:02:36car vous pouvez automatiser cela en routine

00:02:40pour recevoir un e-mail à chaque nouvelle erreur,

00:02:42une notification sur WhatsApp ou Telegram,

00:02:44ou même laisser Claude créer automatiquement des PR

00:02:46contenant les correctifs des nouveaux problèmes.

00:02:47Pour l'instant, examinons cette erreur de sécurité,

00:02:50pour laquelle il a déjà suggéré un prompt.

00:02:52Mais je vais plutôt lui demander

00:02:54s'il y a d'autres erreurs liées à celle-ci,

00:02:56afin de pouvoir les corriger ensemble.

00:02:58Il analyse maintenant le code en parallèle

00:03:01et me donne la cause profonde du problème

00:03:03avec une proposition de correction,

00:03:04en précisant que les erreurs 404 sont à part.

00:03:07Il ne va donc pas les regrouper.

00:03:08Demandons maintenant à Claude de corriger le souci

00:03:10dans une nouvelle branche et de créer une Pull Request,

00:03:12ce qu'il fait très rapidement.

00:03:14En regardant la PR,

00:03:16vérifions les fichiers modifiés.

00:03:17C'est incroyable que cette simple ligne de code

00:03:20puisse tout résoudre.

00:03:21Je vais tester cela localement

00:03:23et après avoir manipulé l'appli quelques minutes,

00:03:25je peux confirmer que l'erreur ne se reproduit plus.

00:03:27La PR a maintenant été fusionnée

00:03:29et on peut alors faire quelque chose de génial.

00:03:31Au lieu d'aller manuellement dans Better Stack

00:03:33pour cliquer sur le bouton "résoudre",

00:03:35je peux juste récupérer les changements,

00:03:36puis dire à Claude de vérifier que le fix est là

00:03:38et si oui, de résoudre le problème dans Better Stack.

00:03:41Il a confirmé que le correctif est en place

00:03:43et il résout les trois alertes dans Better Stack,

00:03:45ce qu'il a fait pendant que je parlais.

00:03:47Si nous retournons sur l'interface de Better Stack,

00:03:49on voit que ce problème a été résolu,

00:03:51ainsi que toutes ses occurrences précédentes.

00:03:53Et on peut répéter ces étapes encore et encore

00:03:56jusqu'à corriger chaque erreur de notre application.

00:03:58Je pense sincèrement que c'est vers cela

00:04:00que nous nous dirigeons.

00:04:01Nous utiliserons plus d'agents et moins l'interface

00:04:03ou le navigateur, car c'est bien plus pratique.

00:04:07Je vous recommande de tester le serveur MCP Better Stack

00:04:09pour voir exactement comment il peut

00:04:11accélérer votre flux de travail de débogage.

00:04:12Et si vous voulez plus de détails

00:04:14sur le serveur MCP lui-même,

00:04:16allez voir cette vidéo de James.

Key Takeaway

L'utilisation du serveur MCP Better Stack avec Claude Code transforme le débogage manuel en un flux automatisé où l'IA extrait les logs, rédige les Pull Requests et résout les alertes directement depuis le terminal.

Highlights

L'intégration de Better Stack avec Claude Code via le protocole MCP permet de résoudre des erreurs de production sans quitter le terminal.
Le SDK React de Sentry permet de connecter une application à Better Stack en utilisant un DSN spécifique pour le suivi en temps réel.
Claude Code identifie la cause profonde des erreurs de sécurité et génère automatiquement des correctifs dans une nouvelle branche Git.
L'activation du chargement différé (lazy loading) dans le fichier de configuration JSON de Claude économise du contexte en ne chargeant que les outils MCP nécessaires.
Le serveur MCP automatise la fermeture des alertes dans l'interface Better Stack une fois que le correctif est vérifié localement par l'IA.
Les erreurs 404 sont traitées séparément des erreurs logiques pour éviter les regroupements de correctifs incohérents.

Timeline

Limites du débogage manuel et rôle du serveur MCP

Le suivi d'erreurs traditionnel nécessite des allers-retours fastidieux entre le navigateur et l'agent de codage.
Le serveur MCP Better Stack transmet directement toutes les données d'erreurs à l'agent IA dans le terminal.
La reproduction des sessions et les prompts contextuels accélèrent la correction des bugs complexes.

L'ouverture constante du navigateur pour copier-coller des erreurs nuit à l'efficacité, surtout lors de la gestion de volumes importants. Le protocole MCP élimine cette friction en agissant comme un pont de données. L'agent accède ainsi instantanément aux informations cruciales pour le diagnostic.

Identification d'une erreur de sécurité en conditions réelles

Une erreur de sécurité non capturée bloque le défilement de la timeline dans une application d'émulation vidéo.
Le bug survient spécifiquement lors du téléchargement de fichiers et de la manipulation de la ligne de temps.
Les outils de développement confirment l'impact critique sur l'expérience utilisateur.

L'application de démonstration subit une erreur authentique lors de l'utilisation d'un préréglage visuel de type Fallout. En manipulant la timeline après le chargement d'une vidéo courte, une exception de sécurité interrompt le fonctionnement normal. Ce cas concret sert de base pour tester l'efficacité de la chaîne de débogage IA.

Configuration technique et collecte de données contextuelles

L'application React utilise le SDK Sentry configuré avec un point de terminaison Better Stack.
Better Stack enregistre les données du navigateur et les étapes exactes ayant mené à l'incident.
Les replays anonymes offrent une vue visuelle des actions de l'utilisateur précédant le crash.

La connexion s'établit via un DSN spécifique fourni par la plateforme après avoir sélectionné le type d'application à surveiller. Un prompt de configuration automatisé facilite l'installation du SDK. Une fois l'erreur déclenchée, l'interface affiche un rapport complet incluant l'environnement logiciel et le parcours de l'utilisateur.

Résolution automatisée via Claude Code et le protocole MCP

La commande de configuration du serveur MCP relie l'environnement local aux alertes Better Stack.
Claude Code analyse le code source en parallèle des logs d'erreurs pour proposer un correctif précis.
L'IA génère une branche et une Pull Request contenant les modifications nécessaires en quelques secondes.

Le chargement différé des outils dans le fichier JSON de Claude optimise l'utilisation des jetons de contexte. En demandant simplement les détails de l'application, l'utilisateur reçoit un résumé structuré des problèmes. L'IA est capable de distinguer les erreurs liées entre elles des bruits de fond comme les erreurs 404, permettant une intervention ciblée.

Validation du correctif et clôture automatique des alertes

Le test local confirme que la manipulation de la timeline ne déclenche plus l'erreur de sécurité.
L'agent IA vérifie la présence du fix dans le code avant de communiquer avec l'API Better Stack.
Toutes les occurrences passées du problème sont marquées comme résolues automatiquement.

Après la fusion de la Pull Request, l'utilisateur demande à Claude de confirmer la résolution. L'agent parcourt les changements récents et, une fois la validation effectuée, ferme les alertes correspondantes sur la plateforme de monitoring. Ce cycle réduit la dépendance aux interfaces graphiques au profit d'un flux de travail piloté par les agents.

Community Posts

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

Write about this video