一款开源的前端监控神器，改bug终于不用迷茫了

 序言

2020年企业有一个新项目交货客户应用了，在应用的全过程中，发觉会出现许多 不能测的要素，你彻底意想不到客户会出现哪些的实际操作，造成 各种各样奇妙的bug出現。

通常这个时候，大家还并不是非常容易重现情景，必须客户截屏叙述情景，从而大家开发者再开展情景重现，再清查bug，恢复bug，那样高效率是十分不高的。

这时候我也在想，有木有那样的一个软件呢，能够全自动监视客户的个人行为运动轨迹，当出错的情况下，全自动将客户个人行为运动轨迹和出错信息内容提交网络服务器呢?

因此在网上一顿检索空袭，发觉了许多 开源系统或是收费标准的前端开发监控管理平台，例如：

• sentry ：从监管不正确、不正确统计图、多种标识过虑和标识统计分析到开启报警，这一整套都很健全，精英团队新项目必须充值，并且信息量越很多钱越高
• fundebug：除开监管不正确，还能够屏幕录制，也就是纪录不正确产生的前几秒钟客户的全部实际操作，缩小后的容积仅有几十 KB，但实际操作稍微繁杂
• webfunny：也是带有监管不正确的作用，能够适用干万等级日PV量，附加的闪光点是能够远程控制调节、特性剖析，还可以docker私有化部署(完全免费)，业务流程编码数据加密过

可是总觉得和我要的差了一点点，直至我偶然间见到那样一张照片：

没有错，便是它了!mitojs

mitojs

mitojs是一位巨头开源系统的一个前端开发监管SDK，现阶段适用vue和react，github详细地址两手相赠：

https://github.com/clouDr-f2e/mitojs

其主要是根据调用一部分原生态方式及加上全局性点击事件监视，来完成客户个人行为的监视，及错误报告立即推送。

线上感受详细地址两手相赠：

https://static.91jkys.com/web/mito-vue-demo/#/demo/one

见到这，怎样还能忍得住，立刻新创建一个新项目，感受一下飞一般的觉得。

应用mitojs

设计效果图先讨论一下设计效果图

我们可以见到，当新项目出错以后，会启用提交插口提交信息内容，在其中包含了客户的个人行为运动轨迹及当今出错信息内容，是否非常的nice!!

下边大家介绍一下简易的操作方法，下边是根据vue的操作方法。

操作方法

应用npm安装

 

  
npm i @zyf2e/mitojs -S 
 

引入软件

 

  
import MITO from '@zyf2e/mitojs' 
  
import Vue from 'vue' 
  
Vue.use(MITO.MitoVue) 
  
MITO.init({ 
  
  dsn: 'http://test.com/error',//错误报告提交插口详细地址 
  
  apikey: '123-2223-123-123',//每一个新项目相匹配一个apikey，用以储放不正确结合的唯一标志 
  
  backTrackerId() { 
  
    return String(Math.random() * 1000) 
  
  } 
  
}) 
 

随后就可以刚开始开心的应用它了。

别的配备项，请参照操作手册：

https://github.com/clouDr-f2e/mitojs/blob/master/docs/guide.md