一个简单的前端可视化监控系统

上善若水山西太原

 关注

阅读 173

2022-11-16

背景

首先我们为什么要做前端系统呢，先看下面这张表，可以很显然的看出，前端的性能对于产品的价值提升还是蛮有帮助的，但是这些信息如果我们能实时的采集到，并且实施以监控，让整个产品在产品线上一直保持高效的运作，这才是我们的目的。

性能

收益

Google 延迟 400ms

搜索量下降 0.59%

Bing 延迟 2s

收入下降 4.3%

Yahoo 延迟 400ms

流量下降 5-9%

Mozilla 页面打开减少 2.2s

下载量提升 15.4%

Netflix 开启 Gzip

性能提升 13.25% 带宽减少50%

其次，也有利于我们发布的产品，能够及时发现我们的错误。如果一个产品在新的迭代中，发生不可描述的错误。

开始

以上是我们需要做的一些事情。

要做监控系统，首先我们得有一个对象。我们监控的对象！对象！对象！对象。

我在我的系统写了一个这样的页面，

<body>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div> 
</body>

没错这就是我们要监控的页面。这个.....真不是我懒。

然后接下来我一共设计了3块数据

  • 页面加载时间
  • 统计用户使用设备
  • 错误量的统计

页面加载时间

window.logInfo = {};  //统计页面加载时间
window.logInfo.openTime = performance.timing.navigationStart;
window.logInfo.whiteScreenTime = +new Date() - window.logInfo.openTime;
document.addEventListener('DOMContentLoaded',function (event) {
window.logInfo.readyTime = +new Date() - window.logInfo.openTime;
});
window.onload = function () {
window.logInfo.allloadTime = +new Date() - window.logInfo.openTime;
window.logInfo.nowTime = new Date().getTime();
var timname = {
whiteScreenTime: '白屏时间',
readyTime: '用户可操作时间',
allloadTime: '总下载时间',
mobile: '使用设备',
nowTime: '时间',
};
var logStr = '';
for (var i in timname) {
console.warn(timname[i] + ':' + window.logInfo[i] + 'ms');
if (i === 'mobile') {
logStr += '&' + i + '=' + window.logInfo[i];
} else {
logStr += '&' + i + '=' + window.logInfo[i];
}
 
}
(new Image()).src = '/action?' + logStr;
};

统计用户使用设备

window.logInfo.mobile = mobileType();
function mobileType() {
var u = navigator.userAgent, app = navigator.appVersion;
var type =  {// 移动终端浏览器版本信息
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
iPad: u.indexOf('iPad') > -1, //是否iPad
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile/i) || !!u.match(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/), //是否为移动终端
webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
};
var lists = Object.keys(type);
for(var i = 0; i < lists.length; i++) {
if(type[lists[i]]) {
return lists[i];
}
} 
}

错误量的统计

window.onload = function () {
window.logInfo.allloadTime = +new Date() - window.logInfo.openTime;
window.logInfo.nowTime = new Date().getTime();
var timname = {
whiteScreenTime: '白屏时间',
readyTime: '用户可操作时间',
allloadTime: '总下载时间',
mobile: '使用设备',
nowTime: '时间',
};
var logStr = '';
for (var i in timname) {
console.warn(timname[i] + ':' + window.logInfo[i] + 'ms');
if (i === 'mobile') {
logStr += '&' + i + '=' + window.logInfo[i];
} else {
logStr += '&' + i + '=' + window.logInfo[i];
}
 
}
(new Image()).src = '/action?' + logStr;
};
 
