sourcemap 上传到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')
    }
  //.......
}

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