前端错误异常收集方式

工作需求，需要对项目有错误异常上报追踪警告等监控功能，那实现的原理类似于 这样，通过监听错误（前端四种错误处理方式）来上报监控系统，然后通过sourcemap进行追踪映射到错误位置，得到用户行为等。

那真自己写一个也很难面面俱到，难度也很大，周期也很长，所以第三方的还是更优选。

主要有这几个：

1，webfunny
官网：Webfunny前端监控系统，纯私有化部署
备注：虽然有源码，nodejs编写，但是主要文件被加密，无法进行修改和私有化部署，本地部署测试发现有些功能还待优化，目前源码还在维护，有很多限制和bug，无法有很好的体验。

2，fundebug
官网：Fundebug：一行代码搞定BUG监控
备注：之前好像是开源的，现在不是了，需要进行收费，功能还是蛮全的，但是价格也摆在那里。

3，阿里ARMS
官网：什么是ARMS前端监控_应用实时监控服务ARMS-阿里云帮助中心
备注：这个没什么好说的，需求功能也比较匹配，算是备选了，注意价格计算方式。还未尝试。

4，sentry
官网：Application Performance Monitoring & Error Tracking Software | Sentry
备注：这个我要重点说一下，首先是国外的开源系统，python编写，私有化部署资源比较高，linux系统要求，文档全英文，系统虽然有简体中文，但也只是菜单的内容翻译了而已，总的来说，成本也是很高的；但是，这才是真正的开源啊，如果数据量很多，项目也多，那免费的私有化部署真香啊！而且支持很多种类型的监控，都有对应的平台和sdk使用方式，已经支持的功能也有差别。

现在记录一下我在尝试sentry中的过程，以及遇到的问题和解决，其实文档内容挺全的，但是全英文还是让我头大，磨了很久，才有了解决方法。注意，这里只是针对一些前期的内容，后续很多集成还并没有使用到，如果之后有使用，会继续记录的。

一，准备
首先要有文档：文档链接
然后确定你要使用的sass版还是私有化，如果是私有化，那就需要本地起服务，这里用docker。docker镜像安装，参考这里。
然后启动的后台登录，设置语言为简体中文。
然后在文档中选择你的项目使用的语言平台，比如我用的vue，那我选择vue。

二，创建
在后台创建一个选择vue平台的项目，在vue你的项目中安装@sentry/vue。

npm install --save @sentry/vue

然后，在入口文件main.js中初始化sentry。（注意v2和v3的区别，这里是v2）

import * as Sentry from "@sentry/vue"

Sentry.init({
  Vue,
  //   enabled:Boolean,// 是否上传，可以区分环境
  //   allowUrls:[], // 上报的地址
  // normalizeDepth:10,// 上报层级
  // sampleRate: 0~1 , // 上报错误百分比
  // tracesSampleRate:0~1, // 上报事务百分比
  //   logErrors: true, // 上传log异常信息
  dsn: "http://xxx",  // 这里是在平台创建项目后的dsn
  environment: process.env.NODE_ENV,
  release: process.env.VUE_APP_SENTRY_VERSION || "0.0.1",
  integrations: [
    new Sentry.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router)
    }),
    new Sentry.Replay()
  ],
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  tracesSampleRate: 1,
  tracePropagationTargets: ["localhost"]
  //   反馈 弹框
  //   beforeSend(event) {
  //     if (event.exception) {
  //       Sentry.showReportDialog({ eventId: event.event_id })
  //     }
  //     return event
  //   }
})

dsn是在平台上创建项目后得到一个唯一的密钥，用于通信的。
然后手动模拟个异常，让sentry捕获。

sentryTest() {
      throw new Error("sentry error")
    }

 三，上传sourcemap
为了方便查看具体的报错内容，我们需要上传sourceMap到sentry平台。一般有两种上传方式：sentry-cli和sentry-webpack-plugin。sentry-cli参考这里。
我这里采用的是 sentry-webpack-plugin，可以自动的每次打包后上传。
首先安装 @sentry/webpack-plugin ，如果npm一直报错，那就用cnpm安装。

npm i @sentry/webpack-plugin -D

 然后在vue.config.js中配置，（webpack也一样）

const { sentryWebpackPlugin } = require("@sentry/webpack-plugin")
const mode = process.env.NODE_ENV
const isDev = mode === "development"
module.exports = {
    configureWebpack: {
        devtool: isDev ? undefined : "source-map",
        output: {
          filename: isDev ? "[name].js" : "js/[name].[chunkhash].js",
          sourceMapFilename: isDev ? undefined : "sourceMap/[name].[chunkhash].map.js"
        },
        plugins: [
          sentryWebpackPlugin({
            include: "./dist/sourceMap", // 只上传js
            ignore: [
              "node_modules",
              "vue.config.js",
              "gulpfile.js",
              "babel.config.js"
            ],
            configFile: "sentry.properties",
            release: process.env.VUE_APP_SENTRY_VERSION || "0.0.1", // 版本号，每次都npm run build上传都修改版本号
            cleanArtifacts: true // 先清理再上传
          })
        ]
      },
    productionSourceMap: true,
}

