sentry 前端监控

step1：让热心肠的后端小伙伴帮你搭建sentry服务

没有就别玩了，这不是前端该做的，或者自己去用vmware开个虚拟机，用docker安装。

step2：创建前端代码

搭建react前端代码。

step3：去后端小伙伴搭好的sentry服务创建react项目

先去修改语言、时区，生成API token，创建好后，直接复制对应代码进step2生成的项目中，安装sentry依赖，执行start指令，自己写点前端错误去触发，就可以在sentry后台看到错误了。sentry界面跟gitHub的风格很像啊。。

step4：上传souceMap

这步很多坑，上传sourceMap是打包构建才做的事情。对于react，需要先扩展webpack配置，配置好SentryWebpackPlug，创建好.sentryclirc文件，并填写好第三步生产的token跟对应内容就不用cli指令上传了

// config-overrides.js

const { override, addWebpackPlugin } = require('customize-cra');
const SentryWebpackPlugin = require("@sentry/webpack-plugin");
const path = require('path')


const configOutput = () => config => { // 配置打包输出地址
  config.output.path = path.resolve(__dirname, 'dist/');
  return config;
}








module.exports = {
  webpack: override(
    addWebpackPlugin(new SentryWebpackPlugin({
      release: 'v1.0.1', // 版本号，需要跟step3代码index.js->Sentry.init里面的release一致
      include: "dist/static/js", // map文件地址
      ignore: ["node_modules"],
      configFile: "sentry.properties", // 配置文件
      urlPrefix: '~/static/js' // 配置sourceMap文件前缀，否则容易出问题找不到
    })),
    configOutput()
  ),
};

最终打包run build，就能自动上传sourceMap，当Minified Scripts跟Source Maps地址对应起来，就没啥问题了：

 附上vue版本，同时讲解更细的：https://juejin.cn/post/6954303116783124487

vue的vue.config.js配置:

chainWebpack (config) {

    const isPord = process.env.NODE_ENV === 'production'

    console.log('isPord', isPord)

    config.when(isPord, config => {

      const pjson = require('./package.json')

      console.log('version', pjson.version)

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

      config.plugin('SentryCliPlugin').use(SentryCliPlugin, [{

        release: pjson.version,

        include: './dist/js',

        urlPrefix: "~/js/",

        configFile: "sentry.properties", // 配置文件

        ignore: ['node_modules'],

      }]

      )

      const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 上传完删除sourceMap

      config.plugin('CleanWebpackPlugin').use(CleanWebpackPlugin, [{

        verbose: true,

        cleanAfterEveryBuildPatterns: ['**/*.map'],

        protectWebpackAssets: false,

      }])

    })

}

安装 @sentry/webpack-plugin日常阻塞导致报错，需要在.npmrc 文件下加入：

sentrycli_cdnurl=https://github.com/getsentry/sentry-cli/releases/download/

 

注意坑，vue报错无效的原因：