前端监控系统之“理论篇”
- 编辑时间: 2019-03-05 20:11:44
- 浏览量:
- 作者:
相信前端开发的朋友们,都有类似的经历。项目上线后,突然有一天收到部门Boss的反馈消息。
Boss: 咦,小张呀!你看我们网站啊,有人反馈打开有点慢、打不开啊!你看下是怎么回事?
Me: 好的,我去查下原因。最后通过各种手段来检查,都没有发现什么问题(我这打开挺快的呀,cdn资源加载也正常、后端数据调用接口速度也ok...心想,应该是部分用户网络的原因造成的吧!)。然后屁颠、屁颠的跑去Boss办公室去汇报,Boss 我通过xx手段,看了下。没啥问题呀!应该是部分用户网络造成的吧!
上述的例子,我想大家都肯定遇到过。那么有没有什么好的办法去解决呢?或者说从被动变为主动,第一时间掌握我们网站的健康情况。
想必有经验的朋友,肯定会说:这还不简单,上监控啊。可是具体怎么去搭建一个前端监控系统呢?别急,听我一一道来:
一、JS SDK 设计
首先我们来试想一下,我们做的这个前端监控系统,希望它能解决什么样的痛点:
从前面我们了解到,网站的性能怎么样。不能单单是靠某种工具去检测,就能得出的结果。因为影响它的因素有很多(dns解析、网络、缓存...), 再者如果没有拿到实际用户访问的数据,去跟别人交谈,心里也是没有底气的。
一般我们会通过浏览器的performance对象,来上报我们需要统计的数据和关键性能指标。一般统计的指标有以下:
let timing = performance.timing
// DNS 解析耗时
timing.domainLookupEnd - timing.domainLookupStart
// TCP 连接耗时
timing.connectEnd - timing.connectStart
// SSL 安全连接耗时
timing.connectEnd - timing.secureConnectionStart
// 网络请求耗时
timing.responseStart - timing.requestStart
// 数据传输耗时
timing.responseEnd - timing.responseStart
// DOM 解析耗时
timing.domInteractive - timing.responseEnd
// 资源加载耗时
timing.loadEventStart - timing.domContentLoadedEventEnd
/* 关键性能指标 */
// 首包时间
timing.responseStart - timing.domainLookupStart
// 首次渲染时间 / 白屏时间
timing.responseEnd - timing.navigationStart
// 首次可交互时间
timing.domInteractive - timing.requestStart
// HTML 加载完成时间, 即 DOM Ready 时间
timing.domContentLoadedEventEnd - timing.navigationStart
// 页面完全加载时间
timing.loadEventStart - timing.navigationStart
2、错误监控
(1)js 运行时报错
为了更好的保证网站正常的运行,我们会通过window.onerror捕获,js具体的堆栈信息和错误行和列。一般我们的js都是打包压缩、混淆后上传到cdn的(无法定位到具体错误)。因此在打包时,同时生产.map文件,用sourcemap js库(nodejs)来还原具体错误信息。如下图(出自个人博客中的数据):
有种情况 因为跨域的原因,浏览器捕获到的错误信息,很可能是“Script error.”,无法知道具体的错误行和列。因此面对此情况,可以在script标签添加crossorigin="anonymous" 属性,同时通过cdn开启cors跨域,即可解决。
(2)资源加载出错
为了防止加载资源失败,而导致网站打不开。一般我们会通过 window.addEventListener('error') 对资源加载进行监控。
3、后端api接口监控
一般对于小公司而言,可能连后端都很少会有接口方面的监控。一旦出现问题,却又不好排查问题,因此我们可以通过对浏览器底层的xhr对象进行拦截,上报相关调用数据和接口耗时。一方面可以检测到接口的实时调用情况,同时也方便后期对接口的数据统计。
二、数据处理和展示
在设计完成sdk后,需要把数据进行统计分析和展示。因此我们用到 es(elasticsearch)来对数据进行实时查询和分析。可是怎么把数据推到es里面呢?这对于前端同学来说,这又是一个难点。别急,“logstash” 了解一下。logstash主要对数据进行采集、分析、过滤的工具,然后推送到es里面。数据既然有了,那么怎么展示呢?这时候 Kibana 出来了,来作为数据展示的承托。这就是后端开源届的日志分析系统“ELK”。
写在最后:本文只是阐述前端监控基本的一些理论方面的知识,没有涉及到具体实战环境。比如:sdk该如何设计、采用哪种方式上报比较好!数据处理部分应该注意那些点... 如果感兴趣的朋友,可以点击观看我的下篇文章“前端监控系统之实战篇”。
本文出自段亮个人博客,如需转载请注明出处
写文章不易,如果您觉得文章对你有帮助。
打赏激励下作者吧,谢谢支持! ~(@^_^@)~!
微信打赏
支付宝打赏