一续滋、前端為什么要做監(jiān)控系統(tǒng)
前端的開發(fā)環(huán)境比較復(fù)雜，頁面在不同瀏覽器孵奶、微信等APP都可能展現(xiàn)不同疲酌，用戶的網(wǎng)絡(luò)網(wǎng)速、手機(jī)性能等了袁，也會(huì)影響頁面訪問速度朗恳。在移動(dòng)端可能更為明顯，移動(dòng)端用戶對(duì)頁面響應(yīng)延遲载绿、頁面無法使用的容忍度更低粥诫。
二、要監(jiān)控哪些崭庸？
-
前端異常監(jiān)控：
- JavaScript錯(cuò)誤信息監(jiān)控
- Promise捕獲異常信息的抓取
- Ajax（xhr）異常信息捕獲
- console.error錯(cuò)誤信息捕獲
- 資源錯(cuò)誤信息捕獲
-
頁面性能監(jiān)控：
- 重定向時(shí)間
- DNS查詢/緩存時(shí)間
- 頁面卸載時(shí)間
- TCP連接耗時(shí)
- 解析DOM樹耗時(shí)
- 內(nèi)容/頁面加載完成時(shí)間
-
設(shè)備信息采集：
- 設(shè)備類型
- 操作系統(tǒng)/版本
- 屏幕信息
- 瀏覽器信息
這些主要是基礎(chǔ)功能怀浆，對(duì)于前端來說，最主要目的是方便快速定位線上問題怕享。
然后我就搜索了一些前端監(jiān)控系統(tǒng)执赡，不過大都不如意。開源的功能極少熬粗，而且后期維護(hù)的很難搀玖。
自己搭建健康系統(tǒng)，時(shí)間和精力有限驻呐；周期太長(zhǎng)灌诅，不適合。而像Logan類似的含末，閹割版猜拾，功能太少了不考慮。然后就看到了webfunny版本的佣盒，功能基本滿足我的需求挎袜，感覺還不錯(cuò)。
三、webfunny
它的功能包括：
- 用戶細(xì)查
- 錯(cuò)誤分析
- 接口分析
- 性能分析
- 流量分析
- 健康分析
- 上線安全監(jiān)測(cè)
WX20211116-115430@2x.png
WX20211116-115507@2x.png
還能自定義添加埋點(diǎn)盯仪，這個(gè)不錯(cuò)紊搪。
WX20211116-115635@2x.png
四、webfunny快速部署
- webfunny部署
1.本地克隆代碼$：' git clone https://github.com/a597873885/webfunny_monitor.git '
使用碼云倉庫$：' git clone https://gitee.com/webfunnyMonitor/webfunny_monitor.git '（github網(wǎng)絡(luò)不穩(wěn)定全景，可以使用碼云地址）
2.在項(xiàng)目根目錄下執(zhí)行初始化命令和安裝命令$：npm run init && npm install
建議切換淘寶鏡像：' npm config set registry http://registry.npm.taobao.org/ '
默認(rèn)沒有bin目錄耀石，執(zhí)行' npm run init '命令生成bin目錄
3.確認(rèn)是否安裝了pm2，如果沒有安裝pm2爸黄，請(qǐng)執(zhí)行安裝命令$：npm install pm2 -g
- MySQL 數(shù)據(jù)庫部署
1. 安裝 Mysql 數(shù)據(jù)庫（Mysql安裝教程）
2. 創(chuàng)建數(shù)據(jù)庫
數(shù)據(jù)庫名稱：webfunny_db滞伟。
字符集設(shè)置：[Default Character set]：utf8、 [Default Collation]：utf8_bin
3. 數(shù)據(jù)庫連接配置
進(jìn)入webfunny_monitor/bin/mysqlConfig.js文件中（如果沒有數(shù)據(jù)庫炕贵，可以聯(lián)系我梆奈，使用測(cè)試數(shù)據(jù)庫哦）
module.exports = {
write: {
ip: 'xxx.xxx.xxx.xxx', // 遠(yuǎn)程ip地址
port: '3306', // 端口號(hào)
dataBaseName: 'webfunny_db', // 數(shù)據(jù)庫名
userName: 'root', // 用戶名
password: '123456' // 密碼
}
}
- 項(xiàng)目啟動(dòng)
1) 此時(shí)此刻，本地配置已經(jīng)完成了称开，嘗試運(yùn)行命令$: npm run prd
如果提示報(bào)錯(cuò)：Script already launched亩钟，說明程序已經(jīng)運(yùn)行了，請(qǐng)使用$: npm run restart
2) 打開瀏覽器钥弯，訪問地址：http://localhost:8010/webfunny/register.html?type=1 (初始化管理員賬號(hào)径荔，并登錄)
3) 創(chuàng)建新項(xiàng)目后，可以看到探針部署教程脆霎，完成部署总处。
就是這么快，部署好了睛蛛。
webfunny支持私有化部署鹦马，容器化部署，這個(gè)不錯(cuò)忆肾。
五荸频、使用反饋
總體使用起來感覺不錯(cuò)，部署也是很方便客冈，功能也很齊全旭从，推薦使用。
