Claude Code + Better Stack: O Único Setup de Depuração de Erros Que Você Precisa

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

Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00O rastreamento de erros no Better Stack é impressionante.

00:00:02Ele suporta qualquer tipo de app que você queira criar,

00:00:04renderiza replays de sessão,

00:00:05e até fornece um prompt que você pode inserir

00:00:07em qualquer agente de codificação de IA com informações importantes

00:00:10para ajudar você a corrigir erros rapidamente.

00:00:11Mas não é muito eficiente abrir o navegador

00:00:13e colar o erro no seu agente de codificação,

00:00:15especialmente se você tiver muitos erros para lidar.

00:00:17É aqui que o servidor MCP do Better Stack entra,

00:00:20acelerando massivamente seu processo de depuração

00:00:22ao dar ao seu agente todas as informações sobre seus erros

00:00:25que ele pode usar para corrigi-los no terminal.

00:00:27Vamos ver exatamente como isso funciona.

00:00:28E antes disso, não se esqueça de se inscrever.

00:00:30Para esta demonstração, vamos corrigir um erro

00:00:36no meu aplicativo de emulação de vídeo.

00:00:37Este é um erro real.

00:00:39Não é um que eu inventei para este vídeo

00:00:41e ele acontece de vez em quando.

00:00:43Vou tentar replicá-lo ao vivo.

00:00:44Isso acontece sempre que eu faço o upload de um vídeo.

00:00:46Vou subir um Short que fiz sobre o Kent C. Dodds,

00:00:49que você encontra no canal do Better Stack.

00:00:51Vou escolher um preset.

00:00:52Gosto deste porque me lembra Fallout.

00:00:55E vou inspecionar as ferramentas de desenvolvedor.

00:00:57Já temos dois erros,

00:00:59mas não é esse que vamos corrigir.

00:01:01O novo erro acontece se eu mexer na barra de reprodução.

00:01:03Vou arrastá-la e espero que ele dispare,

00:01:06o que acaba acontecendo.

00:01:08Aqui está: um erro de segurança não capturado,

00:01:10que impede a linha do tempo de rolar.

00:01:12Como este é um app em React,

00:01:14eu o conectei ao Better Stack

00:01:15usando o SDK do Sentry para React.

00:01:17Estou usando um DSN específico do Better Stack,

00:01:19que você consegue facilmente ao conectar uma aplicação,

00:01:22escolhendo o tipo de app cujos erros quer rastrear,

00:01:24e depois rolando para baixo para encontrar este prompt,

00:01:27que você pode copiar e colar no seu agente de IA.

00:01:29Ele cuida de toda a configuração.

00:01:30E depois disso,

00:01:31podemos ver que estamos recebendo erros no Better Stack.

00:01:33Aqui está o que disparou recentemente,

00:01:34há cerca de seis minutos.

00:01:35Se clicarmos nele, obtemos vários dados,

00:01:38como informações do navegador,

00:01:39os passos exatos que levaram a este erro.

00:01:41E podemos até clicar aqui para a IA nos explicar.

00:01:44Também poderíamos assistir a um replay de sessão anônimo

00:01:46de tudo o que aconteceu antes do erro.

00:01:48Mas por enquanto, vamos focar em corrigir isso usando o Claude Code.

00:01:51Poderíamos clicar em "AI prompt"

00:01:53e copiar esse prompt direto para o Claude Code,

00:01:55mas isso pode ser muito tedioso

00:01:57se tivermos muitos erros para lidar.

00:01:59Então, vamos levar essa informação direto para o Claude Code

00:02:02usando o servidor MCP do Better Stack,

00:02:04que eu já tenho configurado,

00:02:05mas você pode fazer isso executando este comando

00:02:07ou editando a configuração do seu ambiente de código

00:02:10e fazendo login no Better Stack.

00:02:11Agora, o servidor MCP nos dá acesso a muitas ferramentas úteis.

00:02:15E se você quiser economizar contexto,

00:02:16pode ativar o carregamento de ferramentas diferido

00:02:18no arquivo settings.json do Claude,

00:02:19que carrega apenas as ferramentas que você precisa

00:02:21em vez de colocar tudo no contexto.

00:02:23Agora, como já estou no diretório do projeto,

00:02:26posso escrever um prompt como:

00:02:27"me dê todos os detalhes de erro para esta aplicação".

00:02:29E o Claude Code usa as ferramentas certas para achar o app correto

00:02:32e me dá um resumo dos últimos erros.

00:02:35Isso já é muito poderoso

00:02:36porque você pode ter isso rodando regularmente como rotina

00:02:40e te enviar um e-mail sempre que houver um novo erro,

00:02:42avisar no WhatsApp ou Telegram,

00:02:44ou até fazer o Claude criar PRs automaticamente

00:02:46com as correções para novos problemas.

00:02:47Por ora, vamos apenas pegar os detalhes deste erro de segurança,

00:02:50para o qual ele já sugeriu um prompt.

00:02:52Mas o que vou fazer é perguntar

00:02:54se há outros erros relacionados a este,

00:02:56para que possam ser corrigidos juntos.

00:02:58E agora ele está pegando os detalhes da base de código em paralelo

00:03:01e me dando a causa raiz do problema

