介紹

系統(tǒng)特點(diǎn)

Webfunny是一套完整的前端監(jiān)控系統(tǒng)方案，只需要簡(jiǎn)單幾步就可以將這套監(jiān)控系統(tǒng)移植到你自己的服務(wù)器上。

Webfunny經(jīng)壓力測(cè)試，可以支持千萬(wàn)級(jí)別日PV量，能夠滿足更多用戶的場(chǎng)景需求。

Webfunny是私有化部署，所有的日志數(shù)據(jù)都存在使用者的數(shù)據(jù)庫(kù)中，沒(méi)有任何數(shù)量限制，也不會(huì)依賴我們的任何服務(wù)

Webfunny提供了很多報(bào)警機(jī)制，使用者可以自己修改代碼，決定報(bào)警時(shí)機(jī)。

功能列表

項(xiàng)目總覽；監(jiān)控系統(tǒng)支持多個(gè)項(xiàng)目，讓所有項(xiàng)目的狀態(tài)都一目了然。通過(guò)對(duì)線上項(xiàng)目的實(shí)時(shí)分析，讓我們可以對(duì)線上狀況有個(gè)非常直觀的了解。例如PV、UV數(shù)據(jù)變化趨勢(shì)，留存變化，頁(yè)面停留時(shí)間，線上報(bào)錯(cuò)、異常等

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

自定義埋點(diǎn)；用戶可以自定義埋點(diǎn)，webfunny會(huì)將其記錄下來(lái)，并定時(shí)分析。同時(shí)可以對(duì)多個(gè)埋點(diǎn)步驟進(jìn)行漏斗分析，可以清晰的看到步驟之間的轉(zhuǎn)化率，留存率等等。

錯(cuò)誤分析；精細(xì)化分析每一個(gè)報(bào)錯(cuò)問(wèn)題，支持sourceMap源碼定位。通過(guò)探針監(jiān)控和上報(bào)線上環(huán)境的報(bào)錯(cuò)，以及一些自定義異常。我們對(duì)這些日志進(jìn)行精確的分析，可以準(zhǔn)確定位到代碼的問(wèn)題所在。同時(shí)能夠看到每一個(gè)報(bào)錯(cuò)的變化趨勢(shì)，也能夠分析出用戶在哪一步操作中發(fā)生了問(wèn)題。

性能分析；分析頁(yè)面和接口性能，加載耗時(shí)，成功率。探針對(duì)頁(yè)面的加載性能進(jìn)行分析，直觀反映在報(bào)表之上。也對(duì)接口的性能進(jìn)行了分析，如：耗時(shí)、成功率等。

無(wú)線調(diào)試功能；強(qiáng)大的調(diào)試功能，讓你從繁雜的調(diào)試工具中解脫出來(lái)。無(wú)線調(diào)試功能可以讓你隨時(shí)線上用戶，實(shí)時(shí)了解用戶的行為、控制臺(tái)打印信息、本地緩存信息等等。

部署

非容器化部署

一、安裝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

新建數(shù)據(jù)庫(kù)

create database xxx default character set utf8mb4;

修改mysql配置。

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

支持讀寫(xiě)分離。

module.exports = {write: {ip: 'xxx.xxx.xxx.xxx', // 遠(yuǎn)程ip地址port: '3306', // 端口號(hào)dataBaseName: 'webfunny_db', // 數(shù)據(jù)庫(kù)名userName: 'root', // 用戶名password: '123456' // 密碼}// 如果使用讀寫(xiě)分離，則增加以下配置read: [{ host: "xxx.xxx.xxx.xxx", username: "root1", password: "123456" },{ host: "xxx.xxx.xxx.xxx", username: "root2", password: "123456" }]}

修改mysql腳本執(zhí)行文件權(quán)限

chmod 755 createTable.sh chmod 755 restart.sh

四、配置域名

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

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

五、配置報(bào)警信息

webfunny提供了自定義報(bào)警攔截功能，執(zhí)行 npm run init 命令后會(huì)出現(xiàn)interceptor目錄，需要使用者修改代碼，以實(shí)現(xiàn)釘釘機(jī)器人的報(bào)警方式，

配置目錄如下：

$ROOT/interceptor/config/dingRobot.js

自定義功能文件：

$ROOT/interceptor/customerWarning.js

六、使用消息隊(duì)列（非必須）

安裝activemq

如果需要連接遠(yuǎn)程activemq，修改：/lib/RabbitMQ.js

module.exports = class RabbitMQ {constructor() {this.hosts = ["amqp://localhost"]; #消息隊(duì)列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 // 是否開(kāi)啟消息隊(duì)列，默認(rèn)不開(kāi)啟}

七、啟動(dòng)服務(wù)

? 啟動(dòng)

npm run prd

初始化管理員賬戶并登陸

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

地址list

#項(xiàng)目列表地址 http://localhost:8011/server/webMonitorIdList #數(shù)據(jù)展示地址 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

二、掛載配置

哪些配置文件需要修改，就掛載哪個(gè)文件

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掛載

使用說(shuō)明

探針部署方式

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

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

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

<script type="text/javascript"> ...此處放置監(jiān)控代碼... </script>

啟動(dòng)服務(wù)

demo

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

設(shè)計(jì)

目錄說(shuō)明

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

參考

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

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

總結(jié)

以上是生活随笔為你收集整理的webfunny前端监控的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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