sentry上传sourcemap

前言

阅读这篇文章的大前提是你已经创建了一个sentry项目，但是希望在sentry的报错中能够提示更多的信息，所以希望通过sourcemap来定位问题。这篇文章基于vue-cli中的webpack模式，其他模式原理一样。

注意：本文只是提供思路，并不可以用于生产环境，因为涉及到打包流程，而每个项目的打包方式并不一致，所以可以根据此思路去实现自己的上报流程。

sentry-cli构建

1)、生成api-key

这一步主要是用来上传时登录需要，点击头像 => 点击API keys

如果你已经创建过token，你的界面会和我一样，如果没创建，根据提示创济南即可，但注意一点的是，需要勾选project:write

2）、安装sentry-cli

• 先全局安装sentry-cli

npm install sentry-cli-binary -g

• 安装完成后登录sentry

sentry-cli login

这时会提示输入token，把刚才第一步创建的token粘贴到这里，运行

然后你会看到提示创建了一个.sentrylrc文件，文件的内容如下

补充org和project信息到.sentrylrc

3）、注入异常

我们在代码中，注入一些异常，并指定release版本

4)、构建代码

运行命令

npm run build

最终会在根目录生成dist文件夹。

5)、上传sourcemap

# sentry-cli releases files <release名称> upload-sourcemaps --url-prefix <线上资源URI> <打包出来的js文件所在目录>
sentry-cli releases files demo-test001 upload-sourcemaps --url-prefix '~/static/js' './dist/static/js'

运行例子后的结果如图

打开sentry的项目，查看版本，会发现多了一些资源，但实际上有用的是map文件，所以在上传完成后需要根据实际情况在构建脚本中把对应的map文件删除，避免打包到生产中(其中一个原因是文件太大，另一个原因是不安全)。

6）、触发异常

这时，你可以通过访问本地的http://127.0.0.1:6324，然后触发我们构建的异常，因为我本地构建了一个服务，如果你也希望构建此服务，你可以通过安装http的服务包

# 我这个例子中线上资源是因为我在本地通过http-server起了一个服务来访问
# 如果你也希望这么做，你可以
npm i -g http-server 
cd dist
http-server -p 6324

此时会看到控制台抛出异常，同时会发送一个请求到sentry的服务器

此时打开sentry的控制台，你会看到刚才触发的错误

打开这个错误，就可以看到具体的错误信息，定位问题变得更加容易

@sentry/webpack-plugin构建

上面利用sentry-cli构建时，相对麻烦，而且会暴露key等一些信息，所以我们希望利用webpack插件来加快我们的上传。

1)、安装@sentry/webpack-plugin插件, 一般会同时安装@sentry/cli

npm i @sentry/webpack-plugin --dev

2）、根目录创建.sentryclirc文件

[defaults]
url = https://sentry.io/
org = your org
project = your project

[auth]
token = your token

3)、在config/prod.env.js创建环境变量

// config/prod.env.js

const release = 'demo-test006'; // 可以根据package.json的版本号或者Git的tag命名
process.env.RELEASE_VERSION = release;
module.exports = {
  NODE_ENV: '"production"',
  RELEASE_VERSION: `"${release}"`,
}

4)、写入插件

// build/webpack.prod.config.js

const SentryPlugin = require('@sentry/webpack-plugin')
// ...省略一堆

plugins: [
  // ...省略一堆
  new SentryPlugin({
    include: './dist',
    release: process.env.RELEASE_VERSION,
    configFile: 'sentry.properties',
    urlPrefix: '~/'
  })
]

5)、运行打包

npm run build

此时在服务中打开触发错误，你就会在sentry中查看到具体的错误信息。对比cli构建的方式，webpack的优势还是蛮大的，但是利用cli的好处是我可以把token放在服务器，这样就可以避免token的泄露。

webpack-sentry-plugin构建

这个包目前支持webpack123版本上传sourcemap，而且周下载量也达到11k。这个包有一个优势是可以在上传后删除打包后的sourcemap，可以节省后面上传打包后文件的过滤sourcemap的操作。
PS: 先确保没有全局安装sentry-cli包，否则会有冲突

1)、安装webpack-sentry-plugin插件

npm install webpack-sentry-plugin --save-dev

2)、根目录创建sentry.config.js(仅仅是为了方便管理token)

module.exports = {
  organization: '',
  project: '',
  apiKey: '',
};

3)、在config/prod.env.js创建环境变量（同上）

4)、写入插件

// build/webpack.prod.config.js

const SentryPlugin = require('webpack-sentry-plugin')
// ...省略一堆

plugins: [
  // ...省略一堆
  new SentryPlugin(Object.assign({
      release: process.env.RELEASE_VERSION,
      deleteAfterCompile: true,
      // exclude: /(\.css\.map| \.css | \.html)$/,
      include: /(\.js\.map | \.js)$/, // 只上传js和map文件
      filenameTransform: function (filename) {
        return '~/' + filename
      },
    }, require('../sentry.config.js')))
]

5)、运行打包

npm run build

其实这个插件和官方的@sentery/webpack-plugin功能差不多，只不过多了一些配置项，例如删除sourcemap

增强sentry异常捕捉

续。。

sentry的小知识点

• 发送邮件

一般来说，sentry是默认会打开邮箱发送选项的，如果触发错误后并没有收到邮件，你可以点击下方的框框，勾选邮件

• 设置触发异常的用户,更有利于追踪，文档：https://docs.sentry.io/learn/context/

  // 一般是登录登录后获取到具体信息时带入
  Raven.setUserContext({
    user: 'xxx',
    id: 'sss',
  });

• Issue关联GITHUB/GITLAB（暂时用处不大）