当前位置：首页>前端>正文

前端用户体验监控什么时候开始的前端监控系统

前端2024-05-26 16:15:24

介绍

系统特点

Webfunny是一套完整的前端监控系统方案，只需要简单几步就可以将这套监控系统移植到你自己的服务器上。

Webfunny经压力测试，可以支持千万级别日PV量，能够满足更多用户的场景需求。

Webfunny是私有化部署，所有的日志数据都存在使用者的数据库中，没有任何数量限制，也不会依赖我们的任何服务

Webfunny提供了很多报警机制，使用者可以自己修改代码，决定报警时机。

功能列表

项目总览；监控系统支持多个项目，让所有项目的状态都一目了然。通过对线上项目的实时分析，让我们可以对线上状况有个非常直观的了解。例如PV、UV数据变化趋势，留存变化，页面停留时间，线上报错、异常等
用户细查；深入分析每一个用户，记录下每个用户的所有行为。由于线上用户的操作行为十分复杂，有些问题可能隐藏在很多次操作之后，所以探针记录了用户的很多操作行为，一旦出现问题，复现BUG也将变得非常简单。同时，可以使用多种检索条件进行搜索，提高查找效率。
自定义埋点；用户可以自定义埋点，webfunny会将其记录下来，并定时分析。同时可以对多个埋点步骤进行漏斗分析，可以清晰的看到步骤之间的转化率，留存率等等。
错误分析；精细化分析每一个报错问题，支持sourceMap源码定位。通过探针监控和上报线上环境的报错，以及一些自定义异常。我们对这些日志进行精确的分析，可以准确定位到代码的问题所在。同时能够看到每一个报错的变化趋势，也能够分析出用户在哪一步操作中发生了问题。
性能分析；分析页面和接口性能，加载耗时，成功率。探针对页面的加载性能进行分析，直观反映在报表之上。也对接口的性能进行了分析，如：耗时、成功率等。
无线调试功能；强大的调试功能，让你从繁杂的调试工具中解脱出来。无线调试功能可以让你随时线上用户，实时了解用户的行为、控制台打印信息、本地缓存信息等等。

部署

非容器化部署

一、安装node.js

要求：10.6.0及以上。

二、部署代码

下载代码
https://github.com/a597873885/webfunny_monitor.githttps://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',      // 日志上报域名 或IP
  localAssetsDomain: 'www.baidu.com:8010',      // 前端页面域名 或IP
  localServerPort: '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"];  #消息队列host
    this.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.xamrdz.com/web/2ua1962386.html

介绍