[[358566]]

 前言

今年公司有個項目交付用戶使用了，在使用的過程中，發現會有很多不可測的因素，你完全想不到用戶會有什么樣的操作，導致各種神奇的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