前端错误捕获和上报

JS中常见的执行错误

日常执行中主要有：

• 同步错误、
• 语法错误、
• 普通异步任务错误、
• Promise任务错误、
• async任务错误5种常见的异常错误。

资源加载错误

主要有图片、script、css、font等资源的加载错误问题。

错误捕获：

 try... catch..

• 能捕获包裹体内的同步执行错误。

• 不能捕获语法错误。

• 不能捕获异步任务错误。

• 不能捕获Promise任务错误。

• 不能捕获资源加载错误。

window.onerror

需要额外注意：跨域脚本加载错误只有一个“Script error”，并不能获取到错误信息。可以通过在

基于上图结果，我们再小结一下window.onerror的处理能力：

• 能捕获所有同步执行错误。

• 不能捕获语法错误。

• 能捕获普通异步任务错误。

• 不能捕获Promise任务错误。

• 不能捕获async任务错误。

• 不能捕获资源加载错误。

window.addEventListener(‘error’)

 

window.addEventListener(‘unhandledrejection’)

 

 

那么我们观察这个表格，首先可以看到语法错误，4种方式都不能捕获，但是我们一般认为语法错误不应该在执行阶段才发现，在我们的编译以及测试环节就可以检查出，所以我们不考虑将其捕获。那么其他的异常错误我们发现通过 addEventListener('onerror') + addEventListener('unhandledrejection') 的方式恰好能够覆盖5种异常错误的捕获，一起来实现一下：

把Promise及async任务中的错误捕获后用同步的逻辑抛出即可让onerror准确捕获到。

如此，我们就可以将我们Web中大部分的异常问题进行准确捕获。

接下来我们看看如何将错误问题上报至我们的服务器进行汇总。

错误上报：

XMLHttpRequest

我们想要将数据传回服务器，最通用的方式当然就是ajax请求，通过浏览器的XMLHttpRequest（这里我们不讨论IE）的send方法，发送post请求数据给服务端，这里我们不再给出实现。

其缺点也很明显：

1. 有严格的跨域限制、携带cookie问题。

2. 上报请求可能会阻塞业务。

3. 请求容易丢失（被浏览器强制cancel）。

Image

由于浏览器对资源文件的区别对待，为了解决上面的几个问题，我们可以通过创建一个1x1大小的图片进行异步加载的方式来上报。图片天然可跨域，又能兼容所有的浏览器，而js和css等其他资源文件则可能出现安全拦截和跨域加载问题。

但由于是一个get请求，上报的数据量在不同的浏览器下上限不一致（2kb-8kb），这就可能出现超出长度限制而无法上报完整数据的情况。因此，图片上报也是一个“不安全”的方式。

SendBeacon

这个方法天生就是为了数据统计而设计的，它解决了XMLHttpRequest和图片上报的绝大部分弊端：没有跨域问题、不阻塞业务，甚至能在页面unload阶段继续发送数据，完美地解决了普通请求在unload阶段被cancel导致丢数据的问题，唯一的问题就是IE并不支持。

调用方式也非常简单，类似我们发送post请求：

这里需要注意的是，sendBeacon并不像XMLHttpRequest一样可以直接指定Content-Type，且不支持application/json等常见格式。data的数据类型必须是 ArrayBufferView 或 Blob, DOMString 或者 FormData 类型的。这里给出Blob类型的示例。

小结

基于以上3种上报方式，我们可以基本总结出，上报数据建议优先使用sendBeacon的方式，不支持的浏览器（例如IE）则降级使用图片上报，尽量避免直接使用XMLHttpRequest进行上报。