> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/error-boundary.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt.

# ErrorBoundary

Provide a fallback when content fails to render.

## Basic usage


Simulate a rendering error

Content is displayed normally.

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/error-boundary/basic.tsx"
function Content({ broken }: { broken: boolean }) {
  if (broken) throw new Error('Demo rendering error');
  return <p>Content is displayed normally.</p>;
}

import { Button, ErrorBoundary, Space } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function ErrorBoundaryBasic() {
  const [broken, setBroken] = useState(false);
  return (
    <Space direction="vertical" align="stretch">
      <Button variant="outline" onClick={() => setBroken(true)}>
        Simulate a rendering error
      </Button>
      <ErrorBoundary onReset={() => setBroken(false)}>
        <Content broken={broken} />
      </ErrorBoundary>
    </Space>
  );
}
```

Expand code

## More examples


Test fallbackThe fallback replaces only the failed section.

advanced.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/error-boundary/advanced.tsx"
function Content({ broken }: { broken: boolean }) {
  if (broken) throw new Error('Demo rendering error');
  return <span>The fallback replaces only the failed section.</span>;
}

import { Alert, Button, ErrorBoundary, Space } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function ErrorBoundaryCustom() {
  const [broken, setBroken] = useState(false);
  return (
    <Space direction="vertical" align="stretch">
      <Button variant="outline" onClick={() => setBroken(true)}>
        Test fallback
      </Button>
      <ErrorBoundary
        fallback={({ reset }) => (
          <Alert
            title="This section is unavailable"
            description={
              <Button size="sm" variant="soft" onClick={reset}>
                Try again
              </Button>
            }
          />
        )}
        onReset={() => setBroken(false)}
        resetKeys={[broken]}
      >
        <Content broken={broken} />
      </ErrorBoundary>
    </Space>
  );
}
```

Expand code

## Usage

Catches descendant rendering and lifecycle errors. Handle event, async request and server errors in the operation or framework. Report through onError and avoid exposing internal stacks.

## Types

Import these types for data, callbacks and refs.

```ts
import type { ErrorBoundaryFallbackProps, ErrorBoundaryProps } from '@ifhover/leaf-ui';
```

## ErrorBoundaryFallbackProps API

| Property | Type         | Default  | Description                  |
| -------- | ------------ | -------- | ---------------------------- |
| `error`  | `Error`      | Required | Error object or notification |
| `reset`  | `() => void` | Required | Reset or retry               |

## ErrorBoundaryProps API

| Property    | Type                                                                                                 | Default | Description                           |
| ----------- | ---------------------------------------------------------------------------------------------------- | ------- | ------------------------------------- |
| `children`  | `ReactNode`                                                                                          | —       | Content or child items                |
| `fallback`  | [`ReactNode \| ((props: ErrorBoundaryFallbackProps) => ReactNode)`](#errorboundaryfallbackprops-api) | —       | Loading error content                 |
| `resetKeys` | `readonly unknown[]`                                                                                 | —       | Reset errors when these values change |
| `onError`   | `(error: Error, info: ErrorInfo) => void`                                                            | —       | Error callback                        |
| `onReset`   | `() => void`                                                                                         | —       | Reset callback                        |