如何从Ionic生产环境AppInsights错误信息中识别文件名与代码行

生产环境的JS代码经过压缩混淆，栈追踪里的变量名、文件名都是简化后的，要还原到原始文件和代码行，需要依赖source map文件，具体步骤如下：

• 保留构建生成的source map文件
  执行生产构建（如ng build --prod）时，Angular/Ionic会自动生成与压缩JS对应的.map文件（比如2806.694179fdbc052681.js.map），这些文件无需部署到服务器，但必须在构建后留存，是还原代码的关键。

• 用浏览器开发者工具自动还原

  1. 打开Chrome或Firefox的开发者工具，切换到Sources面板
  2. 访问生产环境的应用，让浏览器加载所有资源
  3. 若服务器临时开启了source map加载（调试时可临时配置），点击错误栈中的行号（如https://ps.myapp.app/2806.694179fdbc052681.js:1:4851），会直接跳转到对应的原始文件和代码行；若未开启，可手动将本地的source map文件拖入Sources面板，浏览器会自动关联解析。

• 手动用工具解析source map
  若无法直接在浏览器调试，可使用source-map工具手动解析：

  1. 全局安装工具：npm install -g source-map
  2. 将生产环境的混淆JS文件和对应的map文件下载到本地
  3. 执行命令（替换为你的文件和行列号）：

     source-map resolve 2806.694179fdbc052681.js 1 4851
     

     工具会输出原始文件路径、行号和列号。

• 额外排查提示
  错误栈中的dt.component.u.ɵfac是Angular组件工厂方法，说明错误出现在组件初始化阶段，还原代码后重点检查：是否有对null值调用length的逻辑（比如未初始化的数组、字符串变量）。

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