前端性能监控系统 & 前端数据分析系统

罗曼特 2018-04-15 01:4626 阅读

前端监控系统 目前已经上线,欢迎使用!

背景:应工作要求,需要整理出前端项目的报错信息,尝试过很多统计工具,如: 腾讯bugly、听云、OneApm、还有一个忘记名字的工具。 因为各种原因,如: 统计的日志无法正确分类,收费太高,存储数量有限制等等,都放弃使用了。 后来,我说:“我们自己来分析吧”,后来,我就开发了这个系统。

既然要做,就要做的像样一点。

准备工作。


一、监控系统必须是独立出来的服务,这样才能够服务于多个前端项目。

①购买阿里云服务器(双核,4G内存,3M带宽)

②安装环境(node, nvm, pm2, JDK, Nginx, Tomcat, Mysql)

③部署项目(运行Jenkins服务,因为会经常更新代码,最好做自动化部署,节省很多力气)

④搭建Git服务(毕竟都买服务器了,能自己干的事就自己干吧,自己管理Git仓库吧)

⑤购买域名(阿里云上购买)

⑥购买安全证书(因为很多项目是支持https协议的,所以监控服务也必须支持https)


二、页面数据监控,要收集页面上的那些数据呢?我们先来搜集JS错误吧

①怎么搜集JS报错呢

     window.onerror = function(errorMsg, url, lineNumber, columnNumber, errorObj){ // 执行代码逻辑 }; 

这里有一点小问题,重写了window.onerror方法,确实能够捕获页面运行是的大部分错 误,但是在页面初始化时的报错是无法捕获的。

这时候我们需要重写一下console.error方法后,就可以搜集到页面更全面的报错信息,如下:

console.error = function () {
  // 处理报错的逻辑
  return oldError.apply(console, arguments);
};

②信息收集到了,怎么上报呢?

方案一: 发现一个错误,立马上报。

不好,因为上报太频繁了,前端请求次数太多,后台处理的压力也很大,这是我们不愿意见到的。

方案二: 发现一个错误,存起来,等存够一定的数量,再一起上报。 如果一直存不够数量,怎么办。 所以增加一个定时器保证报错信息一定会被上传上去。

上报方式呢, GET请求方式实在无法满足大数据量的上传,所以封装了一个简易的ajax,供监控代码上传数据使用

/**
 *
 * @param method  请求类型(大写)  GET/POST
 * @param url     请求URL
 * @param param   请求参数
 * @param successCallback  成功回调方法
 * @param failCallback   失败回调方法
 */
function monitor_ajax(method, url, param, successCallback, failCallback) {
  var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
  xmlHttp.open(method, url, true);
  xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      var res = JSON.parse(xmlHttp.responseText);
      typeof successCallback == 'function' && successCallback(res);
    } else {
      typeof failCallback == 'function' && failCallback();
    }
  };
  xmlHttp.send("data=" + JSON.stringify(param));
}

③代码写好了,怎么部署呀?

监控代码必须要优先加载,放在页面的顶部, 这样就可以优先重写onerror方法

<script type='text/javascript'>监控代码</script>

三、页面上的上报信息搜集到了,怎么存起来,怎么分析呢?

①搭建express后台服务(为什么一个前端工程师还要写后台)

node + express + easy_mysql + mysql

②开始撸接口

这里涉及统计日志的接口,需要在前端和后台功能处理高并发的情况,毕竟小小的服务器性能真的很有限。

也涉及分析日志的接口, 随着数据的不断增多, sql查询的方式必须得到优化,否则很影响加载效果。

③部署后台服务

建议安装pm2 ,而不是直接使用node server.js , 用pm2启动更稳定。


四、信息也监控了,也存储了,我怎么看到呢? oh my god ! 其实真想放弃了,一个监控系统居然要这么多东西

①需要一套管理系统的架子,我真的不想再自己设计了,否则我要吐了,还好,网上资源挺多,选了一个,经过一些列的裁剪和大动工,终于可以为我所用了

②既然到了面向用户的界面,就得考虑用户体验了,这个我不太想细说了,可以参考一下我的系统

数据概览​www.webfunny.cn


文章写得有点粗糙,其实,JS错误监控只是系统的一小部分。

其中包含了很多如:日活量、页面数据、接口请求,设备分析等等

我把这个系统发布出来,是希望得到更多的认可,也希望得到更多的意见和建议

谢谢阅读!

回复数量: 0
暂无评论~~
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!