一款開源的前端監(jiān)控神器，改bug終于不用迷茫了
前言
今年公司有個(gè)項(xiàng)目交付用戶使用了，在使用的過程中，發(fā)現(xiàn)會(huì)有很多不可測(cè)的因素，你完全想不到用戶會(huì)有什么樣的操作，導(dǎo)致各種神奇的bug出現(xiàn)。
往往這個(gè)時(shí)候，我們還不是很容易復(fù)現(xiàn)場(chǎng)景，需要用戶截圖描述場(chǎng)景，進(jìn)而我們開發(fā)人員再進(jìn)行場(chǎng)景復(fù)現(xiàn)，再排查bug，修復(fù)bug，這樣效率是十分低下的。
這時(shí)我就在想，有沒有這樣的一個(gè)插件呢，可以自動(dòng)監(jiān)聽用戶的行為軌跡，當(dāng)報(bào)錯(cuò)的時(shí)候，自動(dòng)將用戶行為軌跡和報(bào)錯(cuò)信息上傳服務(wù)器呢?
于是網(wǎng)上一頓搜索轟炸，發(fā)現(xiàn)了很多開源或者收費(fèi)的前端監(jiān)控平臺(tái)，比如：
- sentry ：從監(jiān)控錯(cuò)誤、錯(cuò)誤統(tǒng)計(jì)圖表、多重標(biāo)簽過濾和標(biāo)簽統(tǒng)計(jì)到觸發(fā)告警，這一整套都很完善，團(tuán)隊(duì)項(xiàng)目需要充錢，而且數(shù)據(jù)量越大錢越貴
- fundebug：除了監(jiān)控錯(cuò)誤，還可以錄屏，也就是記錄錯(cuò)誤發(fā)生的前幾秒用戶的所有操作，壓縮后的體積只有幾十 KB，但操作略微繁瑣
- webfunny：也是含有監(jiān)控錯(cuò)誤的功能，可以支持千萬級(jí)別日PV量，額外的亮點(diǎn)是可以遠(yuǎn)程調(diào)試、性能分析，也可以docker私有化部署(免費(fèi))，業(yè)務(wù)代碼加密過
但是總感覺和我想要的差了一點(diǎn)點(diǎn)，直到我無意間看到這樣一張照片：
沒錯(cuò)，就是它了!mitojs
mitojs
mitojs是一位大佬開源的一個(gè)前端監(jiān)控SDK，目前適用于vue和react，github地址雙手奉上：
https://github.com/clouDr-f2e/mitojs
其主要是通過重寫部分原生方法及添加全局點(diǎn)擊事件監(jiān)聽，來實(shí)現(xiàn)用戶行為的監(jiān)聽，及錯(cuò)誤信息及時(shí)發(fā)送。
在線體驗(yàn)地址雙手奉上：
https://static.91jkys.com/web/mito-vue-demo/#/demo/one
看到這，如何還能忍得住，馬上新建一個(gè)項(xiàng)目，體驗(yàn)一下飛一般的感覺。
使用mitojs
效果圖先來看看效果圖
我們可以看到，當(dāng)項(xiàng)目報(bào)錯(cuò)之后，會(huì)調(diào)用上傳接口上傳信息，其中包括了用戶的行為軌跡及當(dāng)前報(bào)錯(cuò)信息，是不是相當(dāng)?shù)膎ice!!
下面我們介紹一下簡(jiǎn)單的使用方法，下面是基于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',//錯(cuò)誤信息上傳接口地址
- apikey: '123-2223-123-123',//每個(gè)項(xiàng)目對(duì)應(yīng)一個(gè)apikey，用于存放錯(cuò)誤集合的唯一標(biāo)識(shí)
- backTrackerId() {
- return String(Math.random() * 1000)
- }
- })
然后就可以開始愉快的使用它了。
其他配置項(xiàng)，請(qǐng)參考使用手冊(cè)：
https://github.com/clouDr-f2e/mitojs/blob/master/docs/guide.md
