深入分析 Vue 错误处理机制，包括 `errorHandler` 配置和组件内 `errorCaptured` 钩子的源码实现。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好！今天咱们来聊聊Vue的错误处理机制，这玩意儿就像给代码穿了个保险套，防止程序“意外怀孕”（崩溃）。我们会深入探讨errorHandler全局配置和组件内的errorCaptured钩子，还会扒一下它们的源码，看看Vue是怎么“抓捕”这些错误小贼的。

Error Handling in Vue：一场“抓小偷”行动

想象一下，你的Vue应用是一个繁华的城市，各种组件就像城市里的居民。城市运行总会遇到点问题，比如居民（组件）突然犯了个错（抛出异常），这时候就需要一个“警察局”来处理这些错误，防止整个城市瘫痪。

Vue的错误处理机制就是这个“警察局”，它主要通过两个机制来工作：

全局警察局（Global Error Handler）： errorHandler配置，负责处理全局范围内的错误，就像是总警局，处理那些没有被特定社区（组件）处理的案件。
社区警局（Component Error Handler）： errorCaptured钩子，每个组件都可以配置，就像是社区警局，优先处理自己辖区内的案件。

第一部分：全局警察局 errorHandler

errorHandler是Vue的全局配置选项，用于指定处理未捕获错误的函数。它就像一个全局的错误事件监听器，任何组件抛出的未被errorCaptured捕获的错误都会被传递到这里。

如何使用 errorHandler：

你可以通过Vue.config.errorHandler来设置全局错误处理函数。

Vue.config.errorHandler = function (err, vm, info) {
  // 处理错误
  console.error('Global Error Handler:', err);
  console.warn('Component:', vm); // 指向发生错误的组件实例
  console.warn('Info:', info); // Vue 特定的错误信息，例如哪个生命周期钩子抛出的错误
}

参数说明：

参数	类型	描述
`err`	`Error`	错误对象。
`vm`	`Vue instance`	发生错误的组件实例。
`info`	`string`	Vue 特定的错误信息，例如错误发生在哪个生命周期钩子中 (如：’render’, ‘watcher’, ‘directive:my-directive’)。

举个栗子：

假设你的一个组件里，有一个函数会抛出错误。

<template>
  <div>
    <button @click="throwError">抛出一个错误</button>
  </div>
</template>

<script>
export default {
  methods: {
    throwError() {
      throw new Error('我是故意抛出的错误！');
    }
  }
}
</script>

如果没有errorCaptured，这个错误就会被errorHandler捕获。在控制台你会看到类似这样的输出：

Global Error Handler: Error: 我是故意抛出的错误！
Component: VueComponent {…}
Info: invoker

源码剖析：errorHandler 是如何工作的？

errorHandler的实现非常简单，它只是一个全局变量，用于存储错误处理函数。当Vue内部发生错误时，会调用这个函数。

在Vue的源码中，错误处理通常发生在callWithErrorHandling函数中。这个函数会尝试执行一个函数，如果发生错误，则会调用handleError函数。

function callWithErrorHandling(fn, instance, type, args) {
  let res
  try {
    res = args ? fn.apply(instance, args) : fn.call(instance)
    if (res && typeof res.then === 'function') {
      // 处理 Promise 错误
      return res.catch(e => {
        handleError(e, instance, type)
      })
    }
  } catch (e) {
    handleError(e, instance, type)
  }
  return res
}

function handleError(err, vm, info) {
  if (vm) {
    let cur = vm
    while ((cur = cur.$parent)) {
      const hook = cur.$options.errorCaptured
      if (hook) {
        for (let i = 0; i < hook.length; i++) {
          try {
            const capture = hook[i].call(cur, err, vm, info) === false
            if (capture) return
          } catch (e) {
            globalHandleError(e, cur, 'errorCaptured hook')
          }
        }
      }
    }
  }
  globalHandleError(err, vm, info)
}

function globalHandleError(err, vm, info) {
  if (config.errorHandler) {
    try {
      config.errorHandler.call(null, err, vm, info)
    } catch (e) {
      // 避免 error handler 本身出错导致死循环
      logError(e, null, 'config.errorHandler')
    }
  } else {
    logError(err, vm, info)
  }
}

这段代码做了这些事情：

