如何在不使用Error Boundaries时识别React错误？解析调用栈数字含义

关于错误栈中的28:66含义 #

• 28是源代码的行号，66是该行的列号，表示错误发生在A1Bookmark.jsx文件的第28行、第66个字符位置。
• 栈里的__WEBPACK_DEFAULT_EXPORT__是因为你的组件使用了默认导出（比如export default A1Bookmark），webpack打包后会用这个名称指代默认导出的组件，对应你实际的A1Bookmark、F1Page等组件。

函数组件与Error Boundary的处理 #

Error Boundary确实要求用类组件实现，但无需修改你的函数组件：

• 单独封装一个类组件的Error Boundary：

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

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 可在此记录错误日志
    console.error("捕获到错误:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>页面出错了，请稍后重试。</h1>;
    }
    return this.props.children;
  }
}

• 将你的函数组件嵌套在这个Error Boundary中使用：

<ErrorBoundary>
  <F1 />
</ErrorBoundary>

这样就能捕获F1及其子组件树内的错误。

webpack开发环境确保行号准确 #

开发构建时，检查webpack配置的devtool选项：

• 推荐设置为eval-cheap-module-source-map，它既能保证构建速度，又能保留原代码的行号映射，让错误栈中的行号与源代码完全对应。
• 避免使用eval这类仅保留打包后代码行号的选项，否则会出现行号偏移的问题。

内容的提问来源于stack exchange，提问作者k.m.