---
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} />