The error boundary component repurposes the <ErrorState> component for an application error boundary.
Examples
Error boundary usage example
A basic error boundary appears when an error is thrown inside of the wrapped content.
The component itself has a headerTitle, an errorTitle, and shows an en error stack with details.
Demo content wrapped in error boundary
This is a demo content that may throw an error:
Props
ErrorBoundary
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | The component that the error boundary component is wrapped around, which should be returned if there is no error | |
| defaultErrorDescription | React.ReactNode | The default description text to display with the error if no errorDescription is provided | |
| errorDescription | React.ReactNode | The description text to display with the error | |
| errorTitle | string | The title text to display with the error | |
| errorTitleHeadingLevel | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | "h2" | The heading level to use on the error title, default is h2 |
| errorToggleText | string | The text for the toggle link that users can select to view error details | |
| headerTitle | string | The title text to display on the error page | |
| headerTitleHeadingLevel | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | "h1" | The heading level to use on the header title, default is h1 |
| ouiaId | string | number | Custom OUIA ID | |
| silent | boolean | Indicates if the error is silent |
