Chrome自动格式化Error堆栈的原理是什么？如何获取源文件名过滤NPM包错误

1. 控制台打印的堆栈和Error.stack值不一致的原因 #

Chrome DevTools 不会修改Error.stack属性的原始运行时值，你在代码中直接读取到的stack字符串始终是编译后打包文件的实际路径、行列号。控制台显示的源文件路径版本，是DevTools在渲染日志内容时，异步加载对应sourcemap文件解析后替换展示的效果，属于控制台层面的UI优化，完全不影响JS运行时获取到的实际值。

2. 在代码中获取堆栈对应源文件名的方案 #

浏览器运行时没有直接向JS上下文暴露sourcemap的解析能力，无法直接在前端代码中解析得到源文件信息，可根据使用场景选择以下方案：

• 生产环境方案：将捕获到的错误stack字符串上传到自己的服务端，借助source-map等服务端解析库，结合打包生成的sourcemap文件反解出源文件路径、行列号后返回给前端即可。
• 轻量过滤场景方案：如果只是要区分NPM模块错误，不需要完整解析源文件，可直接匹配原始stack字符串的特征：第三方依赖的编译产物路径通常会携带node_modules标识，或对应包的固定打包文件名（如示例中的index.esm.js、whyDidYouRender.js），匹配这些特征即可快速区分，不需要解析sourcemap。
• 开发环境方案：可使用error-stack-parser等工具库先解析原始堆栈的结构化数据，再配合开发工具的公开API匹配源文件信息，不推荐在生产环境使用，会增加包体积。

3. 忽略指定NPM模块错误的实现 #

直接通过正则匹配原始stack字符串的特征即可快速实现过滤，示例代码如下：

// 定义错误过滤规则
function shouldIgnoreError(error) {
  const stack = error.stack || ''
  // 可自定义需要忽略的路径、文件名规则
  const ignorePatterns = [
    /node_modules/,
    /whyDidYouRender\.js/,
    /index\.esm\.js/
  ]
  return ignorePatterns.some(pattern => pattern.test(stack))
}

// 错误捕获时的使用示例
try {
  // 业务逻辑执行
} catch (err) {
  if (shouldIgnoreError(err)) {
    // 匹配到忽略规则，直接跳过处理
    return
  }
  // 处理需要关注的业务错误
}

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