Error Boundary
Aísla los errores para que no derrumben toda la UI
Sin un Error Boundary, un error en cualquier componente hijo destruye el árbol completo y el usuario ve una pantalla en blanco. Un Error Boundary intercepta el error, muestra una UI de fallback y deja el resto de la aplicación intacta.
¿Por qué existen?
React propaga los errores de render hacia arriba hasta que algo los captura. Si nada lo hace, el árbol entero se desmonta. Un Error Boundary actúa como un try/catch para el árbol de componentes: captura el error, actualiza su propio estado para mostrar un fallback y deja intacto el resto de la app. Es la base de la degradación elegante en React.
Cómo se construye
Debe ser una clase — no existe equivalente nativo con componentes funcionales. Necesita dos métodos de ciclo de vida:
static getDerivedStateFromError(error)— método estático y puro que devuelve el nuevo estado. React lo llama durante la fase de render para mostrar el fallback.componentDidCatch(error, info)— se ejecuta después del render. Aquí van los side effects: logs, envío a un servicio de monitoreo (Sentry, Datadog…).
Úsalo igual que <Suspense>: envuelve el subárbol que quieres proteger.
Qué captura y qué no
✅ Captura errores en el render, métodos de ciclo de vida y constructores de componentes hijos.
❌ No captura:
- Event handlers — los eventos no pasan por el ciclo de render de React. Usa
try/catchdentro del handler. - Código asíncrono —
setTimeout,fetch, promesas. El error ocurre fuera del árbol de React. - Renderizado en servidor (SSR).
- Sus propios errores — un Error Boundary no puede capturarse a sí mismo. Necesitas otro Error Boundary padre.
Tropiezos comunes
- 01Los event handlers no propagan errores al árbol de React — usa try/catch dentro del handler, no un Error Boundary.
- 02Un Error Boundary no puede capturar sus propios errores — necesitas otro Error Boundary padre que lo envuelva.
- 03En desarrollo con StrictMode, React vuelve a lanzar el error intencionalmente tras capturarlo. En producción el comportamiento es el esperado.
- 04El botón de reintentar no basta con resetear hasError si el componente hijo sigue fallando. Pasa una key que cambie cuando quieras que React desmonte y vuelva a montar el boundary desde cero.