浅谈监控静态资源加载错误

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

正常情况下，html页面中主要包含的静态资源有：js、css、图片文件，这些文件加载失败将直接对页面造成影响甚至瘫痪，所有我们需要把他们统计出来。我们只统计资源加载出错的情况。

资源加载错误的捕获方法

资源加载错误通常是找不到文件或者是文件加载超时造成的。

• 回调方法onerror(Object.onerror)：该方法在静态资源跨域加载时是无法获取报错信息的。

var img=document.getElementById('#img');
img.onerror = function(e) {
// 捕获错误  
console.log(e);
}

• 利用performance.getEntries()方法：获取到所有加载成功的资源列表，在onload事件中遍历出所有页面资源集合，利用排除法，到所有集合中过滤掉成功的资源列表，即为加载失败的资源。 该方法看似合理，也确实能够排查出加载失败的静态资源，但是检查的时机很难掌握，另外，如果遇到异步加载的js也就没法处理了。

// 浏览器获取网页时，会对网页中每一个对象（脚本文件、样式表、图片文件等等）发出一个HTTP请求。而通过window.performance.getEntries方法，则可以以数组形式，返回这些请求的时间统计信息，每个数组成员均是一个PerformanceResourceTiming对象！

function performanceGetEntries(){
	// 判断浏览器是否支持
    if (!window.performance && !window.performance.getEntries) {
        return false;
    }
    var result = [];
    // 获取当前页面所有请求对应的PerformanceResourceTiming对象进行分析
    window.performance.getEntries().forEach((item) => {
        result.push({
            'url': item.name,
            'entryType': item.entryType,
            'type': item.initiatorType,
            'duration(ms)': item.duration
        });
    });
    // 控制台输出统计结果
    console.table(result); // 表示已经加载的资源

	//  然后把整个资源的数量减去已经加载好的资源，剩下的就是没有加载出来的资源的数量。
}

运行结果如下：

• 添加一个Listener(error)来捕获前端的异常：该方法是目前常用的方法，也是我目前使用的方法，比较靠谱，但是该方法会监控到很多的error, 所以我们要从中筛选出静态资源加载报错的error。具体实现如下：

/**
  * 监控页面静态资源加载报错
  */
 function loadResourceError() {
   window.addEventListener('error', function(e) {
   console.log(e, '错误捕获===');
   if(e){
     let target = e.target || e.srcElement;
     let isElementTarget = target instanceof HTMLElement;
     if (!isElementTarget) {
       // js错误
       console.log('js错误===');
       // js error处理
       let {filename, message, lineno, colno, error} = e;
       let { message: ErrorMsg, stack } = error;
     }else{
       // 页面静态资源加载错误处理
       console.log('资源加载错误===');
       let { type, timeStamp, target } = e;
       let { localName, outerHTML, tagName, src } = target;
       let typeName = target.localName;
       let sourceUrl = "";
       if (typeName === "link") {
         sourceUrl = target.href;
       } else if (typeName === "script") {
         sourceUrl = target.src;
       }
       alert('资源加载失败，请刷新页面或切换网络重试。('+sourceUrl+')')
     }
   }
 // 设为true表示捕获阶段调用，会在元素的onerror前调用,在window.addEventListener('error')后调用
 },true);
 }
 // 我们根据e.target的属性来判断它是link标签，还是script标签。目前只关注只监控了css，js文件加载错误的情况。

运行结果如下：

window.addEventListener(‘error’)与window.onerror的异同点在于：

1. 前者能够捕获到资源加载错误，后者不能。
2. 都能捕获js运行时错误，捕获到的错误参数不同。前者参数为一个event对象；后者为msg, url, lineNo, columnNo, error一系列参数。event对象中都含有后者参数的信息。

注意：

1. window上error事件代理，过滤window本身的error；根据标签类型判断资源类型，src或href为资源地址；为了捕获跨域js的错误，需要在相应资源标签上添加crossorigin属性。
2. addEventListener的第三个参数 一定要是true,表示在捕获阶段触发，如果改成false就是冒泡阶段，那是获取不到错误事件的。