标签：cal ros 启动 小问题 目的 form ram 监控服务 管理系
前端监控系统 目前已经上线，欢迎使用！
背景：应工作要求，需要整理出前端项目的报错信息，尝试过很多统计工具，如： 腾讯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 ! 其实真想放弃了，一个监控系统居然要这么多东西
①需要一套管理系统的架子，我真的不想再自己设计了，否则我要吐了，还好，网上资源挺多，选了一个，经过一些列的裁剪和大动工，终于可以为我所用了
②既然到了面向用户的界面，就得考虑用户体验了，这个我不太想细说了，可以参考一下我的系统
文章写得有点粗糙，其实，JS错误监控只是系统的一小部分。
其中包含了很多如：日活量、页面数据、接口请求，设备分析等等
我把这个系统发布出来，是希望得到更多的认可，也希望得到更多的意见和建议
谢谢阅读！
标签：cal ros 启动 小问题 目的 form ram 监控服务 管理系
原文地址：https://www.cnblogs.com/warm-stranger/p/8837784.html
