---
title: "<ErrorBoundary />"
description: "Error boundary component for graceful error handling in widgets"
icon: "bug"
---

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
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
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
<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
<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
<ErrorBoundary
  onError={(error, errorInfo) => {
    analytics.track('widget_error', {
      message: error.message,
      stack: errorInfo.componentStack,
    });
  }}
>
  <MyWidget />
</ErrorBoundary>
```

You can combine `fallback` and `onError`:

```tsx
<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
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
