如何阻止React覆盖控制台错误信息并定位真实代码报错位置？

• 补全webpack的mode配置
  只设置DefinePlugin不够，必须在webpack.config.js里明确指定mode为development，这是webpack开发环境配置的核心：

  module.exports = {
    mode: 'development', // 关键配置，会自动启用开发环境的一系列默认设置
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('development'),
        },
      }),
    ],
    // 其他配置项...
  }
  

• 配置Source Map映射原始代码
  开发环境下必须开启source map，才能让控制台定位到你的业务代码位置。在webpack配置中添加：

  devtool: 'eval-cheap-module-source-map',
  

  这个选项兼顾了构建速度和源码映射的准确性，能直接在控制台显示你业务文件的路径和行号。

• 检查自定义错误边界组件
  如果项目里写了ErrorBoundary组件，检查它的componentDidCatch方法，是不是吞掉了原始错误信息或者做了覆盖。开发环境可以临时注释掉错误边界，验证是否能显示原始错误。

• 确认React依赖版本
  确保安装的是react和react-dom的开发版，不要在开发环境引入react-dom/production.min.js这类生产包。查看package.json的依赖项，react和react-dom应为普通依赖，无生产版后缀。

• 检查浏览器控制台设置
  打开浏览器开发者工具的Console面板：

  • 取消勾选"Hide network errors"等过滤选项
  • 确保"Errors"和"Warnings"选项处于开启状态
  • 切换到Sources面板，在设置里勾选"Enable JavaScript source maps"

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