07 Probar, fallar y corregir

Inyecta un fallo conocido, diagnostícalo mediante ClickStack, aplica una corrección y demuestra la recuperación.

Resultado

En unos 20 minutos, gestionarás un incidente desde el fallo hasta la recuperación verificada. Este módulo continúa directamente desde el módulo 06 y usa el ClickStack MCP configurado en el módulo 00.

Paso 1: elige un fallo

Empieza por el fallo 01. El fallo 02 es un segundo ejercicio breve; el fallo 03 necesita un conjunto de datos mayor para producirse de forma fiable.

Branch	Fallo esperado	Recompilar
`fault/01-map-not-loading`	Desaparecen los polígonos del mapa; las demás tarjetas funcionan	front-end
`fault/02-zone-stats-500`	Los datos del mapa de zonas fallan con HTTP 500	back-end
`fault/03-slow-dashboard`	La solicitud de tendencia alcanza el timeout; usa solo datos de varios meses	back-end

Paso 2: inyecta y reproduce el fallo

El ejemplo siguiente inyecta el fallo 01 y conserva cualquier trabajo local:

cd "$(git rev-parse --show-toplevel)"
git stash push --include-untracked -m "before-module-07"
git switch build-workshop-v1
git switch fault/01-map-not-loading

cd workshops/build_workshop/app
docker compose --env-file .env.workshop \
  -f docker-compose.workshop.yml \
  -f docker-compose.otel.yml \
  up -d --build frontend

Abre una sesión nueva del navegador en localhost:8080. Ahora se espera que el mapa esté vacío; un fallo en otro lugar no forma parte de este escenario.

Paso 3: diagnostica a partir de las pruebas

Proporciona al agente el síntoma, no la respuesta:

Using the clickstack MCP, investigate the current workshop failure.
Correlate frontend and backend telemetry, identify the root cause, and cite the exact
events, request, response content type, or trace that supports the conclusion.
Do not edit code yet.

Para el fallo 01, inspecciona también ClickStack → Client Sessions. Las pruebas útiles son un error del front-end y un fallo al analizar un recurso; los traces correctos del back-end también son pruebas, porque reducen el radio de impacto.

ClickStack Client Sessions muestra el error del front-end y la repetición de la sesión con el mapa vacío

Antes de corregir nada, anota:

el componente que falla;
las pruebas que lo demuestran;
una comprobación de recuperación que falle antes de la corrección y funcione después.

Paso 4: corrige y recompila

Pide al agente que haga el cambio mínimo que resuelva la causa demostrada y, después, recompila el servicio afectado. Para el fallo 01:

docker compose --env-file .env.workshop \
  -f docker-compose.workshop.yml \
  -f docker-compose.otel.yml \
  up -d --build frontend

Para el fallo 02 o 03, sustituye frontend por backend.

Abre una sesión nueva del navegador. El síntoma original debe haber desaparecido, y ClickStack no debe mostrar ningún error nuevo que coincida. Los eventos antiguos del incidente permanecen en el intervalo temporal elegido; compara las marcas de tiempo en lugar de esperar que desaparezca el historial.

Paso 5: vuelve a la referencia limpia

Conserva tu intento de corrección, restaura build-workshop-v1 y recompila ambos servicios de la aplicación:

cd "$(git rev-parse --show-toplevel)"
git stash push --include-untracked -m "module-07-fix"
git switch build-workshop-v1

cd workshops/build_workshop/app
docker compose --env-file .env.workshop \
  -f docker-compose.workshop.yml \
  -f docker-compose.otel.yml \
  up -d --build frontend backend

Comprobación final

El síntoma inyectado apareció antes de la corrección.
El agente citó la telemetría que demuestra la causa raíz.
La misma comprobación de recuperación funciona después de la corrección.
Una sesión nueva no crea ningún error coincidente.
git branch --show-current devuelve build-workshop-v1.

Continúa en 08 Chat y Langfuse.