<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

import { ErrorBoundary } from 'mcp-use/react';

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

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

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

<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:

<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:

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

You can combine fallback and onError:

<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:

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 - Includes ErrorBoundary automatically
• useWidget - Widget hook for accessing props and actions