前言今年公司有一个项目交付给用户。在使用的过程中,您会发现会有很多不可预知的因素。你无法想象用户会拥有什么。这样的操作会导致各种神奇的错误。往往这个时候我们就不容易复现场景,需要用户截图描述场景,然后我们开发人员再复现场景,然后排查修复bug,效率很低。这时候我就在想,有没有这样一个插件,可以自动监测用户的行为轨迹,报错时自动将用户的行为轨迹和错误信息上传到服务器呢?于是在网上搜索轰炸,发现了很多开源或者收费的前端监控平台,比如:sentry:从监控错误,错误统计图表,多标签过滤和标签统计到触发告警,这一套非常完整。团队项目需要收费,数据量越大,钱越贵fundebug:除了监控错误,还可以录屏,即记录用户在开始前几秒的所有操作发生错误。压缩后的体积只有几十KB,但是操作有点繁琐。webfunny:还包括监控错误的功能,可以支持千级万级的日PV量,额外亮点是远程调试,性能分析,docker私有化部署(免费),业务代码已经加密,但是总感觉比我想要的差一点点,直到我无意中看到这样一张照片:对,就是这样!mitojsmitojsmitojs是大佬开源的前端监控SDK。目前适用于Vue和React。github地址在这里:https://github.com/clouDr-f2e/Mitojs主要通过重写部分native方法,增加全局点击事件监听,实现用户行为监控和错误信息的及时发送。双手奉上在线体验地址:https://static.91jkys.com/web/mito-vue-demo/#/demo/one看到这里,我怎么忍心,立马新建一个项目,并体验飞翔的感觉。使用mitojs效果图先看一下效果图。我们可以看到,当项目报错时,会调用上传接口上传信息,包括用户的行为轨迹和当前的错误信息。是不是很不错!!下面介绍一下简单的用法,下面是基于Vue的用法。如何使用使用npm安装npmi@zyf2e/mitojs-S参考插件importMITOfrom'@zyf2e/mitojs'importVuefrom'vue'Vue.use(MITO.MitoVue)MITO.init({dsn:'http://test.com/error',//错误信息上传接口地址apikey:'123-2223-123-123',//每一项对应一个apikey,用于存放错误集合的唯一标识backTrackerId(){returnString(Math.random()*1000)}})然后愉快地使用它。其他配置项请参考使用手册:https://github.com/clouDr-f2e/mitojs/blob/master/docs/guide.md
