為什么需要前端監控？

如果你是一位前端工程師，那你一定不止一次去解決一些頑固的線上問題，你也曾想方設法復現用戶的bug，結果可能都不太理想。

如何定位前端線上問題？一直以來，都是很頭疼的問題，因為它發生于用戶的一系列操作之后。錯誤的原因可能源于機型，網絡環境，復雜的操作行為等等，很難在開發環境中復現出來。特別是前端在沒有監控系統加持的情況下，往往需要人肉解決問題，還要應對產品的需求轟炸，真真是太難了！！！

今天給大家推薦一個在GitHub上線僅幾個月，就已經獲得 2K+星項目——前端業務日志監控工具?Webfunny

https://github.com/a597873885/webfunny_monitor

1、Webfunny概述

Webfunny是一款輕量級前端異常監控和前端性能監控系統，致力于幫助前端工程師定位并解決各種線上問題，確保項目健康良好的運行。支持千萬級別日PV量，能夠滿足用戶的各種場景需求。同時，針對不同企業和用戶，提供一對一的定制化服務，滿足更多業務需求。

官網：www.webfunny.cn

2、Webfunny 特點

• 輕量級：可以隨時部署在任何地方，支持ESC部署和Docker部署，非常快捷方便；

• 功能全面：不限制應用的流量、自定義日志存儲時間，能夠適應更多高并發的場景；

• 針對性強：針對前端使用場景研發，輔助前端開發，容易上手；

• 無風險：所有監控數據都可以回流，監控日志都存儲在你們自己的數據庫內，不依賴任何第三方；

3、Webfunny?安裝使用

基礎環境

安裝NodeJS，版本號：10.6.0及以上

第一步、下載(clone)最新部署包，初始化（不要改項目名！！！）

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 install3.確認是否安裝了pm2（執行$：pm2 -v），如果沒有安裝pm2，請執行安裝命令$：npm install pm2 -g

第二步、配置數據庫(Mysql)連接

1. 安裝 Mysql 數據庫（Mysql安裝教程） 2. 創建數據庫（webfunny_db） 創建數據庫：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（第一次運行使用此命令，重啟使用：npm run restart）2) 打開瀏覽器，訪問地址：http://localhost:8010/webfunny/register.html?type=1 (初始化管理員賬號，并登錄)3) 創建新項目后，可以看到探針部署教程，完成部署。

第四步、生產環境部署

1. IP地址或者域名配置

進入webfunny_monitor/bin/domain.js文件中（注意，對應的端口號要保持一致）

IP地址配置方式：module.exports = {localServerDomain: 'xxx.xxx.xxx.xxx:8011', // 日志上報域名localAssetsDomain: 'xxx.xxx.xxx.xxx:8010', // 前端頁面域名localServerPort: '8011', // 日志上報端口號localAssetsPort: '8010', // 前端頁面端口號 }域名配置方式：module.exports = {localServerDomain: 'www.baidu.com:8011', // 日志上報域名localAssetsDomain: 'www.baidu.com:8010', // 前端頁面域名localServerPort: '8011', // 日志上報端口號localAssetsPort: '8010', // 前端頁面端口號 }

配置完成后，瀏覽器訪問以下地址，保證能夠訪問成功。

1.項目列表地址，請在控制臺執行：curl http://xxx.xxx.xxx.xxx:8011/server/webMonitorIdList 或 curl http://www.baidu.com:8011/server/webMonitorIdList2.數據展示地址，請在瀏覽器訪問：http://xxx.xxx.xxx.xxx:8010/webfunny/overview.html 或 http://www.baidu.com:8010/webfunny/overview.html

2. 添加執行權限（重要！！！否則無法生成數據庫表）

正常情況下 createTable.sh, restart.sh 這兩個腳本沒有執行權限，需要用戶手動授權。

linux、mac系統，需要在項目根目錄下執行命令$：chmod 755 createTable.sh， chmod 755 restart.sh 進行授權。其他操作系統，請自行搜索授權方式【注意】如果不授權，可能無法自動創建每天的數據庫表 第五步、配置報警信息（釘釘機器人） webfunny提供了自定義報警攔截功能，執行 npm run init 命令后會出現interceptor目錄，需要使用者修改代碼，以實現釘釘機器人的報警方式，配置目錄如下： 釘釘機器人配置文件：/interceptor/config/dingRobot.js，其他通知方式，請自己查看代碼

以下步驟可不必執行，高并發的用戶可以繼續往下看。

第六步、啟動消息隊列(非必須)

1. 安裝RabbitMq（建議您在云服務器上部署完成后再執行此步驟）

開啟消息隊列之前，請先 安裝RabbitMq消息隊列服務，ubantu：https://www.cnblogs.com/warm-stranger/p/11000996.html 安裝完成后可以訪問Url：http://IP地址:15672 查看消息隊列的情況如果需要連接遠程消息隊列，請在根目錄下找到 lib/RabbitMq.js調整代碼配置。【小提示】：消息隊列不易安裝成功，如果中途出現問題，可以選擇重啟或者初始化云服務器。 2. 啟動消息隊列 RabbitMq 安裝完成后，在 webfunny_monitor/bin/messageQueue.js 文件中找到變量名：messageQueue，將此變量的值設置為：true, 重啟服務即可 第七步、配置讀寫分離(非必須) 1.配置好主從同步的多臺MySQL數據庫（最好是一主多從，一主一從尚可）2.進入webfunny_monitor/bin/mysqlConfig.js文件中module.exports = {write: {ip: 'xxx.xxx.xxx.xxx', // 遠程ip地址port: '3306', // 端口號dataBaseName: 'webfunny_db', // 數據庫名userName: 'root', // 用戶名password: '123456' // 密碼}，// 高性能版支持此屬性read: [{ host: "xxx.xxx.xxx.xxx", username: "root1", password: "123456" },{ host: "xxx.xxx.xxx.xxx", username: "root2", password: "123456" }] }

項目地址：

https://github.com/a597873885/webfunny_monitor

關于Webfunny介紹到此就結束啦！

關于安裝使用上有任何問題和建議，

歡迎添加下方客服交流、反饋哈~

微信號：webfunny_2020

--------------------------------------

下面是福利時間

本公眾號讀者現在

可享受2個月免費試用DEMO

????????????

添加Webfunny客服，

添加暗號“試用”

告知客服MM試用賬號

方便后臺幫你延長試用時間

總結

以上是生活随笔為你收集整理的推荐 GitHub 2K+ 星：前端监控工具 - webfunny 项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。