React ErrorBoundary显示错误行列号异常，如何获取源映射正确信息？

核心原因 #

cheap-module-source-map 会在error对象本身保留源映射后的文件与行号信息，但Webpack默认不会自动解析error.stack的源映射，所以栈信息显示的是编译后的文件位置。

解决方案 #

1. 用source-map库手动解析栈信息 #

先安装依赖：

npm install source-map --save-dev

在ErrorBoundary组件中引入并实现解析逻辑：

import { SourceMapConsumer } from 'source-map';
import React from 'react';

class ErrorBoundary extends React.Component {
  async componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    if (error.stack && process.env.NODE_ENV === 'development') {
      // 加载Webpack生成的source map文件（路径需对应实际输出的map文件）
      const response = await fetch('/main.js.map');
      const sourceMapData = await response.json();

      const consumer = await new SourceMapConsumer(sourceMapData);
      // 拆分栈信息逐行解析
      const parsedStackLines = await Promise.all(
        error.stack.split('\n').map(async (line) => {
          // 匹配栈行中的编译后文件位置格式
          const matchResult = line.match(/at .+\((.+):(\d+):(\d+)\)/);
          if (matchResult) {
            const [, jsUrl, compLine, compCol] = matchResult;
            // 仅处理当前项目的编译文件
            if (jsUrl.includes('/main.js')) {
              const originalPos = consumer.originalPositionFor({
                line: parseInt(compLine, 10),
                column: parseInt(compCol, 10),
              });
              if (originalPos.source) {
                // 替换为源映射后的原文件位置
                return line.replace(
                  /at .+\((.+):(\d+):(\d+)\)/,
                  `at $& (原文件: ${originalPos.source}:${originalPos.line}:${originalPos.column})`
                );
              }
            }
          }
          return line;
        })
      );

      console.log('解析后的栈信息:', parsedStackLines.join('\n'));
    }
  }

  render() {
    return <div>页面出错了，请稍后重试</div>;
  }
}

export default ErrorBoundary;

2. 调整Webpack的devtool配置（开发环境可选） #

将开发环境的devtool改为eval-source-map，它生成的栈信息会自动包含源映射后的位置，无需手动解析：

// webpack.config.js
module.exports = {
  // ...其他配置
  devtool: process.env.NODE_ENV === 'development' ? 'eval-source-map' : 'cheap-module-source-map',
};

注意：eval-source-map的构建速度比cheap-module-source-map慢，仅适合开发环境使用。

3. 直接使用React的errorInfo字段 #

errorInfo.componentStack本身已经包含源映射后的组件调用栈，可直接获取错误发生的原文件位置：

componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
  console.log('源映射后的组件调用栈:', errorInfo.componentStack);
}

注意事项 #

• 仅在开发环境处理源映射逻辑，生产环境建议使用cheap-module-source-map或关闭源映射，避免暴露源码。
• 确保Webpack输出的source map文件在对应环境下可正常访问（开发环境默认自动生成，生产环境需配置devtool生成对应文件）。

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