错误监控

前端错误的分类

即时运行错误：代码错误

资源加载错误

错误的捕获方式

即时运行错误：代码错误捕获

1.try...catch(e){console.log();}

2.window.onerror = function(e){console.log(e)}

window.addEventListener("error",function(){},false);

资源加载错误(window不能通过冒泡捕获到，但可以通过捕获阶段捕获)

1.object.onerror

如图片、script标签的onerror事件

2.performance.getEntries()

高级浏览器会有performance对象，获取所有已加载资源的加载时长

//获取所有已经加载的资源
performance.getEntries().forEach(item=>{

    console.log(item.name);
})

//获取所有需要加载的图片
var imgs = document.getElementsByTagName("img");

//两者相减，就能得到没有加载的资源

 3.error事件捕获

<script type="text/javascript">
        //切记第三个参数为true，进行事件捕获
        window.addEventListener("error",function(e){
        	console.log("捕获：",e)
    	},true)
</script>
<script src="//baidu.com/test.js" charset="utf-8"></script>

4.延伸：跨域的JS运行错误可以捕获吗？错误提示什么，应该怎么捕获？

客户端在script标签加crossorigin属性
服务端设置js资源响应头Access-Control-Allow-Origin:*
就可以拿到具体的信息了

上报错误的基本原理

采用Ajax通信的方式上报

利用image对象上报

//就可以发送一个请求了
(new Image()).src = "http://baidu.com/test?foo=1";