前端性能监控系统

  前端性能监控系统是一个开源的前端性能监控工具，它的主要功能就是监控前端页面的Ajax性能、资源加载性能、脚本错误等性能指标，该工具具有非常全面的前端性能指标采集和展示功能，是前端性能分析不可多得的工具。
  本文是 《前端性能监测工具》的后续文章，如需要了解什么是前端性能监测工具可移步该文章，本文主要介绍了前端性能监控系统的主要监控指标、系统搭建过程。

1 系统概述

  前端性能监控系统（web-performance-monitoring-system，后文简称WPMS）Fork代码的地址：https://github.com/wangweianger/web-performance-monitoring-system，是一款优秀的前端性能监控工具，主要功能包括：

• 实时统计访问页面真实性能分析
• 实时统计页面AJAX性能分析
• 实时统计访问页面脚本错误分析
• 实时统计页面所有资源加载性能分析
• 实时统计慢加载资源追踪
• 设置各项阀值，邮件通知，紧急修改维护
• 模拟单个http请求，并给出性能指标，可做接口测试
• 检查线上网页性能，给出详细性能指标

2 主要性能指标

  WPMS主要展示了12个性能指标。具体参数如表2.1。

表2.1 WPMS主要性能指标

指标名称	计算方法
平均加载耗时 (s)	loadEventEnd - navigationStart
平均白屏耗时(ms)	responseStart - navigationStart
平均资源加载耗时 (s)	一个页面内所有资源加载的平均时间
平均DOM构建耗时 (s)	domContentLoadedEventEnd - navigationStart
平均解析DOM耗时（s）	domComplete - domInteractive
平均DNS解析耗时（ms）	domainLookupEnd - domainLookupStart
平均TCP连接耗时（ms）	connectEnd - connectStart
平均页面重定向耗时（ms）	redirectEnd - redirectStart
平均unload耗时（ms）	unloadEventEnd - unloadEventStart
平均request请求耗时（ms）	responseEnd - requestStart
平均页面准备耗时（ms）	fetchStart - navigationStart

3 技术栈

  项目主要由Koa2 + Gulp + Mysql 搭建的一套后台前端集成模板，通过Gulp-nodemon实时编译刷新node服务，项目通过babel编译。
主要依赖组件版本如下：

表3.1 主要依赖组件版本

主要依赖组件名称	版本
Koa	2.2.0
Gulp	3.9.1
Node	8.11.2
Babel	6.24.1
Mysql	5.7.34

  项目中还依赖了第三方的ip地址查询服务，由于接口已经废弃，这里直接注释掉相应的代码，暂时不用通过ip查位置服务。

//function getUserIpMsg(){
//    return new Promise(function(resolve, reject) {
//        let ip = ctx.get("X-Real-IP") || ctx.get("X-Forwarded-For") || ctx.ip;
//        userSystemInfo.ip = ip;
//        axios.get(`http://ip.taobao.com/service/getIpInfo.php?ip=${ip}`).then(function (response) {
//            resolve(response.data)
//        }).catch(function (error) {
//            console.log(error)
//            resolve(null)
//        });
//    })
//}
//let datas = await getUserIpMsg();
//if(datas.code == 0) userSystemInfo = datas.data;
//IP = userSystemInfo.ip

4 安装环境

4.1 安装Node

  本项目需要node.js支持async await的语法因此node需要7.6版本以上，本文采用8.11.2。

• 下载官网Node到/opt/目录下（其他目录也可以）

cd /opt/
wget https://nodejs.org/dist/v8.11.2/node-v8.11.2-linux-x64.tar.xz

• 解压

tar -xvf node-v8.11.2-linux-x64.tar.xz

• 解压完成后，更改名字为node

mv node-v8.11.2-linux-x64 node

• 配置全局使用

ln -s /opt/node/bin/node /usr/local/bin/node
ln -s /opt/node/bin/npm /usr/local/bin/npm

• 验证安装

node -v

图4.1 node安装成功后版本信息

npm -v

图4.2 npm安装成功后版本信息

4.2 安装Mysql

• 下载并安装MySQL官方的 Yum Repository

wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm

• yum安装

yum -y install mysql57-community-release-el7-10.noarch.rpm

• 安装MySQL服务器

yum -y install mysql-community-server

• 启动MySql

systemctl start mysqld.service

• 查看MySQL运行状态，如果为active状态，则安装成功，否则根据报错查找原因。

systemctl status mysqld.service

图4.3 MySQL运行状态

• 修改默认字符集和默认排序规则

vim /etc/my.cnf

• 修改以下内容

[mysqld]    
character-set-server = utf8mb4   #默认字符集
collation-server = utf8mb4_bin   #默认排序规则

• 重启Mysql

systemctl restart mysqld.service

• 查看root用户的密码
  安装后没有设置root密码，可以通过如下命令查看临时密码。

grep "password" /var/log/mysqld.log

图4.4 root的临时密码

• 以root用户登录数据库

mysql -uroot -p

• 修改root密码

alter user 'root'@'localhost' identified by 'Pwd125=!';

• 验证修改

mysql> show variables like 'character%';

图4.5 默认字符集

mysql> show variables like 'character%';

图4.6 默认排序规则

5 导入样例数据到Mysql

• 选择数据库

mysql> show databases;

图5.1 数据库列表

mysql> use mysql;

• 查询语句查询到的所有mysql的user和host信息

mysql> select user,authentication_string,host from user;

图5.2 mysql的user和host信息

• 导入样例数据

mysql> source /home/devs/Repository/web-performance-monitoring-system/web-performance.sql

图5.3 导入成功

6 后端配置

  修改项目的配置文件，即：src/config.js 中的 DB 配置

export let DB = {
	// 服务器地址
	HOST: 'localhost',

	// 数据库端口号     
	PROT: 3306,

	// 数据库用户名              
	USER: 'root',

	// 数据库密码    
	PASSWORD: 'Pwd125=!',

	// 数据库名称    
	DATABASE: 'mysql',

	// 默认"api_"
	PREFIX: 'web_',

	// 是否等待链接
	WAITFORCONNECTIONS: true,

	// 连接池数量
	POOLLIMIT: 20,

	// 排队限制数量
	QUEUELIMIT: 5,
}

7 运行项目

• 在项目目录下运行npm包安装命令

npm install

• 运行启动命令

npm run dev

• 浏览器打开页面
  http://127.0.0.1:18088/

图6.1 登录界面

• 登录
    项目提供了一个默认用户账号为：zane 密码：123456
    登录之后可以查看样例数据。也创建应用，创建探针，埋点，配置代理进行实际监控，具体步骤限于篇幅就不详细叙述了，感兴趣的话可以私信。

图6.2 详情界面

参考资料

[1] CentOS7安装Nodejs-v8.11.1
[2] CentOS7安装MySQL 5.7.34
[3] centos mysql修改默认字符集为utf8mb4