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

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

# ErrorBoundary 错误边界

展示内容异常时的备用界面。

## 基本用法


模拟内容异常

内容正常显示。

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/error-boundary/basic.tsx"
function Content({ broken }: { broken: boolean }) {
  if (broken) throw new Error('Demo rendering error');
  return <p>内容正常显示。</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)}>
        模拟内容异常
      </Button>
      <ErrorBoundary onReset={() => setBroken(false)}>
        <Content broken={broken} />
      </ErrorBoundary>
    </Space>
  );
}
```

展开代码

## 更多用法


测试备用界面备用界面只替换出错的区块。

advanced.tsx

复制代码

```tsx lineNumbers file="../../src/examples/error-boundary/advanced.tsx"
function Content({ broken }: { broken: boolean }) {
  if (broken) throw new Error('Demo rendering error');
  return <span>备用界面只替换出错的区块。</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)}>
        测试备用界面
      </Button>
      <ErrorBoundary
        fallback={({ reset }) => (
          <Alert
            title="此区块不可用"
            description={
              <Button size="sm" variant="soft" onClick={reset}>
                再次尝试
              </Button>
            }
          />
        )}
        onReset={() => setBroken(false)}
        resetKeys={[broken]}
      >
        <Content broken={broken} />
      </ErrorBoundary>
    </Space>
  );
}
```

展开代码

## 使用说明

捕获子组件渲染和生命周期错误。事件处理、异步请求与服务端渲染错误由操作或框架处理。通过 onError 上报异常，避免在用户界面显示内部堆栈。

## 类型

组装数据、定义回调和使用 ref 时，可以导入这些类型。

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

## ErrorBoundaryFallbackProps API

| 属性      | 类型           | 默认值 | 说明        |
| ------- | ------------ | --- | --------- |
| `error` | `Error`      | 必填  | 错误对象或错误通知 |
| `reset` | `() => void` | 必填  | 重置状态或重试   |

## ErrorBoundaryProps API

| 属性          | 类型                                                                                                   | 默认值 | 说明       |
| ----------- | ---------------------------------------------------------------------------------------------------- | --- | -------- |
| `children`  | `ReactNode`                                                                                          | —   | 内容或下级项目  |
| `fallback`  | [`ReactNode \| ((props: ErrorBoundaryFallbackProps) => ReactNode)`](#errorboundaryfallbackprops-api) | —   | 加载失败时的内容 |
| `resetKeys` | `readonly unknown[]`                                                                                 | —   | 值变化时重置错误 |
| `onError`   | `(error: Error, info: ErrorInfo) => void`                                                            | —   | 异常回调     |
| `onReset`   | `() => void`                                                                                         | —   | 重置回调     |