Skip to main content

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.

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

PropTypeDefaultDescription
childrenReact.ReactNoderequiredThe widget content to wrap
fallbackReactNode | (error: Error) => ReactNodeBuilt-in error cardCustom 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.