介绍

系统特点

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前端监控相关推荐

简单三步教会你在前端监控平台：安装小程序、uni-app探针（详细教程）
Webfunny现在支持微信小程序.uni-app的监控探针了,两个平台安装探针的方式很相似. 一.微信小程序探针安装 (1)首先创建一个微信小程序项目 (2)项目生成后,复制探针代码.在小程序项目的 ...
网页前端监控系统（错误日志，接口监控）的使用
网页前端监控系统(错误日志,接口监控)的使用开门见山地说当程序员开发网页达到一定的量级,用户的数量达到一个比较庞大的数量时,总会遇见一些怎么测试都无法复现的bug,但是用户操作的时候却能屡次碰到, ...
让我们一起写一个前端监控系统吧！
CSDN话题挑战赛第2期参赛话题:前端技术分享项目介绍我们基于Vue2.利用vue-plugin实现项目级别的npm包监控报错,并专为Vue项目设计了监控中台核心监控插件开箱即用,用户可灵活选 ...
GMTC 大前端时代前端监控的最佳实践
摘要: 今天我分享的内容分成三个部分: 第一部分是"大前端时代前端监控新的变化", 讲述这些年来,前端监控一些新的视角以及最前沿的一些思考. 第二部分"前端监控的最佳实践 ...
通过页面埋点做监控却不影响性能？解密ARMS前端监控数据上报技术内幕
摘要: 本文将为您介绍,在采集多类日志数据的情况下,阿里云业务实时监控服务(ARMS)之前端监控如何优化日志上报前端监控 (又叫UEM,User Experience Management, 用户体 ...
前端监控和前端埋点方案设计--摘抄
一.为什么需要前端监控前端监控的目的是: 获取用户行为以及跟踪产品在用户端的使用情况,并以监控数据为基础,指明产品优化的方向 . 前端监控可以分为三类:数据监控.性能监控和异常监控.下面我们来一一的 ...
通用前端监控采集脚本
https://github.com/saijs/sai.js 概述整体上,前端监控包含很多方面,例如包括: JavaScript 异常监控敏感信息监控 DOM 合法性检查静态资源监控网站监控 ...
京东前端：PhantomJS 和NodeJS在网站前端监控平台的最佳实践
http://www.infoq.com/cn/articles/practise-of-phantomjs-and-nodejs-in-jingdong 1. 为什么需要一个前端监控系统通常在一个 ...
一文彻底搞懂前端监控等推荐
大家好,我是若川.话不多说,这一次花了几个小时精心为大家挑选了20余篇好文,供大家阅读学习.本文阅读技巧,先粗看标题,感兴趣可以都关注一波,一起共同进步. 前端点线面前端点线面百度前端研发工程师, ...

webfunny前端监控

介绍