hugh 的个人博客

Everyday is a new day

收集资源加载错误

资源加载错误通常是由于客户侧网络原因或者服务器上某个资源在特定时刻无法访问导致, 在开发测试阶段通常无法发现, 这时候监控的重要性就凸显了

资源类型

JS 文件、CSS 文件、图片、视频等静态媒体资源。

如何监控

前面我们有写js错误监控, 资源监控的思路是一样的

window.addEventListener('error', wrapError, true);
  1. 为什么在js监控时使用window.onerror,而资源监控使用window.addEventListener?

主流浏览器 两者都可以取到 error 的详情和堆栈,但是错误监控作为一个基础功能,应该兼容到更多的浏览器,所以使用 window.onerror:
onerror: ie9+ caniuse
errorEvent: ie11+ caniuse
但是 window.onerror 无法获取到资源错误的情况,所以资源使用 addEventListener

  1. 为什么需要注册在捕获阶段

资源的错误,默认情况下是不会冒泡到顶层的。 所以需要使用指定为捕获的方式来优先处理

  1. wrapError做些什么

需要在wrapError中正确区分出资源错误, 如何执行上报流程

function wrapError(event){
	let e = event || window.event || {}
	let target  = e.target
	if(!target.src || !target.tagName){
		return;
	}
	if(target.src === window.location.href){
		return;	
	}
	// 上报对于的事件
	report(src, tagName)
}

标题:收集资源加载错误
作者:hugh0524
地址:https://blog.uproject.cn/articles/2020/06/29/1593436739864.html

0 浏览