ErrorBoundary

Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.

Catches render errors thrown by its children and shows an error-variant Callout in their place, so one broken widget doesn't take the whole frame down with it.

Import

import { ErrorBoundary } from "~lib/feedback/error-boundary";

Props

Name	Type	Required	Default	Description
children	ReactNode	Yes	N/A	Content to render and monitor for errors
title	string	No	"Something went wrong"	Heading shown by the default fallback Callout
fallback	(props: FallbackProps) => ReactNode	No	N/A	Renders in place of the default Callout when an error is caught
onError	(error: unknown, info: ErrorInfo) => void	No	N/A	Called when a child throws
onReset	() => void	No	N/A	Called when the boundary resets, either via resetKeys or a fallback's resetErrorBoundary()
resetKeys	unknown[]	No	N/A	When any value changes, the boundary clears the error and re-renders children

Examples

Default

Abrir Default en Storybook

Custom Title

Abrir Custom Title en Storybook

No Error

Abrir No Error en Storybook

Custom Fallback

Abrir Custom Fallback en Storybook

See Also

• Callout - Message boxes, including the error variant used by the default fallback
• EmptyState - No-data placeholder