uni-app + sentry 前端异常监控

最近在研究sentry，发现他提供了vue的初始化步骤，根据他提供的步骤完全可以实现vue的异常监控，所以就不对vue多做解释，本文主要针对uni-app+sentry的前端异常监控。

sentry可以使用官方的也可以自己部署的，本文用的是官方的。

点击右上角创建项目，然后选择vue起一个自己喜欢的名字 然后点击创建项目。

映入眼帘的是这个页面，直接按照他说的把 先安装 @sentry/vue 和 @sentry/tracing 然后再把 下面的那几行代码复制到main.js,像下面这样

这时候 像这样写一个报错，他就会再sentry看到了

但是这个时候看到的报错是soucemap的 报错信息比较模糊
这是就需要把soucemap上传到sentry，再根目录下建一个vue.config.js,像我这样

这里要装一下 以来

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

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

module.exports = {
  // other configuration
  configureWebpack: {
    plugins: [
      new SentryWebpackPlugin({
        // 这个是APIkey
        authToken: '189776b51a61499dba6067a2f19815527f0cadc9ab374c09bcabaefa6daa385c',
        // 组织
        org: '6dd6d16027b5',
        // 项目
        project: 'newapp',
        // 这个就要像这样写 不然上传不了 并且目录对不上soucemap不会自动识别 要是你们有好的方法请给我留言，我比较菜
        include: 'E:/soucemap/unpackage/dist/build/h5',
        ignore: ['node_modules', 'vue.config.js'],
        // 这个是版本号  要与main.js里面的版本号一致
        release: 'test003',
      }),
    ],
	// 这个可就厉害了 不加这个uni-app不会生成soucemap文件
    devtool: 'source-map',
  },
}

至于以上几个参数都是从哪里来的 我就不多讲了 很简单 百度sentry + vue 一大推 ，这时候就差部署了
部署的时候把打包后代码里面js目录下所有的 .map文件删掉 不然不是很安全 ,打包的时候就已经把它上传到了sentry了

这是后如果你在看的话 他就会很清楚的看到是哪里报错了 像这样

本文到这里就结束了 ，建议先看看sentry+vue的文章再来看我这个 ，sentry+vue会了再看我这个也是简简单单。

本文地址：https://blog.csdn.net/weixin_49192390/article/details/113989218