面试题：Vue项目中如何捕获组件内的运行时错误

Question

在Vue项目里，组件可能会因为数据异常等情况抛出运行时错误。请阐述如何使用Vue提供的机制来捕获这些组件内的运行时错误，并给出简单示例代码。

Answer 1

1. 使用 errorCaptured 钩子函数捕获错误

在Vue组件中，可以通过 errorCaptured 钩子函数来捕获子组件抛出的运行时错误。

• 钩子函数定义：errorCaptured 钩子函数会在捕获到子组件的运行时错误时被调用。它接收三个参数：error（错误对象）、vm（发生错误的组件实例）和 info（错误信息，如错误所在的生命周期钩子等）。

• 示例代码：

<template>
  <div id="app">
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  errorCaptured(error, vm, info) {
    console.log('捕获到错误:', error);
    console.log('发生错误的组件实例:', vm);
    console.log('错误信息:', info);
    return false; // 阻止错误继续向上传播
  }
};
</script>

2. ChildComponent.vue 示例（抛出错误）

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

<script>
export default {
  methods: {
    throwError() {
      throw new Error('这是一个运行时错误');
    }
  }
};
</script>

3. 使用 Vue.config.errorHandler 全局捕获错误

除了在单个组件中使用 errorCaptured 钩子，还可以通过 Vue.config.errorHandler 来全局捕获Vue应用内所有未处理的运行时错误。

• 示例代码：

import Vue from 'vue';
import App from './App.vue';

Vue.config.errorHandler = function (error, vm, info) {
  console.log('全局捕获到错误:', error);
  console.log('发生错误的组件实例:', vm);
  console.log('错误信息:', info);
};

new Vue({
  render: h => h(App)
}).$mount('#app');