ReferenceComponentsDialogs, toasts, and overlays
ErrorBoundary
ErrorBoundary component API, behavior, and executable example.
Loading executable example…
API and events
Layer focus-trapped dialogs, contextual help, transient notices, and searchable command execution over an application.
export class ErrorBoundary extends Component<
ErrorBoundaryProps,
ErrorBoundaryState
> {
override state: ErrorBoundaryState = {};
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
return { error };
}
override componentDidCatch(error: Error, info: ErrorInfo): void {
this.props.onError?.(error, info);
}
reset = (): void => {
this.setState({ error: undefined });
};
override render(): ReactNode {
const { error } = this.state;
if (!error) return this.props.children;
return this.props.fallback ? (
this.props.fallback(error, this.reset)
) : (
<Box borderStyle="round" flexDirection="column">
<Text color="red" bold>
Something went wrong
</Text>
<Text>{error.message}</Text>
</Box>
);
}
}Props, functions, and events
| Member | Type | Required | Description | Related types |
|---|---|---|---|---|
state | ErrorBoundaryState | Yes | The state member uses the ErrorBoundaryState contract. | — |
getDerivedStateFromError | typeof ErrorBoundary.getDerivedStateFromError | Yes | The getDerivedStateFromError member uses the typeof ErrorBoundary.getDerivedStateFromError contract. | ErrorBoundary |
componentDidCatch | (error: Error, info: ErrorInfo) => void | Yes | The componentDidCatch member uses the (error: Error, info: ErrorInfo) => void contract. | — |
reset | () => void | Yes | The reset member uses the () => void contract. | — |
render | () => ReactNode | Yes | The render member uses the () => ReactNode contract. | — |
Open state and selections flow through onOpenChange, onPress, command callbacks, and the toast API.
Callback props run after the documented input is accepted. Callbacks are not cancellable unless their return type or description states otherwise.
Interaction and capabilities
The top overlay receives input before application hotkeys. Escape closes dismissible overlays and focus returns to the prior node.
The published manifest records keyboard, focus, pointer, theme, terminal, semantic, event, and dependency requirements.
Complete import
import { ErrorBoundary } from "@/components/tuil/feedback/overlays";