60 lines
1.1 KiB
Plaintext
60 lines
1.1 KiB
Plaintext
---
|
|
name: Error Boundary
|
|
menu: Data Display
|
|
route: components/errorBoundary
|
|
---
|
|
|
|
import { Playground, Props } from 'docz';
|
|
import { ErrorBoundary } from '@ohif/ui';
|
|
|
|
# Error Boundary
|
|
|
|
This component can be used to display a message or handle unhandled errors.
|
|
|
|
## Import
|
|
|
|
```javascript
|
|
import { ErrorBoundary } from '@ohif/ui';
|
|
```
|
|
|
|
## Basic usage
|
|
|
|
<Playground>
|
|
<div className="p-4">
|
|
<ErrorBoundary context="Somewhere">
|
|
{() => {
|
|
throw new Error('Error!');
|
|
return <p></p>;
|
|
}}
|
|
</ErrorBoundary>
|
|
</div>
|
|
</Playground>
|
|
|
|
## Custom error fallback
|
|
|
|
<Playground>
|
|
{() => {
|
|
const CustomFallback = ({ error, componentStack, resetErrorBoundary }) => {
|
|
return (
|
|
<div>
|
|
<p>This is a custom fallback!</p>
|
|
</div>
|
|
);
|
|
};
|
|
return (
|
|
<div className="p-4">
|
|
<ErrorBoundary context="Somewhere" fallbackComponent={CustomFallback}>
|
|
{() => {
|
|
throw new Error('Error!');
|
|
return <p></p>;
|
|
}}
|
|
</ErrorBoundary>
|
|
</div>
|
|
);
|
|
}}
|
|
</Playground>
|
|
|
|
## Properties
|
|
|
|
<Props of={ErrorBoundary} />
|