前端异常监控和性能监控基本是web开发的标配了,很多公司都开发自己的异常监控和页面性能监控系统,sentry是个不错的开源的性能监控平台,功能丰富,还能和gitlab ,钉钉等各个平台进行结合,将异常监控上报到gitlab或与钉钉机器人结合,这对于一般公司来说,够用了,这对于线上前端出现的异常能够实时的发现,修复。

基于sentry的基础配置就不多说了,本文的目的就是怎么将sourcemap上传到sentry服务中去,让技术人员在分析异常的时,更加方便。

将js的sourcemap文件上传到sentry 有如下三种方法,1.realases API, 2.sentry-cli 3, sentry-webpack-plugin 都可以达到我们的目的。

现在我们来通过第三种方式来实现sourcemaps文件上传到sentry服务中。我以vue-cli3的配置来一步步实现配置。

配置

1.安装sentry-webpack-plugin插件

首先安装sentry-webpack-plugin插件,命令如下

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

 2.配置.sentryclirc文件

安装好sentry-webpack-plugin之后,接下来在项目根目录下新建文件.sentryclirc  该文件的配置如下所示

[defaults]
url = https://sentry.vipkid.com.cn/
org = vipkid
project = student-pk
 
[auth]
token = e30673956815499a8bb23769.........
现在说明没每个配置参数的含义
url sentry上报的网址
org 项目所在的组织
project 项目名称
token  api token
那么怎么查看这些信息呢?假如公司搭建的项目查看界面如下所示。
某一个sentry监控项目

上图说明的url ,org project对应的位置。token 的查找是点击自己的账户入口选择api, 就能查到自己对应的token ,一定要有project:write的权限 。

3.打包配置调用sentry-webpack-plugin插件

1.在vue-cli3中,我们想要添加webpack配置,1.需要在根目录下添加vue.config.js 来进行配置 。配置如下

const gitSha = require('child_process').execSync('git rev-parse HEAD').toString().trim() //这个是获取提交版本的记录
const SentryPlugin = require('@sentry/webpack-plugin');
  
process.env.RELEASE_VERSION = gitSha //将记录赋值给RELEASE_VERSION
  
//webpack配置
module.exports = {
   chainWebpack: config => {
      if (NODE_ENV === 'production') {
       config.plugin("sentry").use(SentryPlugin, [{
        ignore: ['node_modules'],
        include: './dist', //上传dist文件的js
        configFile: './.sentryclirc', //配置文件地址
        release: process.env.RELEASE_VERSION, //版本号
        deleteAfterCompile: true,
        urlPrefix: 'https://s.xx.com/fe-static/learning/student-pk' //cdn js的代码路径前缀
       }])
      }
   }
}

2.在引入sentry的文件中将版本号(RELEASE_VERSION)的配置 添加进去,student-pk 项目在main.js中引入了sentry,如下所示。

Raven.config('https://571a68f8698a1f750@sentry.vipkid.com.cn/207', {
    release: process.env.RELEASE_VERSION //版本号与vue.config.js的一致
 })
  .addPlugin(RavenVue, Vue)
  .install()

这样我们的往sentry上sourcemap的配置基本配置完毕,但是由于打包的时候也生成了sourcemap,这些资源是不上传到cdn上的,这个我们可以在打包完成之后删除对应目录下的.map文件,这样我们的sourcemaps上传配置就完成了。

测试配置

我们在项目中的某个文件下的mounted方法添加 this.testSentry()  (testSentry方法并没有定义) 代码如下所示。

mounted () {
    if (this.$route.query.back_url) { // web--来源于web页面
      localStorage.setItem('sourceSort', 'web')
      this.backUrl = this.$route.query.back_url
      localStorage.setItem('backUrl', this.backUrl)
    }
    this.testSentry() // this.testSentry()并没有定义
    if (!this.$route.query.back_url && !this.$route.query.result) { // pad--来源于pad
      localStorage.setItem('sourceSort', 'pad')
    }
  //.......
}

然后运行该代码,查看异常监控平台,效果如下

 

这样我们的sourcemap配置成功。

发表评论

电子邮件地址不会被公开。 必填项已用*标注