為什么需要前端監(jiān)控？

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

如何定位前端線上問題？一直以來，都是很頭疼的問題，因?yàn)樗l(fā)生于用戶的一系列操作之后。錯誤的原因可能源于機(jī)型，網(wǎng)絡(luò)環(huán)境，復(fù)雜的操作行為等等，很難在開發(fā)環(huán)境中復(fù)現(xiàn)出來。特別是前端在沒有監(jiān)控系統(tǒng)加持的情況下，往往需要人肉解決問題，還要應(yīng)對產(chǎn)品的需求轟炸，真真是太難了！！！

今天給大家推薦一個在GitHub上線僅幾個月，就已經(jīng)獲得 2K+星項(xiàng)目——前端業(yè)務(wù)日志監(jiān)控工具?Webfunny

https://github.com/a597873885/webfunny_monitor

1、Webfunny概述

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

官網(wǎng)：www.webfunny.cn

2、Webfunny 特點(diǎn)

• 輕量級：可以隨時部署在任何地方，支持ESC部署和Docker部署，非?？旖莘奖?#xff1b;

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

• 針對性強(qiáng)：針對前端使用場景研發(fā)，輔助前端開發(fā)，容易上手；

• 無風(fēng)險：所有監(jiān)控數(shù)據(jù)都可以回流，監(jiān)控日志都存儲在你們自己的數(shù)據(jù)庫內(nèi)，不依賴任何第三方；

3、Webfunny?安裝使用

基礎(chǔ)環(huán)境

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

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

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

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

1. 安裝 Mysql 數(shù)據(jù)庫（Mysql安裝教程） 2. 創(chuàng)建數(shù)據(jù)庫（webfunny_db） 創(chuàng)建數(shù)據(jù)庫：webfunny_db。字符集設(shè)置：[Default Character set]：utf8、 [Default Collation]：utf8_bin

3. 數(shù)據(jù)庫連接配置

進(jìn)入webfunny_monitor/bin/mysqlConfig.js文件中 module.exports = {write: {ip: 'xxx.xxx.xxx.xxx', // 遠(yuǎn)程ip地址port: '3306', // 端口號dataBaseName: 'webfunny_db', // 數(shù)據(jù)庫名userName: 'root', // 用戶名password: '123456' // 密碼} }

第三步、本地部署運(yùn)行

1) 此時此刻，本地配置已經(jīng)完成了，嘗試運(yùn)行命令$: npm run prd（第一次運(yùn)行使用此命令，重啟使用：npm run restart）2) 打開瀏覽器，訪問地址：http://localhost:8010/webfunny/register.html?type=1 (初始化管理員賬號，并登錄)3) 創(chuàng)建新項(xiàng)目后，可以看到探針部署教程，完成部署。

第四步、生產(chǎn)環(huán)境部署

1. IP地址或者域名配置

進(jìn)入webfunny_monitor/bin/domain.js文件中（注意，對應(yīng)的端口號要保持一致）

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.項(xiàng)目列表地址，請?jiān)诳刂婆_執(zhí)行：curl http://xxx.xxx.xxx.xxx:8011/server/webMonitorIdList 或 curl http://www.baidu.com:8011/server/webMonitorIdList2.數(shù)據(jù)展示地址，請?jiān)跒g覽器訪問：http://xxx.xxx.xxx.xxx:8010/webfunny/overview.html 或 http://www.baidu.com:8010/webfunny/overview.html

2. 添加執(zhí)行權(quán)限（重要！！！否則無法生成數(shù)據(jù)庫表）

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

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

以下步驟可不必執(zhí)行，高并發(fā)的用戶可以繼續(xù)往下看。

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

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

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

項(xiàng)目地址：

https://github.com/a597873885/webfunny_monitor

關(guān)于Webfunny介紹到此就結(jié)束啦！

關(guān)于安裝使用上有任何問題和建議，

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

微信號：webfunny_2020

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

下面是福利時間

本公眾號讀者現(xiàn)在

可享受2個月免費(fèi)試用DEMO

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

添加Webfunny客服，

添加暗號“試用”

告知客服MM試用賬號

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。