React
Explica cómo los Error Boundaries aíslan errores de renderizado, muestran fallbacks y permiten recuperar secciones sin derribar toda la aplicación.
Una Error Boundary captura errores lanzados durante render, constructores y ciclos de vida de descendientes, y reemplaza ese subárbol por una interfaz alternativa.
React todavía requiere un componente de clase para implementar una boundary directamente:
class ErrorBoundary extends React.Component<Props, State> {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error: Error, info: React.ErrorInfo) {
reportError(error, info);
}
render() {
if (this.state.hasError) return this.props.fallback;
return this.props.children;
}
}Coloca boundaries alrededor de unidades que pueden fallar de forma independiente: contenido principal, editor, panel de datos o ruta.
Cambiar una key puede crear una instancia limpia después de reintentar.
Suspense maneja espera; Error Boundary maneja fallo. Suelen combinarse.
Una boundary limita el radio de daño y permite que el resto de la aplicación continúe funcionando.
Una boundary captura errores de descendientes durante render y fases de React compatibles. La propia boundary permanece disponible para mostrar fallback.
App
├─ Header
└─ ErrorBoundary
└─ AnalyticsWidget ✕
↓
WidgetFallbackEl Header continúa funcionando. La granularidad define el radio de daño.
class ErrorBoundary extends React.Component<
{ fallback: React.ReactNode; children: React.ReactNode; onError?: (error: Error, info: React.ErrorInfo) => void },
{ hasError: boolean }
> {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error: Error, info: React.ErrorInfo) {
this.props.onError?.(error, info);
}
render() {
if (this.state.hasError) return this.props.fallback;
return this.props.children;
}
}La API base sigue usando class component. Frameworks y librerías pueden ofrecer wrappers, hooks auxiliares o boundaries por ruta.
Handlers deben usar try/catch cuando pueden recuperarse localmente:
async function handleSave() {
try {
await save();
} catch (error) {
setMessage(toUserMessage(error));
}
}Promise pendiente → Suspense fallback
Promise rechazada → Error Boundary
error de render → Error BoundaryCombina ambas:
<ErrorBoundary fallback={<ReportsError />}>
<Suspense fallback={<ReportsSkeleton />}>
<Reports />
</Suspense>
</ErrorBoundary>Una boundary que quedó en hasError necesita una transición para reintentar. Opciones:
resetKeys.<ErrorBoundary key={reportId} fallback={<ReportError />}>
<Report id={reportId} />
</ErrorBoundary>Cambiar entidad crea una boundary limpia. Para reintentar la misma, expón un reset controlado.
Un buen fallback:
<section role="alert" aria-labelledby="widget-error-title">
<h2 id="widget-error-title">No pudimos cargar el reporte</h2>
<button type="button" onClick={retry}>Intentar de nuevo</button>
</section>componentDidCatch recibe componentStack, útil para saber qué subárbol falló. Registra:
No incluyas tokens, formularios completos o datos personales innecesarios.
Boundary global: evita pantalla blanca, pero fallback de toda la app puede ser brusco.
Boundary por ruta: buena para pantallas independientes.
Boundary por widget: permite que dashboard continúe.
Demasiadas boundaries también añaden ruido y pueden ocultar errores repetidos. Colócalas donde existe una estrategia real de recuperación.
No lances errores para cualquier estado normal:
Modela esos casos como datos o rutas. Usa boundary para fallos que impiden renderizar la región con normalidad.
Si el subárbol se desmonta al fallar, su state puede perderse. Para editores importantes:
Frameworks pueden manejar errores de servidor mediante archivos o boundaries de ruta. No asumas que una class boundary cliente captura todo error del servidor. Documenta la capa:
Crea un componente que lance:
function Broken() {
throw new Error("boom");
}Verifica fallback, logging y reset. Suprime el ruido esperado de consola de forma localizada, no global. Prueba también errores en handlers por separado porque no los captura la boundary.
Datos remotos, caché y server state distingue errores de render de estados normales de una fuente remota.