介紹

系統特點

Webfunny是一套完整的前端監控系統方案，只需要簡單幾步就可以將這套監控系統移植到你自己的服務器上。

Webfunny經壓力測試，可以支持千萬級別日PV量，能夠滿足更多用戶的場景需求。

Webfunny是私有化部署，所有的日志數據都存在使用者的數據庫中，沒有任何數量限制，也不會依賴我們的任何服務

Webfunny提供了很多報警機制，使用者可以自己修改代碼，決定報警時機。

功能列表

項目總覽；監控系統支持多個項目，讓所有項目的狀態都一目了然。通過對線上項目的實時分析，讓我們可以對線上狀況有個非常直觀的了解。例如PV、UV數據變化趨勢，留存變化，頁面停留時間，線上報錯、異常等

用戶細查；深入分析每一個用戶，記錄下每個用戶的所有行為。由于線上用戶的操作行為十分復雜，有些問題可能隱藏在很多次操作之后，所以探針記錄了用戶的很多操作行為，一旦出現問題，復現BUG也將變得非常簡單。 同時，可以使用多種檢索條件進行搜索，提高查找效率。

自定義埋點；用戶可以自定義埋點，webfunny會將其記錄下來，并定時分析。同時可以對多個埋點步驟進行漏斗分析，可以清晰的看到步驟之間的轉化率，留存率等等。

錯誤分析；精細化分析每一個報錯問題，支持sourceMap源碼定位。通過探針監控和上報線上環境的報錯，以及一些自定義異常。我們對這些日志進行精確的分析，可以準確定位到代碼的問題所在。同時能夠看到每一個報錯的變化趨勢，也能夠分析出用戶在哪一步操作中發生了問題。

性能分析；分析頁面和接口性能，加載耗時，成功率。探針對頁面的加載性能進行分析，直觀反映在報表之上。也對接口的性能進行了分析，如：耗時、成功率等。

無線調試功能；強大的調試功能，讓你從繁雜的調試工具中解脫出來。無線調試功能可以讓你隨時線上用戶，實時了解用戶的行為、控制臺打印信息、本地緩存信息等等。

部署

非容器化部署

一、安裝node.js

要求：10.6.0及以上。

二、部署代碼

下載代碼

https://github.com/a597873885/webfunny_monitor.git

https://gitee.com/webfunnyMonitor/webfunny_monitor.git

安裝pm2

#查看 pm2 -v #安裝 npm install pm2 -g

初始化與安裝

npm run init && npm install

三、mysql配置

安裝mysql

新建數據庫

create database xxx default character set utf8mb4;

修改mysql配置。

配置文件路徑：$ROOT/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" }]}

修改mysql腳本執行文件權限

chmod 755 createTable.sh chmod 755 restart.sh

四、配置域名

配置文件路徑：$ROOT/bin/domain.js

module.exports = {localServerDomain: 'www.baidu.com:8011', // 日志上報域名 或IPlocalAssetsDomain: 'www.baidu.com:8010', // 前端頁面域名 或IPlocalServerPort: '8011', // 日志上報端口號localAssetsPort: '8010', // 前端頁面端口號 }

五、配置報警信息

webfunny提供了自定義報警攔截功能，執行 npm run init 命令后會出現interceptor目錄，需要使用者修改代碼，以實現釘釘機器人的報警方式，

配置目錄如下：

$ROOT/interceptor/config/dingRobot.js

自定義功能文件：

$ROOT/interceptor/customerWarning.js

六、使用消息隊列（非必須）

安裝activemq

如果需要連接遠程activemq，修改：/lib/RabbitMQ.js

module.exports = class RabbitMQ {constructor() {this.hosts = ["amqp://localhost"]; #消息隊列hostthis.index = 0;this.length = this.hosts.length;this.open = amqp.connect(this.hosts[this.index]);}

啟用activemq功能

配置文件：$ROOT/bin/messageQueue.js

module.exports = {messageQueue: false // 是否開啟消息隊列，默認不開啟}

七、啟動服務

? 啟動

npm run prd

初始化管理員賬戶并登陸

http://localhost:8010/webfunny/register.html?type=1

地址list

#項目列表地址 http://localhost:8011/server/webMonitorIdList #數據展示地址 http://localhost:8010/webfunny/overview.html

容器化部署

一、打鏡像

Dockerfile

FROM node:10.6.0-slim RUN npm install pm2 -g COPY . /app WORKDIR /app RUN npm install --registry=https://registry.npm.taobao.org RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime RUN echo 'Asia/Shanghai' >/etc/timezone EXPOSE 8010 EXPOSE 8011 CMD npm run prd

二、掛載配置

哪些配置文件需要修改，就掛載哪個文件

docker 原生

docker run --restart always -p 8010:8010 -p 8011:8011 \ -v /opt/workspace/webfunny/domain.js:/app/bin/domain.js \ -v /opt/workspace/webfunny/mysqlConfig.js:/app/bin/mysqlConfig.js \ --name webfunny \ -d webfunny_monitor \

K8S

采用configmap掛載

使用說明

探針部署方式

根目錄下執行命令$: webpack 得到一個壓縮js文件(探針)

lib/monitor.fetch.html2.min.js lib/monitor.fetch.min.js

將探針代碼插入到html頁面head的最頂部

<script type="text/javascript"> ...此處放置監控代碼... </script>

啟動服務

demo

http://www.webfunny.cn/demo/home.html

設計

目錄說明

||──bin/ * 項目啟動目錄| || || |—— domain.js * 域名配置文件| |—— messageQueue.js * 消息隊列開關配置文件| |—— mysqlConfig.js * mysql數據庫連接配置文件| |—— purchaseCode.js * 激活碼配置文件| |—— saveDays.js * 日志存儲周期配置文件| |—— webfunny.js * 服務啟動文件| ||——config/ * 基礎配置目錄（使用者可以不用關注）||——controllers/ * 業務邏輯代碼（已加密）||——interceptor/ * 攔截器代碼（監控到的異常都會經過攔截器，使用者可以自定義報警）| || |—— customerWarning.js * 對項目總體評分的攔截| |—— httpRequest.js * 產生接口請求會被攔截到| |—— javascriptError.js * 產生js報錯會被攔截到| |—— resourceError.js * 產生靜態資源加載失敗的情況會被攔截到||——lib/| || |—— RabbitMq.js * 消息對列創建文件| |—— webfunny.min.js * 探針生成的模板文件||——logs/| || |——errors/ * 監控系統運行錯誤日志目錄（排查部署問題）| || |——info/ * 普通日志打印目錄|||——modules/| || |—— models.js * 業務邏輯代碼（已加密）|||——routes/ * 路由、定時器||——views/ * 監控系統頁面代碼||||—— app.js * 程序入口文件|—— Dockerfile.js * docker部署配置文件|—— restart.sh * 程序重啟腳本文件（需設置此文件的執行權限）|—— 其他文件或目錄，使用者大可不必關注

參考

http://www.webfunny.cn/home.html

性能提升：https://www.cnblogs.com/warm-stranger/p/13975858.html

總結

以上是生活随笔為你收集整理的webfunny前端监控的全部內容，希望文章能夠幫你解決所遇到的問題。

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