ErrorBoundary

Generic error boundary that prevents a crashing subtree from taking down the rest of the page. Reporting is delegated to onError (no hardcoded logging), and recovery is available through reset on a render-prop fallback.

Something went wrong

The material panel hit an unexpected error.

Usage

import { ErrorBoundary, ErrorBoundaryFallbackProps, ErrorBoundaryProps } from "@instruments/materia-ui/components/error-boundary";

Best practices

ErrorBoundary catches render crashes in a subtree - pair it with an ErrorState in fallback to show the failure; it renders nothing by default.
It logs nothing itself - wire telemetry through onError, and offer recovery via the render-prop fallback's reset callback.

Props

Prop	Type	Description
children(required)	`ReactNode`
fallback	`ReactNode \| ((props: ErrorBoundaryFallbackProps) => ReactNode)`	Rendered when the subtree throws. Either a static node or a render prop receiving the captured error and a `reset` callback. Defaults to nothing.
onError	`(error: Error, info: ErrorInfo) => void`	Called when the subtree throws. Receives the error and React's component stack. Use this to report to logging/telemetry - the boundary itself does not log.
onReset	`() => void`	Called when the boundary is reset, before the subtree re-renders.

Also exports

interfaceErrorBoundaryFallbackProps
interfaceErrorBoundaryProps