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

Error Boundary确实没法捕获异步错误，这是React的机制限制。componentDidCatch只能捕获同步的渲染错误和生命周期函数里的错误。

解决方法是要么把错误处理移到setTimeout内部，要么用window.onerror全局捕获。给你两个方案：

方案1：在setTimeout里自己try catch

useEffect(() => {

  setTimeout(() => {

    try {

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

    } catch(e) {

      console.error('抓到错误了', e)

      // 这里可以调用父组件传下来的错误处理回调

    }

  }, 1000)

}, [])

方案2：全局错误监听

useEffect(() => {

  window.addEventListener('error', (event) => {

    console.log('全局捕获', event.error)

  })

  

  setTimeout(() => {

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

  }, 1000)

  

  return () => window.removeEventListener('error')

}, [])

说白了Error Boundary就是个装饰器模式实现，异步错误已经跑到事件循环里了，Boundary自然抓不到。这问题我也踩过坑，后来看React源码才明白的。

因为 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 链路追踪。