React Error Boundary疑问：throw new Error失效，throw errorObj为何生效？

这背后的核心原因是React对Error Boundary捕获的错误实例做了重复检测，避免无限循环渲染，而你两种抛出方式的本质是每次重渲染时抛出的错误对象是否为同一个实例。

先梳理你的代码执行流程 #

我们先理清楚正常工作（抛出原error）的流程：

1. 异步请求失败，setError(e)将请求返回的错误对象存入state
2. state更新触发App组件重渲染，调用MovieDb Hook
3. Hook中检测到error存在，抛出同一个error实例
4. Catch组件（Error Boundary）捕获到错误，更新自身state为hasError: true，渲染错误提示UI
5. React识别到这个错误实例已经被Error Boundary处理过，不会触发新一轮的错误捕获，流程终止，错误UI稳定显示

为什么抛出新的Error实例会失效？ #

当你改成throw new Error(error.message)时，问题出在每次组件重渲染时，都会创建一个全新的Error实例：

1. 第一次异步错误触发setError(e)，重渲染时抛出新的Error实例，Error Boundary捕获并渲染错误UI
2. 但此时App组件的state中error仍然存在，会再次触发重渲染，MovieDb Hook又会抛出另一个全新的Error实例
3. 这个新的错误实例会被Error Boundary再次捕获，导致Error Boundary的state更新，触发它自己的重渲染
4. 这就形成了一个无限循环：App重渲染 → 抛出新错误 → Error Boundary捕获更新state → 触发App再次重渲染
5. React为了防止这种无限循环耗尽资源，会在几次循环后终止Error Boundary的处理，直接让应用崩溃

关键原理：React的错误去重机制 #

React内部会跟踪Error Boundary已经处理过的错误实例，如果后续抛出的是同一个错误对象，React会认为这是重复的错误，不会再次触发Error Boundary的错误捕获逻辑，从而避免无限循环。

而每次通过new Error()创建的实例都是独一无二的引用，React无法识别这是“同一个错误”，所以会反复处理，最终导致崩溃。

额外建议：更优雅的异步错误处理方式 #

其实你当前的“在渲染阶段抛出错误”的方式并不符合React的最佳实践，更好的做法是在Hook中返回错误状态，由组件自行处理：

// 修改MovieDb Hook，返回movies和error
export default (query) => {
  const [movies, setMovies] = useState([])
  const [error, setError] = useState(null)

  useEffect(() => {
    const getData = async () => {
      try {
        const results = await axios.get('https://api.themoviedb.org/3/search/movie', {
          params: {
            api_key: 'somethingsomething',
            query
          }
        })
        setMovies(results.data.results)
        setError(null) // 请求成功时清空错误
      } catch (e) {
        setError(e)
        setMovies([]) // 出错时清空列表
      }
    }
    getData()
  }, [query])

  return { movies, error }
}

// 在App中使用
function App() {
  const [query, setQuery] = useState('Lord of the Rings')
  const { movies, error } = MovieDb(query)

  if (error) {
    throw error // 这里抛出原错误实例，Error Boundary可以正常捕获
  }

  return (
    <div className="App">
      <SearchInput onChange={e => setQuery(e.target.value)} defaultValue={query}/>
      {movies.map(movie=> <div key={movie.id}>{movie.title}</div>) }
    </div>
  );
}

这种方式既保留了Error Boundary的错误捕获能力，又避免了潜在的循环问题。

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