React中如何在控制台定位错误的具体源码行？

1. 先开Source Map，这是核心 #

不管用Webpack、Vite还是Create React App，必须开启Source Map才能让浏览器把构建后的代码映射回源码：

• Webpack：在webpack.config.js里设devtool: 'source-map'（生产环境用这个，开发阶段可以用eval-cheap-module-source-map更快）
• Vite：vite.config.js中加build.sourcemap: true，开发环境默认已经开启
• Create React App：生产环境在.env里写GENERATE_SOURCEMAP=true即可，开发环境自动开启

开启后，浏览器控制台的错误行号会直接指向你的源码文件，而非打包后的app.js。

2. 优化ErrorBoundary的捕获逻辑 #

用ErrorBoundary时，别只打印error.stack，要用上errorInfo里的componentStack——这里包含组件调用栈和对应源码位置（前提是Source Map已开启）：

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

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

  componentDidCatch(error, errorInfo) {
    console.error('错误详情:', error);
    console.error('组件调用栈:', errorInfo.componentStack);
    // 这里可以把错误上报或者存起来展示
  }

  render() {
    if (this.state.hasError) {
      return <h1>出问题了。</h1>;
    }
    return this.props.children;
  }
}

3. 生产环境的注意点 #

• Source Map文件别直接部署到公开服务器，防止源码泄露。内部排查错误时使用即可，或者用错误监控工具（如Sentry）上传Source Map，它会自动解析错误栈，无需暴露源码。
• 如果用Sentry这类工具，打包时将Source Map上传到平台，之后生产环境的错误会直接显示源码位置。

4. 临时应急：手动解析错误栈 #

要是临时没开Source Map，也可以用source-map包手动解析：

1. 安装包：npm install source-map
2. 读取构建后的app.js.map文件，解析错误行号：

const sourceMap = require('source-map');
const fs = require('fs');

async function parseError() {
  const rawSourceMap = JSON.parse(fs.readFileSync('./dist/app.js.map', 'utf8'));
  const consumer = await new sourceMap.SourceMapConsumer(rawSourceMap);
  // 填入错误提示中的行号，比如app.js:123123
  const position = consumer.originalPositionFor({
    line: 123123,
    column: 0
  });
  console.log('源码位置:', position); // 会输出源码文件名、行号、列号
}
parseError();

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