使用sentry上传sourcemap

一个配置项成功上传soucemap文件到sentry

之前用的fundebug 很好用，但是收费，在掘金发现了sentry这个好用的监控平台。部署的就不说了，可以使用官方提供的，但是错误数量显示5000以内，超过就不能用了，一般都是公司自己部署，这篇文章主要记录使用sentry上传sourcemap遇到的一些问题。

因为使用的vue开发，所以为了方便使用的插件是：@sentry/webpack-plugin

前面项目引入的就不多说了：

import * as Sentry from '@sentry/vue'
import { Integrations } from '@sentry/tracing
if(process.env.NODE_ENV==='production'){
    Sentry.init({
        app,
        dsn: "https://086274867e1b4e74b89530c083439827@o1160714.ingest.sentry.io/6487100",
        integrations: [
            new BrowserTracing({
                routingInstrumentation: Sentry.vueRouterInstrumentation(router),
                tracingOrigins: ["localhost", "my-site-url.com", /^\//],
            }),
        ],
        // Set tracesSampleRate to 1.0 to capture 100%
        // of transactions for performance monitoring.
        // We recommend adjusting this value in production
        tracesSampleRate: 1.0,
        release: process.env.SENTRY_RELEASE,
    });
}

因为我发现在开发的时候引入sentry，会导致控制台输出的内容不能指定到所在行，所以就加了打包限制。只有打包的时候才引入。

很多文档上面写的需要生成.sentryclirc文件，我感觉完全不需要。

直接在vue.config.js里面引入：

const SentryCliPlugin = require('@sentry/webpack-plugin')

然后就是plugins里面填写配置即可：

pluginsConf.push(new SentryCliPlugin({
    authToken: you token,
    url: 'https://sentry.io/',
    org: "org111",
    include: './malldist',
    project: 'mall',
    ignoreFile: '.gitignore',
    ignore: ['node_modules'],
    // configFile: 'sentry.properties',
    release: process.env.SENTRY_RELEASE, // 对应main.js版本号
    // cleanArtifacts: true, // 先清理再上传
  }))

这个参数的配置文档都有说明，我是用的sentry.io基础版本的。地址就直接是默认的

文档地址：https://github.com/getsentry/sentry-webpack-plugin

然后打包就可以自动上传sourcemap文件了：然后就是上传线上的时候删除map文件。

Tap：

看了很多删除sourcemap的插件，都感觉不好用，分享一下我删除的方法：

1.首先是我在项目中使用了UglifyJsPlugin这个插件,打包的话会删除soucemap文件，所以就用了他的功能来实现，

2.修改page.json

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "sentry": "vue-cli-service build --mode sentry",
    "lint": "vue-cli-service lint"
  },

增加sentry命令，用于打包并上传sourcemap文件：

3.修改vue.config.js

if (process.env.NODE_ENV === 'production' && process.env.NODE_TYPE === 'production') {
  pluginsConf.push(new UglifyJsPlugin({
    uglifyOptions: {
      output: {
        comments: false,
        // 去掉注释
      },
      compress: {
        // warnings: false,
        drop_console: true,
        drop_debugger: false,
        pure_funcs: ['console.log']
        // 移除console
      }
    }
  }))
}
if (process.env.NODE_ENV === 'production'&& process.env.NODE_TYPE === 'sentry') {
  pluginsConf.push(new SentryCliPlugin({
    同上
  }))
}

通过不同的环境变量env.NODE_ENV来区分，本来想直接设置sentry的环境变量为sentry，但是一直不能生成sourcemap文件，只能在NODE_ENV为production的时候才能生成，所以创建env.sentry 文件，通过sentry命令选择这个文件，然后里面设置变量：

NODE_ENV=production
NODE_TYPE=sentry

其他mode下面，设置的NODE_TYPE为production，至此成功上传soucemap文件到sentry服务器，自己配置的服务器同理：

打包操作如下：

npm run sentry
上传到sentry
npm run build
将生成的文件上传到服务器