Angular 5集成Raven-js实现Sentry报错，定位指向打包文件问题

嘿，这个问题我太熟悉了——Angular项目打包后，Sentry报错只指向bundle.js里的混淆代码，完全没法定位到实际的.ts源码，核心原因就是没给Sentry上传source map文件，让它能把bundle里的错误位置转译成真实的源码路径和行号。下面是针对Angular 5 + Raven-js的具体解决步骤：

第一步：开启Angular生产构建的Source Map生成 #

Angular 5默认在生产构建时会关闭source map，你需要修改项目根目录的.angular-cli.json配置文件，开启source map生成：
找到defaults下的build节点，将sourceMap设为true：

"defaults": {
  "build": {
    "sourceMap": true
  }
}

这样执行ng build --prod时，会在dist目录下生成对应的.js.map文件，和你的bundle文件一一对应。

第二步：上传Source Map到Sentry #

有两种常用的上传方式，选适合你的就行：

方式1：用Sentry CLI手动上传 #

1. 先安装Sentry CLI工具：

npm install @sentry/cli --save-dev

2. 在项目根目录创建sentry.properties文件，填入你的Sentry项目信息：

defaults.url=https://sentry.io/
defaults.org=你的组织名称
defaults.project=你的项目名称
auth.token=你的Sentry API令牌（需要有项目上传权限，在Sentry后台生成）

3. 构建完成后，执行上传命令，注意--url-prefix要和你报错里的路径匹配（比如你报错里的/mem/main....bundle.js，前缀就设为~/mem）：

node_modules/.bin/sentry-cli releases files <你的版本号> upload-sourcemaps dist/ --url-prefix "~/mem"

方式2：在构建脚本中自动上传 #

把上传命令加到package.json的scripts里，这样每次构建后自动上传：

"scripts": {
  "build": "ng build --prod",
  "postbuild": "sentry-cli releases files v1.0.0 upload-sourcemaps dist/ --url-prefix \"~/mem\""
}

执行npm run build时，构建完成后会自动触发postbuild脚本上传source map。

第三步：关联Raven-js的Release版本 #

在初始化Raven-js时，一定要设置release参数，并且要和你上传source map时用的版本号一致，这样Sentry才能正确关联：

Raven.config('你的Sentry DSN地址', {
  release: 'v1.0.0' // 和上传命令里的版本号保持一致
}).install();

第四步：验证效果 #

故意在你的代码里写一个测试错误，比如：

logOffline() {
  const testObj = undefined;
  console.log(testObj.id); // 这里会抛出TypeError
}

触发这个错误后，去Sentry后台查看报错信息，你会发现错误位置已经指向对应的.ts文件和具体行号，而不是bundle.js里的混淆代码了。

额外提醒 #

• 不要把source map文件部署到生产环境，上传后可以删除dist里的.map文件，避免暴露源码。
• 每次发布新版本时，记得更新release版本号，并且上传对应版本的source map。

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