如何在Angular 8项目中为Rollbar添加sourcemap

一、基础构建配置调整 #

首先修改angular.json文件的生产构建参数，Angular 8默认生产构建不会输出符合Rollbar要求的sourcemap：

• 找到projects > 你的项目名 > architect > build > configurations > production节点
• 新增/修改两个核心配置项：

  "sourceMap": true,
  "hiddenSourceMap": true
  

  该配置的作用是生成完整的sourcemap文件，但不会在打包后的js文件末尾添加sourceMappingURL注释，既可以满足Rollbar的匹配要求，也能避免普通用户通过浏览器直接下载到未混淆的源码，消除安全风险。

注意不要漏加hiddenSourceMap，如果仅开启sourceMap，所有访问生产环境的用户都能直接获取到你的项目源码。

二、大项目优化配置 #

如果你的项目体积较大，不需要生成css、第三方依赖的sourcemap，可以将sourceMap替换为对象配置，仅生成业务代码的sourcemap，减少打包耗时和sourcemap文件体积：

"sourceMap": {
  "scripts": true,
  "styles": false,
  "vendor": false
},
"hiddenSourceMap": true

三、打包后操作注意事项 #

• 执行ng build --prod后，dist目录下所有js文件对应的.map文件就是需要上传到Rollbar的sourcemap文件
• 禁止将.map文件部署到生产服务器，仅上传到Rollbar后台即可
• 上传sourcemap时填写的版本号，必须和项目中Rollbar初始化配置的code_version完全一致，否则Rollbar无法匹配到对应的sourcemap。

四、Rollbar初始化配置校验 #

确保生产环境Rollbar初始化时添加了以下配置，避免sourcemap匹配失效：

const rollbarConfig = {
  accessToken: '你的Rollbar项目token',
  captureUncaught: true,
  captureUnhandledRejections: true,
  environment: 'production',
  // 和上传sourcemap时的版本号完全对齐
  code_version: 'v1.0.0',
  payload: {
    client: {
      javascript: {
        source_map_enabled: true,
        guess_uncaught_frames: true
      }
    }
  }
};

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