前端错误的分类
即时运行错误:代码错误
资源加载错误
错误的捕获方式
即时运行错误:代码错误捕获
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";
博客聚焦前端错误,介绍了即时运行错误(代码错误)和资源加载错误两类。阐述了错误捕获方式,如即时运行错误用try...catch、window.onerror等,资源加载错误可通过object.onerror等捕获。还说明了上报错误的基本原理,包括采用Ajax通信和利用image对象上报。

被折叠的 条评论
为什么被折叠?



