Hooks

useErrorBoundary y useErrorContext.

Hooks

useErrorBoundary()

Para errores fuera de render (eventos, async, promesas):

FIRMA

Nombre

Tipo

Req.

Descripcion

useErrorBoundary

() => { showBoundary }

Retorna un objeto con `showBoundary(error)` para elevar el error al boundary mas cercano.

TSX

1import { ErrorBoundary } from "react-rescuer";
2import { useErrorBoundary } from "react-rescuer/hooks";
3
4function SaveButton() {
5  const { showBoundary } = useErrorBoundary();
6
7  return (
8    <button
9      type="button"
10      onClick={async () => {
11        try {
12          await fetch("/api/save");
13          throw new Error("error async");
14        } catch (e) {
15          showBoundary(e as Error);
16        }
17      }}
18    >
19      Save
20    </button>
21  );
22}
23
24export function Demo() {
25  return (
26    <ErrorBoundary fallback={<div>Fallback</div>}>
27      <SaveButton />
28    </ErrorBoundary>
29  );
30}

COPIAR

Como funciona

showBoundary(error) guarda el error en state y en el siguiente render lo vuelve a lanzar (throw).
Ese throw ocurre en render, asi que el ErrorBoundary mas cercano lo atrapa.

useErrorContext()

Para leer el ErrorContext dentro de tu fallback.

FIRMA

Nombre

Tipo

Req.

Descripcion

useErrorContext

() => ErrorContext

Retorna el `ErrorContext` del ErrorBoundary que esta renderizando el fallback.

TSX

1import { ErrorBoundary } from "react-rescuer";
2import { useErrorContext } from "react-rescuer/hooks";
3
4function FallbackWithContext() {
5  const ctx = useErrorContext();
6
7  return (
8    <div>
9      <div>fingerprint: {ctx.fingerprint}</div>
10      <div>sessionId: {ctx.sessionId}</div>
11      <div>errorCount: {ctx.errorCount}</div>
12      <pre>{ctx.componentStack}</pre>
13    </div>
14  );
15}
16
17export function Demo() {
18  return (
19    <ErrorBoundary FallbackComponent={FallbackWithContext}>
20      <Page />
21    </ErrorBoundary>
22  );
23}

COPIAR

Nota

Si lo llamas fuera de un fallback de ErrorBoundary, lanza un error.
Internamente usa un contexto global (via globalThis) para evitar problemas si hay multiples instancias del paquete.

Regla

useErrorContext() es para fallbacks (dentro de ErrorBoundary).

Observabilidad

HOC