var defaults = {
msg:'',  // 错误的具体信息
url:'',  // 错误所在的url
line:'', // 错误所在的行
col:'',  // 错误所在的列
nowTime: '',// 时间
};
window.onerror = function(msg,url,line,col,error) {
col = col || (window.event && window.event.errorCharacter) || 0;
 
defaults.url = url;
defaults.line = line;
defaults.col =  col;
defaults.nowTime = new Date().getTime();
 
if (error && error.stack){
// 如果浏览器有堆栈信息，直接使用
defaults.msg = error.stack.toString();
 
}else if (arguments.callee){
// 尝试通过callee拿堆栈信息
var ext = [];
var fn = arguments.callee.caller;
var floor = 3; 
while (fn && (--floor>0)) {
ext.push(fn.toString());
if (fn  === fn.caller) {
break;
}
fn = fn.caller;
}
ext = ext.join(",");
defaults.msg = error.stack.toString();
}
var str = ''
for(var i in defaults) {
// console.log(i,defaults[i]);
if(defaults[i] === null || defaults[i] === undefined) {
defaults[i] = 'null';
}
str += '&'+ i + '=' + defaults[i].toString();
}
srt = str.replace('&', '').replace('\n','').replace(/\s/g, '');
(new Image()).src = '/error?' + srt;
}

以上就是收集数据的全部，通过发送/action请求或者是/error请求，这些都是可以自定义的，我讲的只是整个过程是如何实现的。

然后通过我的的一个后台express.js把所有的请求处理并都记录下来，记录好后的数据是这样子的。


​​user_ip=​​​​127.0​​​​.​​​​0.1​​​​&whiteScreenTime=​​​​185​​​​&readyTime=​​​​192​​​​&allloadTime=​​​​208​​​​&mobile=webKit&nowTime=​​​​1513071388941​​


数据处理

这里我是通过自己写的一段脚本进行解析，parse.js，这里不具体讲解，看源码即可。我展现下解析好的数据。

我以cvs的数据格式储存，因为后面图表的需要，我也支持json格式方式导出，只不过后面就需要你自己来配置可视化的界面了。

数据是这样的。

charts/csvData/2017-12-16time.csv

时间,白屏时间,用户可操作时间,总下载时间
1513427051482,137,137,153
1513427065080,470,471,507
1513427080040,127,127,143
1513428714345,274,275,323
1513428733583,267,268,317
1513428743167,268,268,317
1513428754796,276,276,328

数据展示

这里我用的是​​highcharts.js​​

具体的配置我不进行讲解，可以自己到官网进行查看。

下面是可视化的图表，显示的是每天各个时间段的信息。

环境

node >= 6.0.0

redis >= 2.6.0

在这里我说明下，因为如果这个部署在线上环境的时候，如果每次记录都进行记录的话，会消耗大量的内存，所以我架设了一层redis，为了防止大流量的冲击，然后可以每隔一段时间进行存储。

const express = require('express');
const performance = require('./lib/performance.js');
const app = express();
const router = express.Router();
router.get('/', function (req, res, next) {
req.url = './index.html';
next();
});
app.use(router);
app.use(performance({
time: 10, // 秒为单位
originalDir: './originalData', // 数据的目录
errorDir: './errorData' // 报错的目录
}))
app.use(express.static('./'));
const server = app.listen(3000)

这里可以设置默认的时间，我这里以10秒为单位,为了demo的效果起见。一般我采用的是一分钟进行一次存储。

 


 



相关推荐

从零开始部署一个可视化系统

zibianqu 86 0 0

可视化监控大型集群，这一个工具就够了！

登高且赋 35 0 0

利用python写一个可视化的界面

鱼板番茄 31 0 0

可视化_一个图中绘制多个直方图

zhaoxj0217 170 0 0

基于VUE + Echarts 实现可视化数据大屏监控系统可视化

Separes 167 0 0

可视化数据分析(二) 一个简单的柱状图的实现

绪风 34 0 0

python 前端可视化

幸甚至哉歌以咏志 67 0 0

Grafana监控数据可视化

Go_Viola 10 0 0

jvm可视化监控搭建

代码小姐 119 0 0

Prometheus - grafana - 监控 nginx - grafana可视化 - 可视化Histogram

小北的爹 109 0 0

精彩评论（0）

0 0 举报