前端错误监控原理与实战

本文将从如下几点来分析前端错误监控的相关知识点：

一、前端错误的分类；

二、错误的捕获方式；

三、上报错误的基本原理。

 

1、前端错误的分类：

　　包括两种：

　　一、即时运行错误：也就是代码错误；

　　二、资源加载错误：好比图片加载失败、JS加载失败、CSS加载失败等；

2、错误的捕获方式：

　　即时运行错误的捕获方式：

　　一、try...catch

　　二、window.onerror：只能捕获即时运行错误，不能捕获资源加载错误(原理：资源加载错误，并不会向上冒泡，object.onerror捕获后就会终止，因此window.onerror并不能捕获资源加载错误)；

　　资源加载错误的捕获方式：

　　一、object.onerror：img标签、script标签均可以添加onerror事件，用来捕获资源加载错误；

　　二、performance.getEntries：能够获取全部已加载资源的加载时间，经过这种方式，能够间接的拿到没有加载的资源错误。

　　　　举例：

　　　　浏览器打开一个网站，在Console控制台下，输入：performance.getEntries().forEach(function(item){console.log(item.name)})，显示出来的资源就是已经成功加载的；

　　　　再输入document.getElementsByTagName('img')，就会显示出全部的img集合，这是全部须要加载的图片的集合；

　　　　document.getElementsByTagName('img')获取的资源数组减去经过performance.getEntries()获取的资源数组，剩下的就是没有成功加载的，这种方式能够间接的捕获到资源加载错误。

　　　　请看下图：

 

 

　　三、Error事件捕获

　　资源加载错误，虽然会阻止冒泡，可是不会阻止捕获。

　　示例：

　　

 

 

　　延伸问题：跨域js运行错误能够捕获吗？错误提示是什么？应该怎么处理呢？

　　跨域js运行错误也是能够捕获到的，可是拿不到具体的信息，好比：出错行号、出错列号，错误详情等，这种问题应该怎么处理呢？

　　分两步：

　　1.在script标签上增长crossorigin属性；

　　2.设置js资源响应头Access-Control-Allow-Origin:*；

 

3、上报错误的基本原理

　　1.采用Ajax通讯的方式上报；

　　2.利用Image对象上报；(推荐的方式)

　　如何利用Image对象上报呢？

　　只须要动态建立一个Image对象便可

　　

　　经过network能够看到请求已经发出了