面试二面/三面涉及的知识——错误监控

错误监控

1.前端错误的分类

即时执行错误：代码错误

资源加载错误（js加载失败，css加载失败...）

 

2.错误捕获方式

即时执行错误捕获方法： 1）try...catch   2)window.onerror(他不能捕获资源加载错误)

资源加载错误捕获方法：

1）object.onerror   

2)performance.getEntries()（返回一个数组，这个数组里面就是成功加载的资源）  

如要找没有加载的图片img用：document.getElementsByTagName('img')得到的数组减去performance.getEntries()得到的数组。

3)Error事件捕获

window.addEventListener('error',function(e){
    console.log('捕获',e)
},true);

延伸：跨域的js运行错误可以捕获吗，错误提示是什么，应该怎么处理？

处理：1.在script标签增加crossorigin属性（前端）

            2.设置js资源响应头Access-Control-Allow-Origin:*（后端）

（加了这两个处理以后就可以拿到详细的信息了）

 

3.上报错误的基本原理

1）采用Ajax通信的方式上报（不用的）

2）利用Image对象上报（一定要答出来）

(new Image()).src = 'http://baidu.com/tesjk?r=tesjk';