react-error-boundary

可重用的React 错误边界组件。支持所有React渲染器（包括React DOM和React Native）。

如果你喜欢这个项目，🎉 成为赞助者 或 ☕ 给我买杯咖啡

快速开始

# npm
npm install react-error-boundary

# pnpm
pnpm add react-error-boundary

# yarn
yarn add react-error-boundary

API

ErrorBoundary 组件

将ErrorBoundary组件包裹在其他React组件周围，以"捕获"错误并渲染一个后备UI。该组件支持多种渲染后备UI的方式（如下所示）。

注意 ErrorBoundary是一个_客户端_组件。你只能向它传递可序列化的props，或在带有"use client";指令的文件中使用它。

使用fallbackprop的ErrorBoundary

渲染默认"出错了"类型错误消息的最简单方式。

"use client";

import { ErrorBoundary } from "react-error-boundary";

<ErrorBoundary fallback={<div>出错了</div>}>
  <ExampleApplication />
</ErrorBoundary>

使用fallbackRenderprop的ErrorBoundary

"渲染prop"函数负责根据抛出的值返回一个后备UI。

"use client";

import { ErrorBoundary } from "react-error-boundary";

function fallbackRender({ error, resetErrorBoundary }) {
  // 调用resetErrorBoundary()重置错误边界并重试渲染。

  return (
    <div role="alert">
      <p>出错了：</p>
      <pre style={{ color: "red" }}>{error.message}</pre>
    </div>
  );
}

<ErrorBoundary
  fallbackRender={fallbackRender}
  onReset={(details) => {
    // 重置应用状态，以防止错误再次发生
  }}
>
  <ExampleApplication />
</ErrorBoundary>;

使用FallbackComponentprop的ErrorBoundary

React组件负责根据抛出的值返回一个后备UI。

"use client";

import { ErrorBoundary } from "react-error-boundary";

function Fallback({ error, resetErrorBoundary }) {
  // 调用resetErrorBoundary()重置错误边界并重试渲染。

  return (
    <div role="alert">
      <p>出错了：</p>
      <pre style={{ color: "red" }}>{error.message}</pre>
    </div>
  );
}

<ErrorBoundary
  FallbackComponent={Fallback}
  onReset={(details) => {
    // 重置应用状态，以防止错误再次发生
  }}
>
  <ExampleApplication />
</ErrorBoundary>;

使用onError记录错误

"use client";

import { ErrorBoundary } from "react-error-boundary";

const logError = (error: Error, info: { componentStack: string }) => {
  // 处理错误，例如记录到外部API
};

const ui = (
  <ErrorBoundary FallbackComponent={ErrorFallback} onError={logError}>
    <ExampleApplication />
  </ErrorBoundary>
);

useErrorBoundary 钩子

用于命令式显示或关闭错误边界的便捷钩子。

从事件处理程序显示最近的错误边界

React只处理渲染过程中或组件生命周期方法（如effects和did-mount/did-update）中抛出的错误。事件处理程序中或异步代码执行后抛出的错误不会被捕获。

这个钩子可以用来将这些错误传递给最近的错误边界：

"use client";

import { useErrorBoundary } from "react-error-boundary";

function Example() {
  const { showBoundary } = useErrorBoundary();

  useEffect(() => {
    fetchGreeting(name).then(
      response => {
        // 在状态中设置数据并重新渲染
      },
      error => {
        // 显示错误边界
        showBoundary(error);
      }
    );
  });

  // 渲染 ...
}

关闭最近的错误边界

后备组件可以使用这个钩子来请求最近的错误边界重试最初失败的渲染。

"use client";

import { useErrorBoundary } from "react-error-boundary";

function ErrorFallback({ error }) {
  const { resetBoundary } = useErrorBoundary();

  return (
    <div role="alert">
      <p>出错了：</p>
      <pre style={{ color: "red" }}>{error.message}</pre>
      <button onClick={resetBoundary}>重试</button>
    </div>
  );
}

withErrorBoundary HOC

这个包也可以作为高阶组件使用，接受与上述相同的所有props：

"use client";

import {withErrorBoundary} from 'react-error-boundary'

const ComponentWithErrorBoundary = withErrorBoundary(ExampleComponent, {
  fallback: <div>出错了</div>,
  onError(error, info) {
    // 处理错误
    // 例如，在这里记录到错误日志客户端
  },
})

// 可以渲染为 <ComponentWithErrorBoundary {...props} />

---

常见问题

ErrorBoundary无法作为JSX组件使用

这个错误可能是由react和@types/react版本不匹配导致的。要修复这个问题，请确保两者完全匹配，例如：

如果使用NPM：

{
  ...
  "overrides": {
    "@types/react": "17.0.60"
  },
  ...
}

如果使用Yarn：

{
  ...
  "resolutions": {
    "@types/react": "17.0.60"
  },
  ...
}

---

这篇博客文章展示了更多如何使用这个包的示例，尽管它是为版本3 API编写的。