前言

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

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

sentry-cli构建

1)、生成api-key

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

1.jpg | center | 262x507

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

2.jpg | center | 747x442

2)、安装sentry-cli
  • 先全局安装sentry-cli
npm install sentry-cli-binary -g
  • 安装完成后登录sentry
sentry-cli login

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

image.png | left | 827x262

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

image.png | left | 827x140

补充org和project信息到.sentrylrc

image.png | left | 827x190

3)、注入异常

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

image.png | left | 827x216

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'

运行例子后的结果如图

image.png | left | 827x239

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

image.png | left | 827x453

6)、触发异常

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

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

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

image.png | left | 596x167

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

image.png | left | 685x201

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

image.png | left | 827x313

@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是默认会打开邮箱发送选项的,如果触发错误后并没有收到邮件,你可以点击下方的框框,勾选邮件

Jietu20180703-024254.jpg | center | 827x295

Jietu20180703-024327.jpg | center | 827x464

Jietu20180703-024359.jpg | center | 827x393

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

    // 一般是登录登录后获取到具体信息时带入
    Raven.setUserContext({
      user: 'xxx',
      id: 'sss',
    });
  • Issue关联GITHUB/GITLAB(暂时用处不大)
Logo

前往低代码交流专区

更多推荐