ErrorBoundary
ErrorBoundary es el centro de la libreria.
Modos de fallback (elige uno)
1) fallback: un ReactNode estatico
TSX
1<ErrorBoundary fallback={<div>Fallback simple</div>}>2 <Page />3</ErrorBoundary>COPIAR
2) fallbackRender: render prop (recibe props)
TSX
1import { ErrorBoundary } from "react-rescuer";2
3<ErrorBoundary4 fallbackRender={({ error, errorContext, resetError, retryCount }) => (5 <div>6 <div>{error.message}</div>7 <div>fingerprint: {errorContext.fingerprint}</div>8 <div>retryCount: {retryCount}</div>9 <button type="button" onClick={resetError}>10 Retry11 </button>12 </div>13 )}14>15 <Page />16</ErrorBoundary>;COPIAR
3) FallbackComponent: componente de fallback
TSX
1import { ErrorBoundary } from "react-rescuer";2import type { FallbackProps } from "react-rescuer";3
4function FallbackUI({ error, resetError }: FallbackProps) {5 return (6 <div>7 <div>Error: {error.message}</div>8 <button onClick={resetError}>Reset</button>9 </div>10 );11}12
13<ErrorBoundary FallbackComponent={FallbackUI}>14 <Page />15</ErrorBoundary>;COPIAR
Que ocurre internamente cuando se atrapa un error
Cuando un hijo falla durante render:
- React llama
componentDidCatch(error, errorInfo). - El boundary incrementa su contador interno
errorCount. - Construye
boundaryProps(snapshot de configuracion) y genera unErrorContext. - Llama
onError?.(error, errorInfo, errorContext). - Renderiza el fallback elegido (y provee
ErrorContextvia React context parauseErrorContext).
level / isolate
Existen como props y se incluyen dentro del boundaryProps que termina dentro
de ErrorContext. Hoy no cambian el comportamiento de captura/reset; puedes
usarlos como metadata.
API reference
ERRORBOUNDARYPROPS
Nombre
Tipo
Req.
Descripcion
children
React.ReactNode
si
Arbol hijo a proteger.
level
ErrorBoundaryLevel
no
Metadata: page | section | component.
isolate
boolean
no
Metadata que se incluye en boundaryProps.
resetKeys
unknown[]
no
Resetea automaticamente cuando cambia (Object.is por elemento).
FallbackComponent
React.ComponentType<FallbackProps>
no
Componente de fallback.
fallbackRender
(props: FallbackProps) => React.ReactNode
no
Render prop para fallback.
fallback
React.ReactNode
no
Fallback estatico.
onError
(error, errorInfo, errorContext) => void
no
Callback de captura para reporting.
onReset
(details: { reason: ResetReason }) => void
no
Callback en cada reset.
recovery
RecoveryStrategy
no
Habilita reintentos con limite y delay.
getBreadcrumbs
() => Breadcrumb[]
no
Inyeccion de breadcrumbs (opcional).
fingerprint
(error) => string
no
Estrategia de fingerprint (opcional).
contextBuilder
(error, errorInfo, options) => ErrorContext
no
Builder para ErrorContext (opcional).
FALLBACKPROPS
Nombre
Tipo
Req.
Descripcion
error
E extends Error
si
Error capturado.
errorContext
ErrorContext
si
Contexto estructurado del error.
resetError
() => void
si
Resetea el boundary (o inicia retry si hay recovery).
retryCount
number
si
Numero de reintentos realizados.
RECOVERYSTRATEGY
Nombre
Tipo
Req.
Descripcion
maxRetries
number
si
Maximo numero de intentos.
retryDelay
number | ((attempt, error) => number)
no
Delay fijo o dinamico antes del retry.
isRecoverable
(error) => boolean
no
Si retorna false, resetError hace reset inmediato (no cuenta como retry).
onMaxRetriesReached
(error, context) => void
no
Se llama al superar el maximo; en ese caso NO se resetea.
Tipos base
TS
1export type ErrorBoundaryLevel = "page" | "section" | "component";2export type BreadcrumbType = "click" | "navigation" | "custom";3
4export type Breadcrumb = {5 type: BreadcrumbType;6 timestamp: number;7 message?: string;8 data?: Record<string, unknown>;9};10
11export type ErrorContext = {12 error: Error;13 fingerprint: string;14 breadcrumbs: Breadcrumb[];15 componentStack: string;16 timestamp: number;17 sessionId: string;18 errorCount: number;19 boundaryProps?: unknown;20};COPIAR