当数据由Context Provider提供时，如何正确放置Error Boundary？

核心原因 #

react-error-boundary 默认仅能捕获组件渲染阶段的同步错误，如果错误发生在渲染之外（比如 Provider 中的异步数据请求、或者 Error Boundary 未覆盖到错误触发的组件层级），就会出现空白页而不显示 FallbackComponent。

具体修复步骤 #

1. 调整 Error Boundary 包裹范围 #

确保 Error Boundary 直接包裹会触发渲染错误的组件，而非 Provider 本身。比如将列表渲染组件放在 Error Boundary 内部：

function App() {
  return (
    <ListProvider>
      <ErrorBoundary FallbackComponent={ErrorFallback}>
        <ListRenderer /> {/* 实际渲染列表的组件 */}
      </ErrorBoundary>
    </ListProvider>
  );
}

function ListRenderer() {
  const list = useContext(ListContext);
  // 此处若因列表数据异常触发渲染错误，会被 Error Boundary 捕获
  return list.map(item => <ListItem key={item.id} data={item} />);
}

2. 捕获异步操作中的错误 #

如果错误来自 Provider 中的异步数据请求（比如 fetch 失败），需要使用 react-error-boundary 提供的 useErrorHandler 钩子手动捕获错误并传递给 Error Boundary：

import { useErrorHandler } from 'react-error-boundary';

function ListProvider({ children }) {
  const [list, setList] = useState([]);
  const handleError = useErrorHandler();

  useEffect(() => {
    const fetchList = async () => {
      try {
        const res = await fetch('/api/list-data');
        if (!res.ok) throw new Error('请求失败');
        const data = await res.json();
        setList(data);
      } catch (err) {
        handleError(err); // 将异步错误抛给上层 Error Boundary
      }
    };
    fetchList();
  }, [handleError]);

  return (
    <ListContext.Provider value={list}>
      {children}
    </ListContext.Provider>
  );
}

3. 确保 FallbackComponent 正确实现 #

检查错误回退组件是否正确接收并使用 props：

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div className="error-fallback" role="alert">
      <h3>页面出错了</h3>
      <p>{error.message}</p>
      <button onClick={resetErrorBoundary}>重新加载</button>
    </div>
  );
}

关键注意事项 #

• Error Boundary 无法捕获事件处理器、定时器、Promise 回调中的异步错误，必须手动通过 useErrorHandler 传递
• 不要将 Error Boundary 包裹在 Provider 外层，否则无法捕获 Provider 子组件的渲染错误
• 确保列表渲染时的错误（比如访问不存在的属性）发生在 Error Boundary 覆盖的组件内部

内容的提问来源于stack exchange，提问作者Abby