ErrorBoundary

Wrapper component that lets you display some fallback UI when your application throws an error during rendering.

Demo

INFO

The component uses ErrorBoundary Component to wrap Component. Component throw an error so ErrorBoundary catch it and show the fallback element passing to it error and retry function. See demo

Loading demo…

Show source code

import { ErrorBoundary } from "../../../components";

const Component = () => {
	throw new Error("An error occurred.");
	return <p>Component</p>
}
export default function EB() {
	return <ErrorBoundary fallback={(error: Error, _, retry) => <><p>{error.name} - {error.message} </p><button onClick={retry}>Retry</button></>}>
		<Component/>
	</ErrorBoundary>
}

Types

ErrorBoundaryState

Internal state managed by ErrorBoundary component.

Property	Type	Required	Description
hasError	boolean	✓	true when the boundary has caught an error from a descendant component, causing the fallback UI to be rendered in place of the component tree. Reset to false when the retry callback is invoked.
error	Error		The most recently caught {@link Error} instance. undefined when no error has been caught or after a successful retry.
info	ErrorInfo		The {@link ErrorInfo} object associated with the caught error, containing the componentStack string that traces which components were rendering when the error was thrown. undefined when no error has been caught.

ErrorBoundaryProps

Props accepted by the ErrorBoundary component.

Property	Type	Required	Description
onCatch	(error: Error, info: ErrorInfo) => void		Called when an error is caught by the boundary, receiving the thrown {@link Error} and the associated {@link ErrorInfo} (component stack). Use this for error reporting or logging.
fallback	\| ReactNode \| ((error: Error, info: ErrorInfo, retry: () => void) => ReactNode) \| ((props: { error: Error; info: ErrorInfo; retry: () => void }) => JSX.Element)		Content rendered in place of the component tree when an error is caught. Accepts three shapes: - ReactNode — Static fallback UI displayed unconditionally. - (error, info, retry) => ReactNode — A render function receiving the caught error, component stack info, and a retry callback that resets the boundary and re-attempts rendering the original tree. - ({ error, info, retry }) => JSX.Element — Same as above but using a props object instead of positional arguments.