前端监控系统之“理论篇”

  • 编辑时间: 2019-03-05 20:11:44
  • 浏览量: loading...
  • 作者: 段亮

    相信前端开发的朋友们,都有类似的经历。项目上线后,突然有一天收到部门Boss的反馈消息。
    Boss: 咦,小张呀!你看我们网站啊,有人反馈打开有点慢、打不开啊!你看下是怎么回事?
    Me: 好的,我去查下原因。最后通过各种手段来检查,都没有发现什么问题(我这打开挺快的呀,cdn资源加载也正常、后端数据调用接口速度也ok...心想,应该是部分用户网络的原因造成的吧!)。然后屁颠、屁颠的跑去Boss办公室去汇报,Boss 我通过xx手段,看了下。没啥问题呀!应该是部分用户网络造成的吧!

    上述的例子,我想大家都肯定遇到过。那么有没有什么好的办法去解决呢?或者说从被动变为主动,第一时间掌握我们网站的健康情况。
    想必有经验的朋友,肯定会说:这还不简单,上监控啊。可是具体怎么去搭建一个前端监控系统呢?别急,听我一一道来:

    一、JS SDK 设计

        首先我们来试想一下,我们做的这个前端监控系统,希望它能解决什么样的痛点:


        1、页面性能监控
        从前面我们了解到,网站的性能怎么样。不能单单是靠某种工具去检测,就能得出的结果。因为影响它的因素有很多(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”。


                

        其实对于数据的展示,可以不用kibana或者其他开源的产品进行展示,也可以自己通过es的restful接口,来搭建数据展示(如上图)。整体架构如下图:

    


    写在最后:本文只是阐述前端监控基本的一些理论方面的知识,没有涉及到具体实战环境。比如:sdk该如何设计、采用哪种方式上报比较好!数据处理部分应该注意那些点... 如果感兴趣的朋友,可以点击观看我的下篇文章“前端监控系统之实战篇”


    本文出自段亮个人博客,如需转载请注明出处

    本文出处:https://www.duanliang920.com/learn/web/9153.html

写文章不易,如果您觉得文章对你有帮助。
打赏激励下作者吧,谢谢支持! ~(@^_^@)~!

微信打赏 微信打赏

支付宝打赏 支付宝打赏

表情
0 条评论 最热评论 最新评论
  • 亲,暂时没有评论哦!赶紧来留下你的脚印吧!

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客

最新推荐
loading... 数据加载中...

超低服务器价格,值得购买!