Observabilidad

Observabilidad (opcional)

La observabilidad esta fuera del core; se integra con:

• contextBuilder
• o (getBreadcrumbs + fingerprint)

1) buildErrorContext (la opcion mas directa)

buildErrorContext arma un ErrorContext usando:

• breadcrumbs desde getBreadcrumbTrail().get() por defecto (o tu getBreadcrumbs)
• fingerprint desde fingerprintError por defecto (o tu fingerprint)
• component stack desde errorInfo.componentStack

1import { ErrorBoundary } from "react-rescuer";
2import { addBreadcrumb, buildErrorContext } from "react-rescuer/observability";
3
4export function Demo() {
5  return (
6    <ErrorBoundary
7      contextBuilder={buildErrorContext}
8      onError={(_err, _info, ctx) => {
9        console.log("ErrorContext", ctx);
10      }}
11      fallback={<div>Mira la consola</div>}
12    >
13      <button
14        type="button"
15        onClick={() => addBreadcrumb({ type: "custom", message: "click" })}
16      >
17        Agregar breadcrumb
18      </button>
19    </ErrorBoundary>
20  );
21}

2. BreadcrumbTrail: breadcrumbs automaticos (click + navigation)

BreadcrumbTrail (singleton) captura:

• clicks (en capture) con un descriptor simple del elemento
• navegacion (popstate y monkeypatch de history.pushState/replaceState)

Tambien limpia la cola cuando ocurre un reset, escuchando react-rescuer:reset.

Uso:

1import { getBreadcrumbTrail } from "react-rescuer/observability";
2
3const trail = getBreadcrumbTrail();
4trail.add({ type: "custom", message: "algo paso" });
5
6const breadcrumbs = trail.get();

addBreadcrumb es un helper:

1import { addBreadcrumb } from "react-rescuer/observability";
2
3addBreadcrumb({ type: "custom", message: "user clicked" });

3) Fingerprinting

fingerprintError(error) genera un hash deterministico (djb2) basado en:

• error.name
• las primeras 3 lineas del stack

Puedes proveer tu propio fingerprint si necesitas otra estrategia.