Claude Code + Better Stack: El único sistema de depuración de errores que necesitas

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

Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00El seguimiento de errores en Better Stack es impresionante.

00:00:02Es compatible con cualquier tipo de aplicación que quieras crear,

00:00:04reproduce grabaciones de sesiones,

00:00:05e incluso te da un comando que puedes introducir

00:00:07en cualquier agente de IA con información importante

00:00:10para ayudarte a corregir errores rápidamente.

00:00:11Pero no es muy eficiente abrir el navegador

00:00:13y pegar el error en tu agente de programación,

00:00:15especialmente si tienes montones de errores que resolver.

00:00:17Aquí es donde entra el servidor MCP de Better Stack,

00:00:20acelerando enormemente tu proceso de depuración

00:00:22al darle a tu agente toda la información sobre tus errores

00:00:25que puede usar para solucionarlo en la terminal.

00:00:27Veamos exactamente cómo funciona.

00:00:28Y antes de hacerlo, no olvides suscribirte.

00:00:30Para esta demostración, vamos a corregir un error

00:00:36con mi aplicación de emulación de vídeo.

00:00:37Este es un error real.

00:00:39No es uno que me haya inventado para este vídeo

00:00:41y ocurre de vez en cuando.

00:00:43Así que voy a intentar replicarlo en directo.

00:00:44Sucede cada vez que subo un vídeo.

00:00:46Voy a subir un short que hice sobre Kent C. Dodds,

00:00:49que puedes encontrar en el canal de Better Stack.

00:00:51Elegiré un ajuste preestablecido.

00:00:52Me suele gustar este porque me recuerda a Fallout.

00:00:55Y voy a inspeccionar las herramientas de desarrollo.

00:00:57Ya tenemos dos errores,

00:00:59pero este no es el que vamos a corregir.

00:01:01Y el nuevo error ocurre si me muevo por la línea de tiempo.

00:01:03Así que me moveré un poco y espero que se active,

00:01:06lo cual acaba sucediendo.

00:01:08Y aquí está, un error de seguridad no detectado,

00:01:10que impide que la línea de tiempo se desplace.

00:01:12Ahora, como esta es una aplicación de React,

00:01:14la he conectado a Better Stack

00:01:15usando el SDK de Sentry para React.

00:01:17Y uso un DSN específico de Better Stack,

00:01:19que puedes obtener fácilmente conectando una aplicación,

00:01:22eligiendo el tipo de app en la que quieres rastrear errores,

00:01:24y luego bajando hasta encontrar este mensaje,

00:01:27que puedes copiar y pegar en tu agente de IA.

00:01:29Y él se encarga de toda la configuración.

00:01:30Y después de eso,

00:01:31podemos ver que estamos recibiendo errores en Better Stack.

00:01:33Aquí está el que se activó hace poco,

00:01:34hace unos seis minutos.

00:01:35Y si hacemos clic, podemos obtener un montón de datos,

00:01:38como información del navegador,

00:01:39o los pasos exactos que llevaron a este error.

00:01:41Incluso podemos clicar aquí para que la IA nos lo explique.

00:01:44También podríamos ver una repetición de sesión anónima

00:01:46de todo lo que ocurrió antes de ese error.

00:01:48Pero por ahora, centrémonos en arreglarlo usando Claude Code.

00:01:51Podríamos hacer clic en el prompt de IA

00:01:53y copiarlo directamente en Claude Code,

00:01:55pero esto podría ser muy tedioso

00:01:57si tenemos muchos errores que queremos resolver.

00:01:59Así que llevemos esta información directamente a Claude Code

00:02:02usando el servidor MCP de Better Stack,

00:02:04que ya tengo configurado,

00:02:05pero puedes hacerlo ejecutando este comando

00:02:07o editando la configuración de tu entorno de programación

00:02:10e iniciando sesión en Better Stack.

00:02:11El servidor MCP nos da acceso a muchas herramientas útiles.

00:02:15Y si quieres ahorrar contexto,

00:02:16puedes activar la carga diferida de herramientas

00:02:18en el archivo JSON de configuración de Claude,

00:02:19que solo carga las herramientas que necesitas

00:02:21en lugar de ponerlo todo en el contexto.

00:02:23Ahora, como ya estoy en el directorio del proyecto,

00:02:26puedo escribir un mensaje como:

00:02:27"dame todos los detalles del error para esta aplicación".

00:02:29Claude Code usa las herramientas adecuadas para buscar la app

00:02:32y me da un resumen de los últimos errores.

00:02:35Esto ya es de por sí muy potente

00:02:36porque puedes hacer que esto se ejecute como una rutina

00:02:40y te envíe un email cada vez que haya un error nuevo,

00:02:42te avise por WhatsApp o Telegram,

00:02:44o incluso hacer que Claude cree PRs automáticamente

00:02:46con soluciones a los nuevos problemas.

00:02:47Por ahora, busquemos los detalles de este error de seguridad,

00:02:50para el cual ya nos ha sugerido un mensaje.

00:02:52Pero lo que voy a hacer es preguntarle

00:02:54si hay otros errores relacionados con este,

00:02:56para que puedan solucionarse juntos.

00:02:58Ahora está obteniendo los detalles del código en paralelo

00:03:01y me está dando la causa raíz del problema

