浅析前端异常埋点系统

在长期生产 bug 并修复 bug 的循环中，上线产品不可避免出现异常。如何能快速定位到发生错误的代码位置、第一时间通知开发人员异常发生以及报错的堆栈信息、用户OS与浏览器版本等十分重要。

而错误埋点追踪系统的出现就是为了应对上述问题的解决方案。

前端异常捕获

js 异常的特点是，出现不会导致 JS 引擎崩溃，最多只会终止当前执行的任务。在Javascript中，我们通常有以下两种异常捕获机制。

1. try…catch 语句能捕捉到的异常，必须是线程执行已经进入 try catch 但 try catch 未执行完的时候抛出来的，优点是能够较好地进行异常捕获，不至于使得页面由于一处错误挂掉，缺点是显得过于臃肿，大多代码使用try ... catch包裹，影响代码可读性。以下都是无法被捕获到的情形：

异步任务抛出的异常（执行时 try catch 已经从执行完了，比如 setTimeout）。promise，正常情况下异常被 promise 内部捕获到了，并未往上抛异常，使用 promise.catch() 处理或者 promise 前用 await 就可以被 try... catch 捕获了。语法错误（代码运行前，在编译时就检查出来了的错误）。

2. window.onerror 最大的好处就是同步任务、异步任务都可捕获，可以得到具体的异常信息、异常文件的URL、异常的行号与列号及异常的堆栈信息，捕获异常后，统一上报至我们的日志服务器，而且可以全局监听。缺点是跨域脚本无法准确捕获异常，跨域之后 window.onerror 捕获不到正确的异常信息，而是统一返回一个Script error，可通过在