import { ArgsTable } from "@storybook/addon-docs/blocks";
import { ErrorBoundary, ErrorBoundaryAlert } from "./ErrorBoundary";
import { ErrorWithStack } from "./ErrorWithStack";

# ErrorBoundary

A React component that catches errors in child components. Useful for logging or displaying a fallback UI in case of errors. More information about error boundaries is available at [React documentation website](https://reactjs.org/docs/error-boundaries.html).

### Usage

```jsx
import { ErrorBoundary, Alert } from '@grafana/ui';

<ErrorBoundary>
  {({ error }) => {
    if (error) {
      return <Alert title={error.message} />;
    }
    return <Component />;
  }}
</ErrorBoundary>
```

# ErrorBoundaryAlert

An error boundary component with built-in alert to display in case of error.

### Usage

```jsx
import { ErrorBoundaryAlert } from '@grafana/ui';

<ErrorBoundaryAlert>
  <Component />
</ErrorBoundaryAlert>
```

### Props
<ArgsTable of={ErrorBoundaryAlert}/>


# ErrorWithStack
A component that displays error together with its stack trace.

### Usage

```jsx
import { ErrorWithStack } from '@grafana/ui';

<ErrorWithStack error={new Error('Test error')} title={'Unexpected error'} errorInfo={null} />
```

### Props
<ArgsTable of={ErrorWithStack}/>


