React TS本地项目try-catch无法获取真实错误文件名与行号问题

1. 为什么无法获取与Chrome控制台一致的真实文件名和行号？ #

Chrome控制台能显示真实文件路径，是因为浏览器自动加载了项目生成的source map文件，将打包后的bundle.js代码映射回了原始的TypeScript文件。而你在try...catch中直接获取的Error.stack是JavaScript运行时返回的原始栈信息，没有经过source map的解析，所以只会指向编译后的bundle.js及其行号。

1.1 为什么显示bundle.js而非真实文件名？ #

项目在本地运行时，React + TypeScript代码会被打包工具（如Webpack、Vite）编译、合并成bundle.js这类产物文件，错误栈默认记录的是编译后代码的执行位置。只有通过source map映射，才能将这些位置转换回原始的.tsx/.ts文件信息。

2. 这是React TS本地项目运行方式导致的问题吗？ #

是的。本地开发模式下，打包工具（CRA、Vite等）会生成source map来方便调试，但这个映射过程默认只有浏览器开发者工具会自动完成。JavaScript运行时本身不会自动应用source map去修正Error.stack的内容，所以你在代码里拿到的还是编译后的栈信息。

3. 需要修改哪里才能获取真实的文件名和行号？ #

你需要手动通过source map解析错误栈，将编译后的位置映射回原始文件。以下是针对常见构建工具的实现方案：

方案1：使用source-map包手动解析（通用方案） #

1. 安装依赖：

npm install source-map --save-dev

2. 在错误捕获逻辑中，读取对应bundle的source map文件（本地开发时可通过fetch获取，比如CRA的/static/js/bundle.js.map），然后用source-map库解析栈信息：

import { SourceMapConsumer } from 'source-map';

async function parseErrorStack(error: Error) {
  if (!error.stack) return error.stack;

  // 本地开发时获取source map文件
  const response = await fetch('/static/js/bundle.js.map');
  const sourceMapData = await response.json();

  const consumer = await new SourceMapConsumer(sourceMapData);
  const parsedStack = error.stack.split('\n').map(async (line) => {
    // 匹配栈行中的文件路径和行号，比如 "at Component (http://localhost:3000/static/js/bundle.js:1234:56)"
    const match = line.match(/at .+ \((.+):(\d+):(\d+)\)/);
    if (!match) return line;

    const [, url, lineStr, columnStr] = match;
    if (!url.includes('bundle.js')) return line;

    const lineNum = parseInt(lineStr, 10);
    const columnNum = parseInt(columnStr, 10);

    const originalPos = consumer.originalPositionFor({
      line: lineNum,
      column: columnNum,
    });

    if (originalPos.source) {
      // 替换为原始文件路径
      return line.replace(
        `${url}:${lineStr}:${columnStr}`,
        `${originalPos.source}:${originalPos.line}:${originalPos.column}`
      );
    }
    return line;
  });

  const result = await Promise.all(parsedStack);
  consumer.destroy();
  return result.join('\n');
}

// 使用示例
try {
  // 子组件抛出错误的逻辑
} catch (error) {
  if (error instanceof Error) {
    const parsedStack = await parseErrorStack(error);
    // 将parsedStack展示到表单中
    console.log(parsedStack);
  }
}

方案2：针对Vite项目的优化 #

Vite在开发模式下的source map可能是内联的，你可以在vite.config.ts中确保source map开启：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    sourcemap: true, // 开发模式下默认开启，这里显式声明
  },
});

之后同样可以用source-map包解析，或者使用stacktrace.js这类封装好的库来简化解析流程。

注意事项 #

• 开发环境下可以直接解析source map，生产环境下如果需要做同样的处理，建议将source map文件放在服务器端，不要暴露给前端用户，避免源码泄露。
• 不同打包工具的bundle路径和source map位置可能不同，需要根据项目实际情况调整fetch的URL。

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