如何使用react-error-boundary仅弹出提示，不替换子组件内容？

你可以通过自定义ErrorBoundary的行为来实现需求，核心思路是让ErrorBoundary捕获错误后不替换子组件，仅触发通知逻辑。以下提供两种方案，根据你使用的ErrorBoundary类型选择：

方案一：自定义类组件ErrorBoundary #

如果是自己实现ErrorBoundary，或者想完全控制逻辑，可以写一个始终渲染子组件的ErrorBoundary，仅在捕获错误时调用通知方法：

import React from 'react';

class NotifyOnlyErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    // 调用传入的通知回调，比如显示Toast、Alert等
    this.props.onError?.(error, errorInfo);
    // 不更新state，避免触发fallback渲染
  }

  render() {
    // 始终返回子组件，错误发生后不替换内容
    return this.props.children;
  }
}

使用方式 #

把原来的ErrorBoundary替换成这个自定义组件，并传入错误通知逻辑：

<NotifyOnlyErrorBoundary 
  onError={(error) => {
    // 这里写你的通知逻辑，比如用UI库的toast组件
    console.error('异步请求出错:', error);
    // 示例：antd的message组件
    // message.error(`加载商品变体失败：${error.message}`);
  }}
>
  <VariantsDialog 
    productId={product.id}
    trigger={props => <CartIconButton {...props} />} 
  />
</NotifyOnlyErrorBoundary>

方案二：基于react-error-boundary库改造 #

如果你使用的是社区流行的react-error-boundary库，可以利用它的fallbackRender和onError属性实现需求：

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

<ErrorBoundary
  // 错误发生时触发通知
  onError={(error) => {
    console.error('请求出错:', error);
    // 替换成你的通知逻辑
    alert(`加载失败：${error.message}`);
  }}
  // 让fallback渲染原有的子组件，不替换内容
  fallbackRender={({ children }) => children}
>
  <VariantsDialog 
    productId={product.id}
    trigger={props => <CartIconButton {...props} />} 
  />
</ErrorBoundary>

原理说明 #

默认的ErrorBoundary在捕获错误后会切换渲染fallback视图，这里通过fallbackRender返回原children，相当于保留了原来的组件树（包括CartIconButton和VariantsDialog），同时onError负责处理错误通知。

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