前端错误监控

什么是前端错误？

前端错误通常指的是如下两种状况：即时运行错误（代码错误）和资源加载错误。

捕获方式

即便运行错误捕获

一、try...catch方案：能够针对某个代码块使用try,catch包装，这个代码块运行时出错时能在catch块里边捕捉到。

二、window.onerror方案。

资源加载错误捕获

一、Object.onerror;

资源加载错误不会冒泡，因此window.onerror不能捕获资源加载错误。

二、performance.getEnteries();

获取到全部已加载资源的加载时长。能够间接的拿到没有加载的资源错误。

举个栗子：

遍历已成功加载的资源：

获取咱们所须要加载的全部图片：

所需加载的资源减去已加载的就能获取到加载失败的资源了。

3)Error事件捕获（冒泡不可）。

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

<!-- 一个不存在的资源 -->
<script src="//baidu.com/test.js"></script>

控制台打印出错误：

>>延伸：跨域的js运行错误捕获错误提示：

处理方法：

　　1.在script标签中增长crossorigin属性。
　　2.设置js资源响应头Access-Control-Allow-Origin.

上报错误的基本原理

1.采用Ajax通讯的方式上报（不推荐）。

2.利用Image对象上报。

比Ajax方式简单，不须要借助任何第三方库。

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