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