React应用中window.onerror触发两次问题求助

这个问题其实很常见，尤其是在React的开发模式下。让我先帮你拆解一下原因，再给出几个可行的解决方案：

为什么会触发两次捕获？ #

在开发环境中，React会主动捕获组件内的错误，然后将错误重新抛出——目的是让浏览器的全局错误处理（比如window.onerror）也能感知到这个错误，同时在控制台给出更友好的React专属错误提示。这就导致了你的window.onerror会被触发两次：一次是React内部捕获后抛出的，另一次是浏览器原生的错误触发。

而在生产环境中，React不会做这个二次抛出的操作，所以只会触发一次。不过开发环境的重复触发确实很烦人，我们可以通过下面的方法解决。

解决方案1：用标志位避免重复处理 #

你可以给window.onerror加一个简单的标志，确保同一个错误只被处理一次：

let hasHandledError = false;
window.onerror = (msg, url, lineNo, columnNo, error) => {
  if (hasHandledError) {
    hasHandledError = false;
    return true; // 阻止后续重复处理
  }
  console.log(msg);
  alert(msg);
  hasHandledError = true;
};

这个方法简单直接，适合快速解决开发环境的重复弹窗问题。

解决方案2：使用React官方推荐的错误边界（Error Boundary） #

React提供了专门的错误捕获机制——错误边界组件，它能捕获子组件树中的所有错误，而且不会出现重复捕获的问题，这也是React应用中全局错误处理的最佳实践。

你可以创建一个错误边界组件：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新state，显示错误 fallback UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 这里可以记录错误日志
    console.error("组件错误捕获:", error, errorInfo);
    alert(error.message);
  }

  render() {
    if (this.state.hasError) {
      // 自定义错误 fallback UI
      return <h1>Oops! Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

然后用它包裹你的根组件：

ReactDOM.render(
  <ErrorBoundary>
    <TodoApp />
  </ErrorBoundary>,
  document.getElementById("root")
);

这样一来，组件内的错误会被错误边界捕获一次，不会触发window.onerror的重复调用，同时还能自定义错误后的UI，比直接用window.onerror更符合React的设计理念。

额外提醒 #

如果你的应用同时使用了window.onerror和错误边界，记得在生产环境中做好协调，避免重复记录日志。另外，错误边界只能捕获组件渲染、生命周期方法和事件处理函数中的错误，对于异步代码（比如setTimeout、Promise）中的错误，还是需要结合window.addEventListener('unhandledrejection')来处理。

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