00:03:03com uma sugestão de correção

00:03:04e me dizendo que os erros 404 são um problema separado.

00:03:07Portanto, ele não vai agrupá-los.

00:03:08Agora vamos pedir ao Claude para corrigir o problema de segurança

00:03:10em uma nova ramificação de recurso e criar um pull request,

00:03:12o que ele fez muito rapidamente.

00:03:14E olhando o PR,

00:03:16vamos dar uma olhada nos arquivos alterados.

00:03:17Mal posso acreditar que é apenas essa linha de código

00:03:20que corrige tudo.

00:03:21Então, vou testar isso localmente

00:03:23e, após mexer por alguns minutos,

00:03:25posso dizer com confiança que não consigo reproduzir o erro.

00:03:27Então, agora o PR foi mesclado

00:03:29e, nesta fase, podemos fazer algo muito legal.

00:03:31Em vez de ir manualmente ao Better Stack

00:03:33e clicar no botão de resolver,

00:03:35posso apenas puxar as novas alterações,

00:03:36então dizer ao Claude para verificar se a correção está aplicada

00:03:38e, se estiver, resolver o problema no Better Stack.

00:03:41Agora ele confirmou que a correção está ativa

00:03:43e está resolvendo os três problemas de segurança no Better Stack,

00:03:45o que ele fez enquanto eu falava.

00:03:47Se voltarmos para a interface do Better Stack,

00:03:49podemos ver que este problema foi resolvido

00:03:51assim como todas as ocorrências anteriores dele.

00:03:53E podemos continuar esses passos repetidamente

00:03:56até corrigirmos cada erro em nosso app.

00:03:58Acredito sinceramente que esta é a direção

00:04:00em que as coisas estão indo.

00:04:01Usaremos mais agentes e visitaremos menos a interface

00:04:03ou o navegador, porque é simplesmente mais conveniente.

00:04:07Recomendo que você confira o servidor MCP do Better Stack

00:04:09para ver exatamente o que ele pode fazer

00:04:11para acelerar seu fluxo de trabalho de depuração.

00:04:12E se você quiser saber mais detalhes

00:04:14sobre o próprio servidor MCP,

00:04:16confira este vídeo do James.

Key Takeaway

A integração do servidor MCP do Better Stack com o Claude Code reduz o tempo de depuração ao permitir que agentes de IA identifiquem, corrijam e resolvam erros de produção diretamente via terminal.

Highlights

O servidor MCP do Better Stack permite que agentes de IA como o Claude Code acessem logs de erro diretamente no terminal sem abrir o navegador.
A integração utiliza o SDK do Sentry para React e um DSN específico do Better Stack para capturar falhas em tempo real.
O Claude Code identifica a causa raiz de erros de segurança analisando o código em paralelo com os detalhes fornecidos pelo servidor MCP.
A automação permite criar ramificações de recursos e pull requests para correções de bugs de forma totalmente assistida por IA.
O comando de resolução no terminal sincroniza o estado do erro com o painel do Better Stack, eliminando a necessidade de cliques manuais na interface.
O carregamento de ferramentas diferido no arquivo settings.json do Claude economiza contexto ao carregar apenas os recursos necessários para a tarefa.

Timeline

Integração e Monitoramento de Erros

O Better Stack fornece replays de sessão e prompts prontos para agentes de codificação de IA.
A captura de erros em aplicações React ocorre através da configuração do SDK do Sentry.
O sistema identifica falhas de segurança específicas que interrompem funcionalidades como a rolagem da linha do tempo em vídeos.

O rastreamento de erros suporta diversos tipos de aplicações e gera dados detalhados sobre o ambiente do usuário. O processo de configuração envolve a escolha do tipo de aplicativo e o uso de um DSN exclusivo fornecido pela plataforma. Um erro real de segurança em um app de emulação de vídeo serve como base para demonstrar a eficácia da ferramenta.

Configuração do Servidor MCP e Claude Code

O servidor MCP elimina a tarefa repetitiva de copiar e colar logs de erro no chat da IA.
A instalação do servidor é feita via comando de terminal seguido pelo login no Better Stack.
A ativação do carregamento de ferramentas diferido otimiza o uso do limite de contexto do modelo Claude.

O acesso direto às ferramentas do Better Stack permite que o Claude Code consulte o histórico de erros sem intervenção manual. Essa conexão é estabelecida editando as configurações do ambiente de código ou executando comandos específicos de login. A eficiência do fluxo de trabalho aumenta ao evitar a navegação constante entre abas do navegador e o terminal.

Depuração Automatizada e Resolução

O Claude Code agrupa erros relacionados e distingue falhas de segurança de erros 404 comuns.
A IA gera correções de código em novas ramificações e abre pull requests automaticamente.
O comando de verificação pós-correção resolve os incidentes na plataforma Better Stack de forma remota.

O agente de IA analisa a base de código em paralelo com os logs para sugerir correções precisas em apenas uma linha de código. Após a mesclagem do pull request, o Claude confirma que a alteração está ativa e envia um sinal de resolução para o Better Stack. Esse ciclo de feedback contínuo permite que cada erro no aplicativo seja tratado de forma sistemática por agentes autônomos.

Community Posts

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

Write about this video