前言
Fundebug幫助我們解決什么問(wèn)題韭赘？
- js運(yùn)行、資源加載柏腻、http請(qǐng)求錯(cuò)誤實(shí)時(shí)郵件報(bào)警
- 錯(cuò)誤源碼調(diào)用棧定位
- 用戶(hù)行為記錄
- 細(xì)化適用前端各種框架
- 業(yè)務(wù)主流程監(jiān)控上報(bào)自定義擴(kuò)展
已經(jīng)有了countly監(jiān)控密似，為什么不對(duì)countly做二次開(kāi)發(fā)？
- 當(dāng)然能在countly實(shí)現(xiàn)我們想要的上述功能最好葫盼，不過(guò)時(shí)間残腌、人力成本略大；架構(gòu)組調(diào)研前端異常監(jiān)控幾款產(chǎn)品贫导，最終選擇了Fundebug抛猫。除了現(xiàn)價(jià)段能滿(mǎn)足我們的需求外，接入成本較少孩灯，易于擴(kuò)展闺金，輕巧而專(zhuān)項(xiàng)能力強(qiáng)，可視化界面清爽的優(yōu)點(diǎn)峰档。下面由我來(lái)介紹針對(duì)我們現(xiàn)有的框架及項(xiàng)目败匹，怎么科學(xué)地接入使用。
起步走
- 前往https://fundebug.com/讥巡，用公司郵箱注冊(cè)掀亩，告知不惑加入團(tuán)隊(duì)相應(yīng)項(xiàng)目。如果是項(xiàng)目經(jīng)理欢顷，向不惑換回自己項(xiàng)目的apikey（類(lèi)似countly的appKey）槽棍。
- 回到自己的項(xiàng)目，安裝
npm install fundebug-javascript fundebug-cli --save
在package.json中做些手腳抬驴，請(qǐng)參考我的方式炼七，加入
"config": {
"funDebugKey": <apikey>
},
"scripts": {
...
"clean:map": "rimraf build/*.map", // 生產(chǎn)環(huán)境不需要*.map文件
"upload:map": "cross-env fundebug-cli upload --apikey $npm_package_config_funDebugKey --directory build/", // 源碼定位需要上傳至Fundebug
"compile": "cross-env DEBUG=app:* node bin/compile && npm run upload:map && npm run clean:map", // 一鍵壓縮
...
},
-
找到webpack入口文件，image.png
在第一行導(dǎo)入
import fundebug from 'fundebug-javascript';
然后初始化
fundebug.apikey = <apikey>;
變量只改動(dòng)一處的原則布持，這里最好取package.json里的內(nèi)部變量funDebugKey豌拙，不知道怎么取题暖？莫慌按傅，用webpack的DefinePlugin將它變?yōu)槿肿兞浚瑓⒖既鐖D：
還有幾個(gè)參數(shù)值得去配置芙委，appversion也從package.json里讀取逞敷，user.name幫助我們快速定位用戶(hù)狂秦，releasestage區(qū)分不同的環(huán)境灌侣。用戶(hù)登錄后，user.name需要再次賦值裂问。
總結(jié)
Fundebug的接入到此正式完成侧啼，靜靜想想牛柒，還是要做成npm包比較好，像countly一樣痊乾，原因一個(gè)是統(tǒng)一維護(hù)皮壁，一個(gè)是可限定入?yún)?biāo)準(zhǔn)，一個(gè)是做到最優(yōu)先執(zhí)行哪审，一個(gè)是方便后續(xù)擴(kuò)展蛾魄，好處多多，這里暫不考慮吧湿滓。
值得一提的是滴须，要支持錯(cuò)誤源碼定位，都應(yīng)開(kāi)啟webpack的sourcemap功能叽奥，務(wù)必檢查扔水。但在生產(chǎn)環(huán)境中，我們又不想將源碼暴露到瀏覽器朝氓，不用擔(dān)心魔市，前面一鍵壓縮命令在上傳完后自動(dòng)刪除*.map文件，目前有個(gè)小小的問(wèn)題赵哲，就是瀏覽器控制臺(tái)會(huì)報(bào)警告找不到相應(yīng)的*.map文件待德。瑕不掩瑜，積極擁抱枫夺。
