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（暂时用处不大）