Skip to main content
The ErrorBoundary component catches React errors anywhere in the child component tree, logs those errors, and displays a friendly 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

​
Basic Usage

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

function MyWidget() {
  return (
    <ErrorBoundary>
      <div>My widget content</div>
    </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.

​
Error Display

When 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 automatically logged to the console with:
  • The error object
  • React error info (component stack, etc.)
This helps with debugging during development.