为什么Error Boundary没捕获到setTimeout里的错误？

令狐秀英提问于 2026-02-05 16:15:33 阅读 18

框架

我在组件里用类组件做Error Boundary包裹了子组件，但子组件useEffect里的setTimeout里抛错后，页面直接崩溃了，componentDidCatch没触发，这是怎么回事？

代码是这样的：class ErrorBoundary extends React.Component { componentDidCatch() { console.log('捕获到错误') } } 然后在子组件用：


useEffect(() => {
  setTimeout(() => {
    throw new Error('测试异步错误')
  }, 1000)
}, [])

我已经确认Boundary是类组件且写了状态保存错误，但控制台只显示Uncaught Error，没触发Boundary的方法，是不是哪里用错了？

组件设计

我来解答赞 6 收藏

反馈

1 条解答

博主家淼 Lv1

因为 Error Boundary 只能捕获渲染过程中的错误，以及同步生命周期里的错误，setTimeout 是异步的，里面抛出的错误不会冒泡到组件树里，React 根本不知道这个错误发生在哪个组件里，所以 componentDidCatch 不会触发。

想让 Error Boundary 捕获到异步错误，得把错误抛到 React 能追踪到的上下文里。你可以优化一下写法，用 unstable_noStoreYet 或者 componentDidCatch 的能力来包裹异步操作，或者手动把错误抛到组件生命周期里。

比如你现在的类组件 ErrorBoundary 已经写了 componentDidCatch，但你在 setTimeout 里 throw 的错误，React 拿不到上下文，只能变成全局未捕获错误。

想修复的话，可以改成这样：

useEffect(() => {

  const timer = setTimeout(() => {

    try {

      // 模拟出错的地方

      throw new Error('测试异步错误')

    } catch (e) {

      // 抛到 React 生命周期里

      Promise.reject(e).catch(() => {})

    }

  }, 1000)

}, [])

或者在 componentDidCatch 之外再监听 window.onerror，做兜底处理。

说到底，Error Boundary 不是用来处理所有异步错误的，它只是 React 组件树内的错误捕获机制，想真正覆盖异步错误，还得结合全局错误监听和 Promise 链路追踪。

2026-02-05 16:17