一、意义:
资源加载异常将不能提供给正确资源给用户使用或阅读,比如重要的图片、错误的静态资源链接、网站执行的脚本等静态资源。有效的监听资源异常将提升网站的正常使用和展示。
二、捕获方法:
window.addEventListener('error', function (event) {
try {
const target = event.target || event.srcElement;
if (
target instanceof HTMLElement &&
['LINK', 'SCRIPT', 'IMG'].indexOf(target.nodeName) !== -1
) {
// 下载资源失败
// @ts-ignore
const src = target.src || target.href;
if (window.location.href.indexOf(src) !== 0) {
reportResourceFail({
detail: src
});
}
}
} catch (err) {
}
}, true);
代码中window.location.href.indexOf(src) !== 0的原因是当img标签为空时候,也会监听报错,所以排除掉。
只监听link标签、script标签、img标签资源加载失败。
三、上报参数:
当资源加载异常时,上报以下信息:
path: string // 页面url
detail: string, // 资源失败的地址
更快捷更准确接入前端监控