Error Boundary

Error Boundary

CommandErrorBoundary catches render errors in command palette children and displays a fallback UI.

Basic Usage

import { Command, CommandErrorBoundary } from 'modern-cmdk/react';

function App() {
  return (
    <CommandErrorBoundary fallback={<p>Something went wrong.</p>}>
      <Command.Dialog>
        <Command.Input />
        <Command.List>
          <Command.Item>Action</Command.Item>
        </Command.List>
      </Command.Dialog>
    </CommandErrorBoundary>
  );
}

Render Function Fallback

<CommandErrorBoundary
  fallback={(error) => (
    <div>
      <h3>Command palette error</h3>
      <pre>{error.message}</pre>
      <button onClick={() => window.location.reload()}>Reload</button>
    </div>
  )}
  onError={(error) => errorReporting.captureException(error)}
>
  <Command.Dialog>...</Command.Dialog>
</CommandErrorBoundary>

Props

Prop	Type	Description
fallback	ReactNode | (error: Error) => ReactNode	Static element or render function
onError	(error: Error) => void	Callback when error is caught
children	ReactNode	Command palette components