前端监控之资源加载异常

一、意义：
  资源加载异常将不能提供给正确资源给用户使用或阅读，比如重要的图片、错误的静态资源链接、网站执行的脚本等静态资源。有效的监听资源异常将提升网站的正常使用和展示。

二、捕获方法：

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, // 资源失败的地址

更快捷更准确接入前端监控