这里我要加一些提示，因为出错最多的就是这里了，好几次搞的项目都起不来！！！
首先这里需要写在 configureWebpack 下，因为chainWebpack一直报错：Plugin is not a constructor，也可能是我用法不对。
然后默认打包的话，map和js文件都会在js文件夹下，所以这里output进行了分开处理，直接上传sourceMap文件夹就好，并且上传源码dist，需要删除sourceMap文件夹。
还要区分 isDev 环境。
还有configFile这个属性，sentry.properties 其实是指 .sentryclirc 文件，这个需要自己新建，里面配置如下：

[auth]
token=控制台生成的

[defaults]
url=http://192.168.102.253:9000
org=sentry
project=vue-tangshan

• url：sentry部署的地址，默认是https://sentry.io/
• org：控制台查看组织名称
• project：项目名称
• token：生成token需要勾选project:write项目写入权限

 token需要在用户中生成，主要要勾选的权限，多加一个 project:write 

 这样，再次打包就会上传到sentry，得到错误的具体映射了。

这里补充一些，换了个项目踩的坑！！

①，换了个项目，因为项目比较旧，用的很多都是低版本的包，所以，以上的方法虽然逻辑没问题，但是实践一直报错过不去的，所以这里用过sentry-cli手动上传sourcemap，记录一下。

全局安装@sentry/cli

然后登录 sentry-cli --url xxxx login ,回车后会要求输入token，填入token后会生成.sentryclirc文件，然后将信息填入。

[auth]
token=YOUR API TOKEN
 
[defaults]
url=服务器
org=组织
project=项目

创建release

sentry-cli releases -o 组织 -p 项目 new 版本名称

删除release

sentry-cli releases -o 组织 -p 项目 delete 版本名称

然后上传sourcemap

sentry-cli releases -o 组织名 -p 项目名 files 版本号 upload-sourcemaps 打包后的js目录 --url-prefix 线上js访问地址

 ！！！这里我要着重解释一下，差点在坑里出不来。

-o是组织名，-p是项目名，这两个是在sentry创建对应项目的时候定义的。

files 是版本名称，这里和创建release的是一致的，会上传到对应的版本上。

upload-sourcemaps 是上传打包后的js目录，这里！是上传打包后js和map的文件，都上传，不然无法映射的。

--url-prefix 是线上的js访问地址，比如，http://xxxx/static/js/xxx.js ，那么这里就应该用 '~/static/js'，可以用相对路径，也可以用绝对路径（加域名），最好别写死，找到js后会根据上传的映射找到对应的map，实现错误定位。

sentry手动上传参考

②，手动上传实现后，就想办法在项目中实现，所以还是要用到@sentry/webpack-plugin的。通过我设置加一次次调试，得知webpack4，vue2.5的vue.config.js中，需要使用低版本的@sentry/webpack-plugin，不支持新版本语法，我使用的是1.20.0，在configureWebpack中的plugins添加代码：

    output: {
          ...config.output,
          filename: `static/js/[name].[chunkhash].${version}.js`,
          chunkFilename: `static/js/[name].[chunkhash].${version}.js`,
          sourceMapFilename: `static/js/[name].[chunkhash].${version}.map.js`
        },

// 这两部分的写法并不连贯，根据自己的项目进行修改
    config.plugins.push(
        new SentryCliPlugin({
          include: './dist/static/js',
          configFile: 'sentry.properties',
          release: 'test@' + versionLib,
          cleanArtifacts: true,
          ignore: [
            'node_modules',
            'vue.config.js',
            'webpack.dll.config.js',
            'babel.config.js',
            '*.xml'
          ],
          urlPrefix: '~/static/js'
        })
      )

还需要注意！上传后要删除sourcemap，这里我使用的是 命令行。

 "rmmap":"rimraf ./dist/static/js/*.map.js"

执行完build操作后 ，执行 rimraf 操作，删除map。命令行中可以用 && 串行。

"build": "vue-cli-service build && npm run rmmap",

上传是否成功，可以在这里查看

 四，Performance 性能
除了捕捉错误外，Sentry还可以收集一些页面性能方面的数据。Sentry.init() 中，new Integrations.BrowserTracing() 的功能就是将浏览器页面加载和导航检测作为事物，并捕获请求和其他性能指标。在init中加入如下写法。

integrations: [
    new Sentry.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router)
    }),
    new Sentry.Replay()
  ],

五，replays 重演
sentry还可以通过replay进行错误的追踪和重演，让我们可以知道错误的产生过程，更好的帮我们解决异常。在Sentry.init()中，加入 new Sentry.Repaly() 来启动。

六，profiling 分析
js不支持这个功能，如果是后端的一些项目应该能更深层次的分析异常。 

其他，目前涉及到的功能如上，也是sentry很基础和简单的功能，还有很多规则和自定义的功能与配置还没有使用，sentry比我想象的要强大，比如github的集成，codecov的使用等等，还需要继续磨英文文档o(╥﹏╥)o，那如果有后续的话再见了~

后续如果用到beforeSend, configureScope, withScope等会继续的。

哦，参考文档放这里：
前端异常监控系统Sentry的基本使用_Vue_dstweihao_InfoQ写作社区
基于Sentry的前端性能监控平台搭建与应用_sentry 私有化部署_xiangzhihong8的博客-CSDN博客
Sentry For Vue 完整接入详解(2021 Sentry v21.8.x)前方高能预警！三万字，慎入！_为为少的博客-CSDN博客

上传sourcemap方法

sentry原理