Vue 组件报错详解

在开发 Vue.js 应用程序时，错误处理是一个重要的方面，Vue 提供了一些机制来捕获和处理组件中的错误，从而提升应用的稳定性和用户体验，本文将详细介绍如何在 Vue 中处理组件报错，包括errorHandler 和errorCaptured 两个关键钩子。

一、全局错误处理：errorHandler

errorHandler 是 Vue 提供的一个全局配置选项，用于捕获组件渲染和观察期间未捕获的错误，通过设置Vue.config.errorHandler，可以定义一个处理函数来处理这些错误。

基本用法：

Vue.config.errorHandler = function (err, vm, info) {
  // 处理错误信息, 进行错误上报
  console.error(err);
};

err：错误对象。

vm：发生错误的 Vue 实例。

info：Vue 特定的错误信息，比如错误所在的生命周期钩子。

示例：

Vue.config.errorHandler = (err, vm, info) => {
  console.log('进来啦~');
  console.error(err); // 将错误外抛到控制台
  captureError(err); // 错误上报到收集报错的平台
};

在这个例子中，我们不仅捕获了错误，还将其记录到了控制台，并调用了一个假设存在的captureError 函数将错误上报到外部服务。

二、组件级错误处理：errorCaptured

errorCaptured 是一个组件内的钩子，当捕获到一个来自子孙组件的错误时被调用，它允许我们在组件内部处理错误，并决定是否阻止错误继续向上传播。

基本用法：

export default {
  data() {
    return {
      error: null
    };
  },
  errorCaptured(err, vm, info) {
    this.error = `${err.stack}
found in ${info}> component`;
    return false; // 阻止错误继续向上传播
  },
  render(h) {
    if (this.error) {
      return h('pre', { style: { color: 'red' }}, this.error);
    }
    return this.$slots.default[0];
  }
};

参数说明：

err：错误对象。

vm：发生错误的组件实例。

info：包含错误来源信息的字符串。

示例：

// 父组件
Vue.component('ParentComponent', {
  template: `
    <div>
      <h1>Parent Component</h1>
      <errorboundary vif="!hasError">
        <ChildComponent />
      </errorboundary>
      <div vif="hasError">
        <h2>An error occurred in the child component!</h2>
        <button @click="resetError">Try Again</button>
      </div>
    </div>
  `,
  components: {
    ChildComponent,
    ErrorBoundary
  },
  data() {
    return {
      hasError: false
    };
  },
  methods: {
    resetError() {
      this.hasError = false; // 重置错误状态
    }
  },
  created() {
    this.$on('errorcaptured', (err) => {
      console.error(err);
      this.hasError = true; // 更新状态表示发生错误
    });
  }
});

const ErrorBoundary = {
  props: ['error'],
  template:<slot vif="!error" />,
  errorCaptured(err, vm, info) {
    this.$emit('errorcaptured', err);
    return false; // 阻止错误继续传播
  }
};

在这个示例中，ErrorBoundary 组件捕获了子组件的错误，并通过自定义事件errorcaptured 通知父组件，父组件接收到错误后，更新状态以显示错误消息，并提供一个按钮来重置错误状态。

三、错误传播规则

1、默认情况下，如果全局的config.errorHandler 被定义，所有的错误仍会发送给它，这些错误仍然会向单一的分析服务的地方进行汇报。

2、如果一个组件的继承或父级从属链路中存在多个errorCaptured 钩子，则它们将会被相同的错误逐个唤起。

3、如果此errorCaptured 钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的config.errorHandler。

4、一个errorCaptured 钩子能够返回false 以阻止错误继续向上传播，本质上是说“这个错误已经被搞定了且应该被忽略”，它会阻止其它任何会被这个错误唤起的errorCaptured 钩子和全局的config.errorHandler。

四、FAQs

Q1: 如何在 Vue 项目中实现全局错误处理？

A1: 你可以通过设置Vue.config.errorHandler 来实现全局错误处理。

Vue.config.errorHandler = function (err, vm, info) {
  console.error(err); // 将错误外抛到控制台
  captureError(err); // 错误上报到收集报错的平台
};

在这个例子中，所有未捕获的错误都会被这个处理函数捕获，并可以进行相应的处理，如记录日志或上报错误。

Q2: 如何在 Vue 项目中实现组件级错误处理？

A2: 你可以通过使用errorCaptured 钩子来实现组件级错误处理。

export default {
  data() {
    return {
      error: null
    };
  },
  errorCaptured(err, vm, info) {
    this.error = `${err.stack}
found in ${info}> component`;
    return false; // 阻止错误继续向上传播
  },
  render(h) {
    if (this.error) {
      return h('pre', { style: { color: 'red' }}, this.error);
    }
    return this.$slots.default[0];
  }
};

在这个例子中，当捕获到一个来自子孙组件的错误时，errorCaptured 钩子会被调用，并将错误信息存储在组件的error 属性中，返回false 以阻止错误继续向上传播。