一、前端為什么要做監控系統
前端的開發環境比較復雜，頁面在不同瀏覽器、微信等APP都可能展現不同，用戶的網絡網速、手機性能等，也會影響頁面訪問速度。在移動端可能更為明顯，移動端用戶對頁面響應延遲、頁面無法使用的容忍度更低。
二、要監控哪些？
-
前端異常監控：
- JavaScript錯誤信息監控
- Promise捕獲異常信息的抓取
- Ajax（xhr）異常信息捕獲
- console.error錯誤信息捕獲
- 資源錯誤信息捕獲
-
頁面性能監控：
- 重定向時間
- DNS查詢/緩存時間
- 頁面卸載時間
- TCP連接耗時
- 解析DOM樹耗時
- 內容/頁面加載完成時間
-
設備信息采集：
- 設備類型
- 操作系統/版本
- 屏幕信息
- 瀏覽器信息
這些主要是基礎功能，對于前端來說，最主要目的是方便快速定位線上問題。
然后我就搜索了一些前端監控系統，不過大都不如意。開源的功能極少，而且后期維護的很難。
自己搭建健康系統，時間和精力有限；周期太長，不適合。而像Logan類似的，閹割版，功能太少了不考慮。然后就看到了webfunny版本的，功能基本滿足我的需求，感覺還不錯。
三、webfunny
它的功能包括：
- 用戶細查
- 錯誤分析
- 接口分析
- 性能分析
- 流量分析
- 健康分析
- 上線安全監測
WX20211116-115430@2x.png
WX20211116-115507@2x.png
還能自定義添加埋點，這個不錯。
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網絡不穩定，可以使用碼云地址）
2.在項目根目錄下執行初始化命令和安裝命令$：npm run init && npm install
建議切換淘寶鏡像：' npm config set registry http://registry.npm.taobao.org/ '
默認沒有bin目錄，執行' npm run init '命令生成bin目錄
3.確認是否安裝了pm2，如果沒有安裝pm2，請執行安裝命令$：npm install pm2 -g
- MySQL 數據庫部署
1. 安裝 Mysql 數據庫（Mysql安裝教程）
2. 創建數據庫
數據庫名稱：webfunny_db。
字符集設置：[Default Character set]：utf8、 [Default Collation]：utf8_bin
3. 數據庫連接配置
進入webfunny_monitor/bin/mysqlConfig.js文件中（如果沒有數據庫，可以聯系我，使用測試數據庫哦）
module.exports = {
write: {
ip: 'xxx.xxx.xxx.xxx', // 遠程ip地址
port: '3306', // 端口號
dataBaseName: 'webfunny_db', // 數據庫名
userName: 'root', // 用戶名
password: '123456' // 密碼
}
}
- 項目啟動
1) 此時此刻，本地配置已經完成了，嘗試運行命令$: npm run prd
如果提示報錯：Script already launched，說明程序已經運行了，請使用$: npm run restart
2) 打開瀏覽器，訪問地址：http://localhost:8010/webfunny/register.html?type=1 (初始化管理員賬號，并登錄)
3) 創建新項目后，可以看到探針部署教程，完成部署。
就是這么快，部署好了。
webfunny支持私有化部署，容器化部署，這個不錯。
五、使用反饋
總體使用起來感覺不錯，部署也是很方便，功能也很齊全，推薦使用。