00:03:03con una propuesta de solución,

00:03:04y me indica que los errores 404 son un tema aparte.

00:03:07Así que no los agrupará.

00:03:08Ahora hagamos que Claude solucione el problema de seguridad

00:03:10en una nueva rama y cree una solicitud de extracción (PR),

00:03:12lo cual ha hecho muy rápido.

00:03:14Y mirando el PR,

00:03:16echaremos un vistazo a los archivos modificados.

00:03:17No puedo creer que sea solo esta línea de código

00:03:20la que lo soluciona todo.

00:03:21Así que voy a probar esto localmente

00:03:23y tras moverme por la línea de tiempo unos minutos,

00:03:25puedo decir con confianza que no logro reproducir el error.

00:03:27Así que ahora el PR ha sido fusionado

00:03:29y en este punto, podemos hacer algo genial.

00:03:31En lugar de entrar manualmente en Better Stack

00:03:33y hacer clic en el botón de resolver,

00:03:35puedo simplemente bajar los nuevos cambios,

00:03:36decirle a Claude que verifique que la solución está aplicada

00:03:38y, si es así, que resuelva el problema en Better Stack.

00:03:41Ya ha confirmado que la solución está aplicada

00:03:43y está resolviendo los tres fallos de seguridad en Better Stack,

00:03:45lo cual hizo mientras yo hablaba.

00:03:47Si volvemos a la interfaz de Better Stack,

00:03:49podemos ver que este problema ha sido resuelto,

00:03:51al igual que todas sus apariciones anteriores.

00:03:53Y podemos repetir estos pasos una y otra vez

00:03:56hasta que solucionemos cada error de nuestra app.

00:03:58Sinceramente creo que esta es la dirección

00:04:00en la que van las cosas.

00:04:01Usaremos más agentes y visitaremos menos la interfaz

00:04:03o el navegador porque es simplemente más cómodo.

00:04:07Así que te recomiendo probar el servidor MCP de Better Stack

00:04:09para ver exactamente qué puede hacer

00:04:11para acelerar tu flujo de trabajo de depuración.

00:04:12Y si quieres conocer más detalles

00:04:14sobre el propio servidor MCP,

00:04:16entonces echa un vistazo a este vídeo de James.

Key Takeaway

La integración del servidor MCP de Better Stack con Claude Code permite automatizar la depuración de errores directamente desde la terminal, desde la identificación del fallo hasta la creación y resolución de solicitudes de extracción sin usar el navegador.

Highlights

El servidor MCP de Better Stack conecta directamente los datos de errores con Claude Code en la terminal.
La configuración inicial permite el rastreo de errores mediante el SDK de Sentry para React con un DSN específico de Better Stack.
Claude Code puede generar ramas de Git y solicitudes de extracción (PR) automáticas para corregir fallos de seguridad detectados.
La función de carga diferida de herramientas en el archivo JSON de configuración de Claude optimiza el uso de la ventana de contexto.
Better Stack proporciona grabaciones de sesiones anónimas y registros del navegador para identificar la causa raíz de errores no detectados.

Timeline

Conexión de telemetría de errores

Better Stack registra errores en cualquier tipo de aplicación y permite reproducir sesiones de usuario.
Los agentes de IA reciben comandos con información contextual para acelerar la resolución de problemas.
La integración en aplicaciones React se realiza mediante el SDK de Sentry utilizando un DSN de Better Stack.

El sistema captura errores de seguridad no detectados en tiempo real durante la interacción con la aplicación, como fallos al subir videos o navegar por líneas de tiempo. Los datos recopilados incluyen información técnica del navegador y los pasos exactos que el usuario realizó antes del error. Esta base de datos sirve como la fuente de información principal para los agentes de programación automatizados.

Automatización con el servidor MCP

El servidor MCP elimina la necesidad de copiar y pegar errores manualmente desde el navegador hacia la terminal.
La carga diferida de herramientas en la configuración de Claude ahorra espacio en el contexto de la IA.
Claude Code puede ejecutar rutinas para enviar notificaciones de errores nuevos vía WhatsApp, Telegram o correo electrónico.

La instalación del servidor MCP se realiza mediante comandos de terminal o editando el archivo de configuración del entorno de programación. Al estar en el directorio del proyecto, Claude accede a las herramientas de Better Stack para listar y resumir los últimos errores registrados. Esta infraestructura permite que la IA actúe de forma proactiva sugiriendo soluciones o creando informes detallados sin intervención humana constante.

Resolución de errores y cierre de incidencias

Claude identifica la causa raíz del problema analizando múltiples archivos de código en paralelo.
La IA genera soluciones técnicas en ramas independientes y crea solicitudes de extracción funcionales.
El estado de los errores en el panel de Better Stack se actualiza a 'resuelto' automáticamente desde la terminal.

Tras recibir una descripción del error, Claude propone una corrección específica que a menudo se reduce a una sola línea de código tras descartar errores no relacionados como los 404. Una vez que el desarrollador fusiona el código, Claude verifica la aplicación local de los cambios y cierra el incidente en la plataforma de Better Stack. Este flujo de trabajo reduce drásticamente el tiempo de depuración al centralizar todas las operaciones en la interfaz de línea de comandos.

Community Posts

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

Write about this video