使用ErrorBoundary时如何让Chrome调试器在异常处中断

React本身没有内置开关直接禁用ErrorBoundary，但你可以给自定义的ErrorBoundary组件添加开发环境专属逻辑，不用修改业务源码就能让它在开发时重新抛出异常，适配Chrome的断点调试：

• 先判断当前是否为开发环境（React在开发模式下会将process.env.NODE_ENV设为development）
• 在componentDidCatch或getDerivedStateFromError方法中，开发环境下直接重新抛出捕获到的异常

给你个具体的代码实现示例：

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

  static getDerivedStateFromError(error) {
    // 开发环境重新抛错，触发Chrome断点
    if (process.env.NODE_ENV === 'development') {
      throw error;
    }
    // 生产环境正常更新状态展示错误页
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 开发环境可选抛错，生产环境记录错误日志
    if (process.env.NODE_ENV === 'development') {
      throw error;
    }
    console.error("Error caught by boundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

这种方案的优势：

• 开发模式下，异常会被重新抛出，Chrome的break on exceptions能精准停在抛出异常的代码行，保留完整调用栈和局部变量
• 生产模式下，ErrorBoundary正常工作，不会影响用户体验

如果用的是函数式组件实现的ErrorBoundary（借助useState和useEffect），逻辑完全一致：捕获错误后判断环境，开发模式下抛错即可。

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