前端监控之资源加载异常

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

二、捕获方法:

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容