ADR-001: Error Boundary en tanko-web

• Estado: aceptada
• Fecha: 2026-05-17

Contexto

tanko-web es un static export de Next.js sin SSR. No existe ningún servidor que pueda interceptar una excepción ocurrida durante el render: si un componente lanza un error no capturado, React desmonta el árbol completo y el usuario ve una página en blanco sin ningún mensaje de error ni posibilidad de recuperarse.

Decisión

Se añade un componente ErrorBoundary de clase React en el root layout de la aplicación (app/layout.tsx). El componente envuelve todo el árbol de la app y, ante cualquier excepción de render, muestra una pantalla de recuperación mínima (mensaje de error + botón "Recargar página") en lugar de la pantalla en blanco.

React exige que los Error Boundaries sean componentes de clase (componentDidCatch / getDerivedStateFromError no están disponibles como hooks), por lo que se acepta la excepción al patrón de componentes funcionales que sigue el resto de la app.

Consecuencias

Positivas:

• Los errores de render quedan contenidos en la UI: el usuario recibe feedback y puede intentar una recarga sin intervención manual.
• El componente actúa como red de seguridad general; los errores siguen propagándose a los sistemas de monitorización (Sentry u otro) via componentDidCatch.

Negativas / limitaciones:

• Esta solución no captura errores asíncronos (llamadas fetch, promesas rechazadas, callbacks de setTimeout). Esos casos se gestionan dentro de los hooks de estado de cada feature (por ejemplo, estados de error en useCheapestStations).
• No captura errores en manejadores de eventos (onClick, etc.) — React ya los aísla por defecto.
• Introduce un componente de clase en una base de código otherwise funcional; debe mantenerse acotado y no extenderse.