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

Posted 2020-10-31 一步一个脚印一个坑

前端监控系统 目前已经上线，欢迎使用！

背景：应工作要求，需要整理出前端项目的报错信息，尝试过很多统计工具，如： 腾讯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错误监控只是系统的一小部分。

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

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

谢谢阅读！