搭建前端监控系统（三）静态资源加载监控篇

　　怎样定位前端线上问题，一直以来，都是很头疼的问题，由于它发生于用户的一系列操做以后。错误的缘由可能源于机型，网络环境，接口请求，复杂的操做行为等等，在咱们想要去解决的时候很难复现出来，天然也就没法解决。 固然，这些问题并不是不能克服，让咱们来一块儿看看如何去监控并定位线上的问题吧。 

 

　　背景：市面上的前端监控系统有不少，功能齐全，种类繁多，无论你用或是不用，它都在那里，密密麻麻。每每我须要的功能都在别人家的监控系统里，手动无奈，罢了，怎么才能拥有一个私人定制的前端监控系统呢？作一个自带前端监控系统的前端工程狮是一种怎样的体验呢？

 

　　这是搭建前端监控系统的第三章，主要是介绍如何统计静态资源报错，跟着我一步步作，你也能搭建出一个属于本身的前端监控系统。

　　若是感受有帮助，或者有兴趣，请关注 or Star Me 。

 

　　请移步线上： 前端监控系统  

 

　　上一章介绍了如何作JS错误监控，还有一种错误是静态资源加载报错，不少时候资源加载报错对前端项目来讲是致命的，由于静态资源加载出错了，有可能就会致使前端页面没法渲染，用户就只能对着一个空白屏幕发呆，不知所措。由于忽然有一天，咱们的线上环境爆出了大量的白屏错误，通过很长时间的排查，终于定位到问题缘由：咱们使用的CDN路径不知道怎么的，把咱们的https协议所有指向了http协议，在安全协议下没法访问非安全协议的资源，致使了大量的白屏。因此我决定增长静态资源监控功能，以应对将来的未知状况。

那么，下边咱们就进入正题：

　　如何监控前端静态资源加载状况

　　正常状况下，html页面中主要包含的静态资源有：js文件、css文件、图片文件，这些文件加载失败将直接对页面形成影响甚至瘫痪，全部咱们须要把他们统计出来。我不太肯定是否须要把全部静态资源文件的加载信息都统计下来，既然加载成功了，页面正常了，应该就没有统计的必要了，因此咱们只统计加载出错的状况。

　　先说一下监控方法：

　　1）使用script标签的回调方法，在网络上搜索过，看到有人说能够用onerror方法监控报错的状况， 可是通过试验后，发现并无监控到报错状况，至少在静态资源跨域加载的时候是没法获取的。

　　2）利用 performance.getEntries()方法，获取到全部加载成功的资源列表，在onload事件中遍历出全部页面资源集合，利用排除法，到全部集合中过滤掉成功的资源列表，即为加载失败的资源。 此方法看似合理，也确实可以排查出加载失败的静态资源，可是检查的时机很难掌握，另外，若是遇到异步加载的js也就歇菜了。

　　3）添加一个Listener（error）来捕获前端的异常，也是我正在使用的方法，比较靠谱。可是这个方法会监控到不少的error, 因此咱们要从中筛选出静态资源加载报错的error, 代码以下：

/**
   * 监控页面静态资源加载报错
   */
  function recordResourceError() {
    // 当浏览器不支持 window.performance.getEntries 的时候，用下边这种方式
    window.addEventListener('error',function(e){
      var typeName = e.target.localName;
      var sourceUrl = "";
      if (typeName === "link") {
        sourceUrl = e.target.href;
      } else if (typeName === "script") {
        sourceUrl = e.target.src;
      }
      var resourceLoadInfo = new ResourceLoadInfo(RESOURCE_LOAD, sourceUrl, typeName, "0");
      resourceLoadInfo.handleLogInfo(RESOURCE_LOAD, resourceLoadInfo);
    }, true);
  }

　　咱们根据报错是的e.target的属性来判断它是link标签，仍是script标签。因为目前我关注对前端形成崩溃的错误，因此目前只监控了css，js文件加载错误的状况。

　　首先，咱们要作实时监控和预警，依然关联了7天之前同一时间端的数据，若是某个时间段出现错误量暴增，能够发出警告，及时制止。　　

      

 

　　而后，咱们还须要知道更多详细的信息，以下图。 不看不知道，一看吓一跳。虽然线上环境并无给咱们报出这么多的问题，可是能够看到，天天仍是有不少的静态资源加载报错，有些是很重要的静态资源文件，是必然会致使页面渲染失败的，因此必需要解决。

　　

　　解决方案：

　　① 统计出天天的量，列出天天加载报错的变化，点击图表的bar, 能够看到天天的数据变化，以做对比。

　　② 分析出静态资源加载出错主要发生在哪些页面上，缩小排查的范围。

　　③ 分析出影响用户的人数，也许不少错误就发生在一我的身上，减小盲目排查。

 

　　静态资源加载监控就完成了， 这里还有一些细节须要处理， 来帮助排查问题， 可是我一时半会儿也想不出来，暂时就说到这里吧。

 

　　上一章： 搭建前端监控系统（二）JS错误监控篇

　　下一章： 搭建前端监控系统（四）接口请求监控篇