> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mcp-use.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <ErrorBoundary />

> Error boundary component for graceful error handling in widgets

The `ErrorBoundary` component catches React errors anywhere in the child component tree, logs those errors, and displays a fallback UI instead of crashing the entire widget.

## Import

```typescript theme={null}
import { ErrorBoundary } from 'mcp-use/react';
```

<Tip>
  You can use `<McpUseProvider />` to automatically include the `<ErrorBoundary />` component.
</Tip>

## Props

| Prop       | Type                                                 | Default             | Description                                 |
| ---------- | ---------------------------------------------------- | ------------------- | ------------------------------------------- |
| `children` | `React.ReactNode`                                    | **required**        | The widget content to wrap                  |
| `fallback` | `ReactNode \| (error: Error) => ReactNode`           | Built-in error card | Custom UI to render when an error is caught |
| `onError`  | `(error: Error, errorInfo: React.ErrorInfo) => void` | -                   | Callback invoked when an error is caught    |

## Basic Usage

```tsx theme={null}
import { ErrorBoundary } from 'mcp-use/react';

function MyWidget() {
  return (
    <ErrorBoundary>
      <div>My widget content</div>
    </ErrorBoundary>
  );
}
```

## Custom Fallback

Pass a `fallback` prop to render your own error UI instead of the default red error card.

### Static Fallback

```tsx theme={null}
<ErrorBoundary fallback={<div>Something went wrong. Please try again.</div>}>
  <MyWidget />
</ErrorBoundary>
```

### Dynamic Fallback with Error Details

Pass a function to receive the error object:

```tsx theme={null}
<ErrorBoundary fallback={(error) => (
  <div className="p-4 rounded bg-yellow-50 text-yellow-800">
    <p className="font-bold">Oops!</p>
    <p className="text-sm">{error.message}</p>
  </div>
)}>
  <MyWidget />
</ErrorBoundary>
```

## Error Callback

Use `onError` to log errors to an analytics service or perform side effects:

```tsx theme={null}
<ErrorBoundary
  onError={(error, errorInfo) => {
    analytics.track('widget_error', {
      message: error.message,
      stack: errorInfo.componentStack,
    });
  }}
>
  <MyWidget />
</ErrorBoundary>
```

You can combine `fallback` and `onError`:

```tsx theme={null}
<ErrorBoundary
  fallback={<div>Something went wrong</div>}
  onError={(error) => console.error('Widget crashed:', error)}
>
  <MyWidget />
</ErrorBoundary>
```

## Automatic Inclusion

`ErrorBoundary` is automatically included when using `McpUseProvider`:

```tsx theme={null}
import { McpUseProvider } from 'mcp-use/react';

<McpUseProvider>
  <MyWidget />
</McpUseProvider>
```

The error boundary wraps your widget content as the innermost wrapper, ensuring all errors are caught.

## Default Error Display

When no `fallback` is provided and an error occurs, the boundary displays:

* A red-bordered error container
* The error message in a readable format
* Dark mode support (adapts to theme)

The error UI is styled to be visible but not intrusive, allowing users to understand what went wrong while maintaining a professional appearance.

## Error Logging

Errors are always logged to the console with:

* The error object
* React error info (component stack, etc.)

This happens regardless of whether `onError` is provided.

## Related Components

* [`McpUseProvider`](./mcpuseprovider) - Includes ErrorBoundary automatically
* [`useWidget`](./usewidget) - Widget hook for accessing props and actions