[[358566]]

 前言

今年公司有個(gè)項(xiàng)目交付用戶使用了，在使用的過(guò)程中，發(fā)現(xiàn)會(huì)有很多不可測(cè)的因素，你完全想不到用戶會(huì)有什么樣的操作，導(dǎo)致各種神奇的bug出現(xiàn)。

往往這個(gè)時(shí)候，我們還不是很容易復(fù)現(xiàn)場(chǎng)景，需要用戶截圖描述場(chǎng)景，進(jìn)而我們開(kāi)發(fā)人員再進(jìn)行場(chǎng)景復(fù)現(xiàn)，再排查bug，修復(fù)bug，這樣效率是十分低下的。

這時(shí)我就在想，有沒(méi)有這樣的一個(gè)插件呢，可以自動(dòng)監(jiān)聽(tīng)用戶的行為軌跡，當(dāng)報(bào)錯(cuò)的時(shí)候，自動(dòng)將用戶行為軌跡和報(bào)錯(cuò)信息上傳服務(wù)器呢?

于是網(wǎng)上一頓搜索轟炸，發(fā)現(xiàn)了很多開(kāi)源或者收費(fèi)的前端監(jiān)控平臺(tái)，比如：

• sentry ：從監(jiān)控錯(cuò)誤、錯(cuò)誤統(tǒng)計(jì)圖表、多重標(biāo)簽過(guò)濾和標(biāo)簽統(tǒng)計(jì)到觸發(fā)告警，這一整套都很完善，團(tuán)隊(duì)項(xiàng)目需要充錢(qián)，而且數(shù)據(jù)量越大錢(qián)越貴
• fundebug：除了監(jiān)控錯(cuò)誤，還可以錄屏，也就是記錄錯(cuò)誤發(fā)生的前幾秒用戶的所有操作，壓縮后的體積只有幾十 KB，但操作略微繁瑣
• webfunny：也是含有監(jiān)控錯(cuò)誤的功能，可以支持千萬(wàn)級(jí)別日PV量，額外的亮點(diǎn)是可以遠(yuǎn)程調(diào)試、性能分析，也可以docker私有化部署(免費(fèi))，業(yè)務(wù)代碼加密過(guò)

但是總感覺(jué)和我想要的差了一點(diǎn)點(diǎn)，直到我無(wú)意間看到這樣一張照片：

沒(méi)錯(cuò)，就是它了!mitojs

mitojs

mitojs是一位大佬開(kāi)源的一個(gè)前端監(jiān)控SDK，目前適用于vue和react，github地址雙手奉上：

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

其主要是通過(guò)重寫(xiě)部分原生方法及添加全局點(diǎn)擊事件監(jiān)聽(tīng)，來(lái)實(shí)現(xiàn)用戶行為的監(jiān)聽(tīng)，及錯(cuò)誤信息及時(shí)發(fā)送。

在線體驗(yàn)地址雙手奉上：

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

看到這，如何還能忍得住，馬上新建一個(gè)項(xiàng)目，體驗(yàn)一下飛一般的感覺(jué)。

使用mitojs

效果圖先來(lái)看看效果圖

我們可以看到，當(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) 
  } 
}) 

然后就可以開(kāi)始愉快的使用它了。

其他配置項(xiàng)，請(qǐng)參考使用手冊(cè)：

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