监控静态资源加载

监控静态资源加载

引用大神的一段话来描述下背景：

怎样定位前端线上问题，一直以来，都是很头疼的问题，因为它发生于用户的一系列操作之后。错误的原因可能源于机型，网络环境，接口请求，复杂的操作行为等等，在我们想要去解决的时候很难复现出来，自然也就无法解决。

使用error事件来监听静态资源的加载情况

	window.addEventListener('error', function(err){
		err.stopImmediatePropagation();//如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。如果其中某个监听函数执行了 event.stopImmediatePropagation() 方法，则当前元素剩下的监听函数将不会被执行。
		console.log(err)
	},true)//一定要在捕获阶段执行，冒泡阶段部分情况捕捉不到

当在冒泡阶段捕获时test，图中有四个错误，分别用箭头标注：


结果只捕捉到了script标签中的语法错误，并没有捕捉到静态资源404错误。
那在捕获阶段来测试下，也就是把 addEventListener 后面的第三个参数设置为true；