HOW - Vue Error Catch 机制和错误拦截工具实现

在 Vue 项目中，我们可以使用 Vue 的错误处理机制来捕获并处理从上到下的错误。

一、app.config.errorHandler

1.1 基本介绍和使用

参考：https://cn.vuejs.org/api/application.html#app-config-errorhandler

interface AppConfig {
   
  errorHandler?: (
    err: unknown,
    instance: ComponentPublicInstance | null,
    // `info` 是一个 Vue 特定的错误信息
    // 例如：错误是在哪个生命周期的钩子上抛出的
    info: string
  ) => void
}
// 错误处理器接收三个参数：错误对象、触发该错误的组件实例和一个指出错误来源类型信息的字符串。
// app.config.errorHandler = (err, instance, info) => {}

• 作用范围： Vue 应用级别
• 触发时机： 当 Vue 应用内发生未被捕获的错误时，通过配置 errorHandler 可以进行捕获和处理
• 适用场景： 适用于捕获应用内部的 Vue 组件渲染、事件处理器、生命周期、侦听器、自定义指令钩子等场景发生的等错误

以下是一个示例：在 Vue 实例中设置一个全局的错误处理函数，这个函数将会捕获到应用程序中未被捕获的错误：

new Vue({
   
  el: '#app',
  router,
  store,
  render: h => h(App),
  errorHandler(err, vm, info) {
   
    console.error('Vue error:', err, info);
    // 可以在此处进行一些错误处理，比如发送错误日志到服务器
  }
});

1.2 全局错误拦截工具设计

在很多监控工具实现中，除了要收集资源信息，还要收集错误捕获。如何设计一个npm工具，使其能够在项目中捕获到Vue的全局错误处理（errorHandler）而不侵入业务代码？

1. Vue 插件

可以考虑创建一个Vue插件。下面是实现的步骤：

1. 创建一个Vue插件：创建一个Vue插件，该插件会自动安装并注册全局的错误处理函数。

2. 使用 Vue.mixin 注册全局 mixin：在插件中使用Vue.mixin来注册一个全局mixin，以便在每个Vue实例中都注入一个 errorHandler。

3. 捕获和处理错误：在全局 errorHandler 中捕获和处理错误。

下面是一个示例插件的实现：

// vue-error-catcher.js
const VueErrorCatcher = {
   
  install(Vue, options) {
   
    Vue.mixin({
   
      created() {
   
        const originalErrorHandler = this.$options.errorHandler;
        this.$options