crumbtrail-react

React bindings for Crumbtrail: catch render errors with the session attached, and record component state so a bug report carries the state the component was actually in when it broke.

Install

npm install crumbtrail-react crumbtrail-core

Or let the wizard do it:

npx crumbtrail

This package needs crumbtrail-core initialised first — see crumbtrail-core for that three-line setup. React 18 or newer.

Error boundary

Wrap a subtree so a render error is flagged as a bug with the surrounding session already captured:

import { Crumbtrail, PRESET_PASSIVE } from "crumbtrail-core";
import { CrumbtrailErrorBoundary } from "crumbtrail-react";

const crumbtrail = Crumbtrail.init({
  ...PRESET_PASSIVE,
  httpEndpoint: "https://api.crumbtrail.dev",
  httpAuthToken: process.env.CRUMBTRAIL_KEY,
});

export function App() {
  return (
    <CrumbtrailErrorBoundary logger={crumbtrail} fallback={<p>Something broke.</p>}>
      <Checkout />
    </CrumbtrailErrorBoundary>
  );
}

| Prop | Type | Description | | --- | --- | --- | | logger | Crumbtrail | The instance returned by Crumbtrail.init(). | | children | ReactNode | The subtree to guard. | | fallback | ReactNode | Optional UI to render after an error. |

Capturing state

useBugState registers a value so it's attached to any bug flagged while the component is mounted:

import { useBugState } from "crumbtrail-react";

function Checkout({ crumbtrail }) {
  const [cart, setCart] = useState([]);
  const [step, setStep] = useState("address");

  useBugState(crumbtrail, "cart", cart);
  useBugState(crumbtrail, "step", step);

  // ...
}

Values are redacted by default using the same policy as the rest of the SDK, so a state field called token or password never leaves the browser in the clear. Pass { captureRawState: true } as the fourth argument only when you're certain the value is safe.

Links

• Website — https://crumbtrail.dev
• Docs — https://crumbtrail.dev/docs
• How it works — https://crumbtrail.dev/how-it-works
• Source — https://github.com/CrumbtrailDev/crumbtrail-js
• Issues — https://github.com/CrumbtrailDev/crumbtrail-js/issues

License

MIT