callWithErrorHandling：尝试执行函数，如果发生错误，调用 handleError。
handleError：首先尝试在组件树中向上查找具有 errorCaptured 钩子的组件，如果找到，则调用这些钩子。如果 errorCaptured 返回 false，则停止向上查找。
globalHandleError：如果组件树中没有 errorCaptured 处理错误，或者 errorCaptured 没有阻止错误传播，则调用全局的 errorHandler。

第二部分：社区警局 errorCaptured

errorCaptured是一个组件选项，它允许组件捕获其子组件抛出的错误。它有点像try...catch，但作用于组件树。

如何使用 errorCaptured：

在组件选项中，定义一个errorCaptured钩子函数。

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  errorCaptured(err, vm, info) {
    // 处理错误
    console.error('Error Captured:', err);
    console.warn('Component:', vm); // 指向发生错误的子组件实例
    console.warn('Info:', info); // Vue 特定的错误信息
    // 返回 `false` 以阻止错误继续向上传播
    return false; // 通常情况下不阻止传播，除非你想完全控制错误处理
  }
}
</script>

参数说明：

参数	类型	描述
`err`	`Error`	错误对象。
`vm`	`Vue instance`	发生错误的子组件实例。
`info`	`string`	Vue 特定的错误信息，例如错误发生在哪个生命周期钩子中。
返回值	`boolean`	可选。返回 `false` 以阻止错误继续向上传播。

返回值的作用：

如果errorCaptured返回true或者没有返回值，错误会继续向上传播到父组件的errorCaptured钩子和全局的errorHandler。
如果errorCaptured返回false，错误将停止传播。这允许组件完全控制错误的报告和处理。

举个栗子：

// ChildComponent.vue
<template>
  <div>
    <button @click="throwError">抛出一个错误</button>
  </div>
</template>

<script>
export default {
  methods: {
    throwError() {
      throw new Error('我是子组件抛出的错误！');
    }
  }
}
</script>

// ParentComponent.vue (上面已经给出)

当ChildComponent抛出错误时，ParentComponent的errorCaptured钩子会被调用。如果ParentComponent的errorCaptured返回false，错误就不会继续传播到全局的errorHandler。

errorCaptured 的特点：

父子关系： 只能捕获子组件抛出的错误，不能捕获自身抛出的错误。
冒泡机制： 错误会沿着组件树向上冒泡，直到被某个errorCaptured捕获，或者到达全局的errorHandler。
灵活控制： 可以通过返回值来控制错误是否继续传播，提供了很大的灵活性。

源码剖析：errorCaptured 是如何工作的？

前面在讲errorHandler的时候，我们已经看到了handleError函数。当子组件发生错误时，Vue会从子组件开始，沿着组件树向上查找父组件，如果父组件定义了errorCaptured钩子，就会调用这个钩子。

总结：

特性	`errorHandler`	`errorCaptured`
作用范围	全局	组件及其子组件
捕获对象	所有未捕获的错误	子组件抛出的错误
传播控制	无	可以通过返回值控制是否继续传播
使用场景	全局错误监控和报告	组件级别的错误处理，例如重试、降级等

最佳实践：

全局监控： 使用errorHandler来记录所有未捕获的错误，方便排查问题。
组件级别处理： 使用errorCaptured来处理特定组件的错误，例如重试失败的操作，显示友好的错误提示等。
避免死循环： 在errorHandler和errorCaptured中处理错误时，要避免再次抛出错误，防止形成死循环。

一些踩坑提示：

异步错误： errorCaptured无法捕获异步错误，例如setTimeout或Promise中的错误。对于异步错误，需要使用try...catch或者Promise.catch来处理。
渲染函数错误： 如果错误发生在组件的渲染函数中，Vue会尝试在下一个渲染周期中重新渲染组件。如果重新渲染仍然失败，Vue会抛出一个警告，并停止重新渲染。
生产环境： 在生产环境中，建议禁用详细的错误信息，以避免泄露敏感信息。可以使用Vue.config.productionTip = false来禁用生产提示。

好了，关于Vue的错误处理机制，我们就聊到这里。希望通过这次深入的探讨，大家能对Vue的错误处理有更深刻的理解，写出更健壮的Vue应用。记住，错误处理就像给代码穿保险套，虽然不能保证百分百安全，但能大大降低“意外怀孕”的风险！祝大家编码愉快！

发表回复 取消回复

发表回复取消回复