错误捕捉及上报

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

做项目时经常会遇到各种各样的bug，很是头疼，要是在本地环境还好，可以慢慢调试，要是已经上线的项目，或者仅在用户手机上偶现那就头秃了。所以平时我们会使用一些错误捕获的方法，抛出错误类型，以帮助我们快速定位问题。

基本的错误类型

1. SyntaxError 语法错误。window.onerror捕获不到SyntxError，一般SyntaxError在构建阶段，甚至本地开发阶段就会被发现
2. TypeError
3. ReferenceError 引用错误
4. resourceError 资源加载错误
5. httpError http请求错误

如果进行捕获以及各种方法的优缺点

1. try/catch. 能捕获常规运行时错误，但语法错误和异步错误不行。
2. window.onerror.可以捕获常规运行错误，异步错误。但语法错误和资源错误不行。
3. window.addEventListener('error')。图片、script、css加载错误可以捕获。但不能捕获new Image.fetch错误。
4. promise.catch。
5. async错误，用try/catch。
6. import chunk错误，用 .catch 或者 try/catch。

小结：window.addEventListener("unhandledrejection") 全局统一处理Promise错误

7. vue错误，可以使用 Vue.config.errorHandler

/**
* 全局捕获Vue错误，直接扔出给onerror处理
*/
Vue.config.errorHandler = function (err) {
  setTimeout(() => {
    throw err
  })
}

数据上报

1、XMLHttpRequest

使用7️其send方法 发送post请求给服务端即可。但也会产生跨域，或者阻塞主业务，或者请求丢失的情况。

2、Image

创建一个1x1的image对象，使用image.src上传，轻量且可以解决跨域问题。其缺点是，image是get请求，大小会受到限制。

3、SendBeacon

可以完美解决 XMLHttpRequest 的缺点问题，唯一的缺点是IE不支持。

小结，数据上报可以优先选择 SendBeacon,不支持的浏览器如IE,可以降级使用Image上报，尽量避免使用XMLHttpRequest直接上报。

总结，有了以上错误收集的方法，大部分错误都能抛出并上报，不但可以有效帮助解决我们定位问题，也可以做数据分析。祝愿大家项目无bug。