Next.js应用source-map获取React组件错误行号不准确问题

问题现象 #

在Next.js生产环境中，使用source-map库解析客户端错误栈时，出现行号与Chrome DevTools显示不一致的情况：

• Chrome能正确定位到源码第7行
• source-map库解析结果却指向第4行，甚至偶尔会定位到错误组件文件

问题根源 #

最初通过componentDidCatch传入的errorInfo中的组件栈行号进行解析，但errorInfo.componentStack里的行号是React封装后的组件层级位置，并非编译后代码中触发错误的精确坐标。

解决方案 #

改用error.stack中的行号和列号作为解析参数：

1. 从日志的error.stack中提取编译后文件的行号（如37）和列号（如430129）
2. 传入sourceMap.SourceMapConsumer.getOriginalPositionFor()方法进行解析

示例对比 #

• Chrome显示的正确错误栈：

Error: render error
    at n4-test-error (test-error.tsx:7:11)

• 日志中的原始错误栈：

Error: render error
 at n4-test-error (https://www.my-domain.com/_next/static/chunks/pages/_app-4699402e2687df60.js:37:430129)
    at https://www.my-domain.com/_next/static/chunks/pages/_app-4699402e2687df60.js:63:14958
    at section
    at section
    at container (https://www.my-domain.com/_next/static/chunks/pages/_app-4699402e2687df60.js:37:289776)
    at https://www.my-domain.com/_next/static/chunks/pages/_app-4699402e2687df60.js:63:14958

• 错误解析结果（使用errorInfo）：

{
  source: 'webpack://_N_E/src/components/bloks/n4/test-error.tsx',
  line: 4,
  column: 38,
  name: 'React'
}

• 正确解析结果（使用error.stack中的坐标）：与Chrome一致，定位到源码第7行

原理说明 #

error.stack直接记录了V8引擎捕获到的编译后代码中错误的精确位置，和Chrome DevTools使用的数据源完全一致，因此解析后的源码位置准确。而errorInfo是React为组件错误处理提供的封装信息，其行号并非原始错误的精确映射。

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