前端错误监控

1. 前端错误的类型有哪些？如何捕获错误？

1.1 错误类型

1. 即时运行错误：也就是代码错误；
2. 资源加载错误：比如图片加载失败、JS加载失败、CSS加载失败等；

1.2 错误的捕获方式

1.2.1 运行错误的捕获方式（try catch）

try {
    var a = 1;
    var b = a + c;
} catch (e) {
    // 捕获处理
    console.log(e); // ReferenceError: c is not defined
}

1.2.2 window.onerror

[!NOTE] 只能捕获即时运行错误，不能捕获资源加载错误(原理：资源加载错误，并不会向上冒泡，object.onerror捕获后就会终止，所以window.onerror并不能捕获资源加载错误)；

相比try catch来说window.onerror提供了全局监听异常的功能：

window.onerror = function(errorMessage, scriptURI, lineNo, columnNo, error) {
    console.log('errorMessage: ' + errorMessage); // 异常信息
    console.log('scriptURI: ' + scriptURI); // 异常文件路径
    console.log('lineNo: ' + lineNo); // 异常行号
    console.log('columnNo: ' + columnNo); // 异常列号
    console.log('error: ' + error); // 异常堆栈信息
};

console.log(a);

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

1.2.3.1 object.onerror

img标签、script标签都可以添加onerror事件，用来捕获资源加载错误；

1.2.3.2 performance.getEntries

[!NOTE] 可以获取所有已加载资源的加载时间，通过这种方式，可以间接的拿到没有加载的资源错误。

1. 获取网站成功加载的资源数量信息：

performance.getEntries().forEach(
    function(item){
        console.log(item.name)
 })

1. 再输入document.getElementsByTagName('img')，就会显示出所有的img集合，这是所有需要加载的图片的集合；

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

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

1. 在script标签上增加crossorigin属性；
2. 设置js资源响应头Access-Control-Allow-Origin:*；

2. 上报错误的基本原理

1. 采用Ajax通信的方式上报；
2. 利用Image对象上报；(推荐的方式)