如何避免React Error Boundary触发时重建组件树以保留内部状态

解决 useMutation 异常导致组件重建、内部 state 丢失的问题 #

• 默认情况下 react-query 的 useMutation 不会把错误抛到 Error Boundary，只有显式配置 throwOnError: true 才会触发异常上浮。你可以关闭 mutation 全局抛错配置，仅针对需要 Error Boundary 处理的特殊场景单独开启，普通业务 mutation 改用 onError 回调做逻辑处理，从根源避免组件被异常重建。
• 如果必须通过 Error Boundary 处理 mutation 错误，可将需要保留的组件内部 state 提升到 Error Boundary 的父级组件，Error Boundary 只会重置自身包裹的子组件，外层组件的 state 不会被清空；不需要触发渲染的持久化数据可以存到 useRef 中，也不会受组件重建影响。
• 给组件拆分状态层和视图层，状态层放在 Error Boundary 外部，视图层放在 Error Boundary 内部，异常重建仅刷新视图层，状态层数据全程保留。

解决 useQuery 仅需日志上报、不希望原有界面被替换的问题 #

• 调整 react-query 全局/单查询的 throwOnError 配置，仅指定类型的错误才抛到 Error Boundary，普通业务错误在 onError 回调中完成日志上报即可，不会触发 Error Boundary 的兜底UI渲染，示例全局配置如下：

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // 只有5xx服务端错误才抛到Error Boundary，其余错误仅记录日志
      throwOnError: (error) => error?.response?.status >= 500,
      onError: (error) => {
        // 统一日志上报逻辑
        console.error('查询接口报错：', error)
      }
    }
  }
})

• 自定义增强版 Error Boundary，新增仅日志上报模式，捕获到错误后如果标记为仅上报则不渲染兜底UI，保持原有子组件的展示状态，示例代码如下：

class CustomErrorBoundary extends React.Component {
  state = { hasError: false }

  static getDerivedStateFromError() {
    return { hasError: true }
  }

  componentDidCatch(error, info) {
    // 统一执行日志上报
    console.error('捕获异常：', error, info)
    // 如果配置了仅上报不展示兜底，重置错误状态，保留原有界面
    if (this.props.onlyLog) {
      this.setState({ hasError: false })
    }
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || <div>系统异常，请稍后重试</div>
    }
    return this.props.children
  }
}

• 对需要保留原有界面的查询模块，用 <CustomErrorBoundary onlyLog> 单独包裹即可，不会触发全局的 Error Boundary 兜底UI。

以上方案均基于 React 和 react-query 原生能力实现，不需要引入任何额外的状态管理库。

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