监控系统首页

静态资源加载失败导致的问题

静态资源加载失败的时候，会有哪些问题会出现呢。资源加载失败会直接造成白屏、页面渲染不全、页面卡死、样式错乱、图片无法显示等等。而且这些都是很难复现的错误，那么这时候就会有小伙伴得意地说 “你不能复现，我就无法解决啊”，留下测试的小伙伴在那里一脸懵逼。嗯，真是甩的一口好锅，当然，这也不一定就是你的锅。

资源加载失败的问题解决难度大

静态资源加载错误，对有些前端小伙伴来说可能还是有些陌生的。因为这个问题大部分出现在线上环境，本地环境也会出现，只不过你的网络一般比较好，没事再来个强制刷新，基本上就解决了。所以你可能不会注意到这个问题。它不易发生，也不易发现，一旦发生，页面应该就直接歇菜了。由于这种问题经常发生在生产环境，很难被大家注意到，被发现了之后也不容易复现，所以无形中就增加了它的解决难度

资源加载失败的情况有哪些

举一个比较常见的例子：大家应该都用过Jquery.js（下面简称Jq），他们的官网上也提供了一个CDN的地址，专门供用户使用的。可是用过的小伙伴应该都知道，加了他们的CDN以后，整个项目都不好了，慢，但是慢得很特别，也就是特别的慢 。为啥啊？因为你既然是基于Jq，那你就得等人家加载完啊，要是你的网络再差点，就有可能出现静态资源加载失败的情况，那么你的页面基本上就很难呈现给用户了，我相信用过的小伙伴都会有过这种感觉。

还有一些比较常见的问题：比如阿里云的CDN、微信的SDK、等等一些依赖第三方js的情况下都会出现。什么？你没遇到过？你没监控过，又怎么会遇到呢。

本文由 前端监控提供；只需要简单几步就可以搭建一套属于自己的前端监控系统，快来试试吧（记得收藏哦）。

哈哈，扯了这么多，进入正题吧，先看看我们监控的效果。

静态资源监控总览

虽然静态资源加载失败的时候会造成如此严重的问题，但是我们却没有一个特别好用的API来帮我们捕获这种错误，手动表示一下无奈。 ╮(╯▽╰)╭

方法一：Object.onerror定义指定对象资源加载错误时的回调函数，说实话，不好用，因为太麻烦了。

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

方法三：通过window.addEventListener来实现，这个方法会监控到很多的error, 所以我们要从中筛选出静态资源加载报错的error, 代码如下：

window.addEventListener('error',function(e){    // 你的逻辑代码 }, true);

实时报错趋势和评分

首先，我们需要有个报错趋势总览的功能，报错趋势图中添加了对7天前，同一时间段的数据做了对比，可以作为参考。另外，我们还需要一个警报系统，这样，我们就能够实时掌握线上项目的健康状况了。最后，我加了评分功能，辅助我们对项目健康状况的判断。

静态资源加载失败的分类聚合

分类聚合的结果

其实静态资源析到这里，基本上也就完结了。因为静态资源加载不出来一般都是第三方，运营商和网络的问题，这些都是非我们力所能及的因素，失败就是失败，没必要分析个所以然出来了。

解决方案

如果是第三方服务商（比如CDN），那你需要想个办法在两个CDN之间做灵活切换，或者加上你们自己的服务器做三方切换，提高容错率。

如果是网络问题，就只能提示用户去网络好点的地方了，既然能监控，那提示的时机也就容易掌握了。

如果是运营商的问题，(⊙o⊙)…，啊... 嗯...