前端捕捉错误方式

1、如何监控资源加载失败

方案一：script onerror

我们可以给 script 标签添加上 onerror 属性，这样在加载失败时触发事件回调，从而捕捉到异常。

1	<script onerror="onError(this)"></script>

并且，借助构建工具 ( 如 webpack 的 script-ext-html-webpack-plugin 插件) ，我们可以轻易地完成对所有 script 标签自动化注入 onerror 标签属性，不费吹灰之力。

new ScriptExtHtmlWebpackPlugin({     custom: {       test: /\.js$/,       attribute: 'onerror',       value: 'onError(this)'     } })

方案二：window.addEventListener

上述方案已然不错，但我们也试想是否可以减少 onerrror 标签大量注入呢？类比脚本错误 onerror 的全局监控方式（详见：脚本错误量极致优化-监控上报与 Script error），是否也可以通过 window.onerror 去全局监听加载失败呢？

答案否定的，因为 onerror 的事件并不会向上冒泡，window.onerror 接收不到加载失败的错误。冒泡虽不行，但捕获可以！我们可以通过捕获的方式全局监控加载失败的错误，虽然这也监控到了脚本错误，但通过 !(event instanceof ErrorEvent) 判断便可以筛选出加载失败的错误。

1 2 3 4 5

window.addEventListener('error', (event) => {   if (!(event instanceof ErrorEvent)) {     // todo   } }, true);

通过监控数据分析，我们发现现实情况不容乐观。访问页面时存在资源加载失败的情况超过了 10000 例/天，且随着页面访问量的上升而增加。

另外，监控资源加载失败的方式不止这些，上述两种方式都属于较好的方案，其他的方式就不再展开。

三、针对加载失败的文件进行重加载

替换域名动态重加载

只对加载失败的文件进行重加载。并且，为了防止域名劫持等导致加载失败的原因，对加载失败文件采用替换域名的方式进行重加载。替换域名的方式可以采用重试多个 cdn 域名，并最终重试到页面主域名的静态服务器上（主域名被劫持的可能性小）

 

最后兜底：意见反馈