前端错误处理、vue项目错误处理(异常采集、捕获、收集)

公司项目需要做错误采集，平时都是谷歌控制台调试查看错误的，那有什么办法可以收集到这些错误信息保存在数据库中呢，此时，压力来到了我这。。。

首先来看看都有哪些捕获异常的方式：

同步异常：

try/catch：任务流方式
window.onerror：全局对象监听错误回调方式
element.onerror：部分元素错误回调方式
Vue.config.errorHandler：vue全局组件异常
errorCaptured：vue组件异常生命周期钩子函数

异步异常：

window.onerror：全局对象监听
Promise.catch：promise对象自带异常处理
window.onunhandledrejection：全局对象监听未处理的promise异常

实例演示

try/catch方式：

这种方式我们一般用来在预先知道哪段代码会出现异常然后我们将这段代码用try包起来用catch捕获其出现的异常。

先来看看处理同步异常

可以看到，try/catch可以正常捕获同步异常，接下来我们看看异步异常是否能被try/catch捕获

可以看到，无论是否定时器的异步异常还是promise的异步异常，使用try/catch都无法正常捕获。但是，其实对于promise异常来说，try/catch方式可以使用async/await来进行异常捕获的。

其具体原理可以参考博客 https://blog.csdn.net/qq_43497320/article/details/122675328

window.onerror方式

window.onerror是全局对象的一个事件监听处理函数，javascript产生的语法错误及运行错误可以触发error事件被window.onerror处理函数处理。

可以看到，window.onerror可以捕获同步异常和定时器异步异常，不能捕获promise异步异常。另外在vue项目中，如果同步异常出现在vue组件中，window.onerror是捕获不到的，不过在vue组件中的定时器异步异常还是可以通过window.onerror捕获到

首先mian.js设置window.onerror监听器

然后在home.vue组件中分别测试同步异常和定时器异步异常

element.onerror方式

在部分元素例如 img、script等标签加载失败的时候会触发该元素对象的error事件，设置该元素 element.onerror的监听程序可以捕获到这类异常，注意：这种异常不会冒泡到全局，所以window.onerror是监听不到的。

对于vue组件中的同步异常我们的全局的window.onerror捕获不到怎么办呢? 这时就得使用vue提供的 Vue.config.errorHandler 组件全局异常和 errorCaptured 生命周期钩子函数了

Vue.config.errorHandler 方式

由于vue中同步异常被内部的errorHandler捕获了，所以我们的window.onerror捕获不到，所以我们要想捕获vue组件中出现的同步异常，得从errorHandler中来捕获

首先main.js配置Vue.config.errorHandler

接着在home.vue组件中测试同步异常，然后该异常被Vue.config.errorHandler成功捕获

errorCaptured 方式

errorCaptured是vue组件中的生命周期的钩子函数，用于捕获当前组件及其后代组件产生的错误，如果该钩子函数返回false将会阻止error上传，也就是说，一个父子组件都定义了errorCaptured钩子函数，在该函数都没有返回false的情况下，如果子组件出现了异常（注意：不会调用发生异常组件的errorCaptured），父组件的errorCaptured => Vue.config.errorHandler都能依次捕获到异常。但如果有其中的errorCaptured返回false，则该异常不会再往上传输。接下来实例看看吧！

home.vue为父组件，helloworld.vue为子组件，其中同步异常发生在子组件中