## 错误类型 1. 即时运行错误：也就是代码错误； 2. 资源加载错误：比如图片加载失败、JS加载失败、CSS加载失败等； ## 1.2 错误的捕获方式 ### 1 运行错误的捕获方式（try catch） ~~~ try { var a = 1; var b = a + c; } catch (e) { // 捕获处理 console.log(e); // ReferenceError: c is not defined } ~~~ ### 2. window.onerror >只能捕获即时运行错误，不能捕获资源加载错误(原理：资源加载错误，并不会向上冒泡，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); ~~~ ## 资源加载错误的捕获方式 - object.onerror img标签、script标签都可以添加onerror事件，用来捕获资源加载错误； - performance.getEntries >可以获取所有已加载资源的加载时间，通过这种方式，可以间接的拿到没有加载的资源错误。 1. 获取网站成功加载的资源数量信息： 2. 再输入document.getElementsByTagName('img')，就会显示出所有的img集合，这是所有需要加载的图片的集合； 3. document.getElementsByTagName('img')获取的资源数组减去通过performance.getEntries()获取的资源数组，剩下的就是没有成功加载的，这种方式可以间接的捕获到资源加载错误。 ~~~ performance.getEntries().forEach( function(item){ console.log(item.name) }) ~~~ >跨域js运行错误也是可以捕获到的，但是拿不到具体的信息，比如：出错行号、出错列号，错误详情等，这种问题应该怎么处理呢？ 1. 在script标签上增加crossorigin属性； 2. 设置js资源响应头Access-Control-Allow-Origin:\*； ## 上报错误的基本原理 1. 采用Ajax通信的方式上报； 2. 利用Image对象上报；(推荐的方式)