Vue中如何处理错误？

在Vue应用中，错误处理是构建健壮用户体验的重要环节。错误可能发生在Vue组件渲染、观察者、生命周期钩子或事件处理器中。Vue提供了从组件级到应用级的多种错误捕获机制。

全局错误处理器

你可以设置一个全局错误处理器，用于捕获所有未被处理的Vue错误（包括组件渲染和观察者错误）。这是在Vue 3中捕获“未知”错误的主要方式。

// Vue 3
import { createApp } from 'vue';
const app = createApp({});
app.config.errorHandler = (err, vm, info) => {
  console.error('全局捕获的错误:', err);
  console.log('发生错误的组件实例:', vm);
  console.log('错误来源信息:', info); // 例如 'render function', 'watcher callback'
  // 可以在此上报错误到监控服务
};

这个处理器对于记录错误日志和上报到异常监控系统（如Sentry）非常有用。但它无法阻止错误继续向上传播到控制台。

生命周期钩子 errorCaptured

errorCaptured是一个组件级生命周期钩子。它能捕获其所有后代组件中传播上来的错误。你可以在此钩子中阻止错误进一步向上冒泡。

export default {
  errorCaptured(err, instance, info) {
    console.log('组件捕获到后代错误:', err);
    // 返回 false 可以阻止错误继续向上传播
    return false;
  }
}

这个钩子允许你在组件树中建立局部的错误边界，对错误进行更精细的处理或恢复。

处理异步/Promise错误

Vue的错误处理器无法捕获异步回调（如setTimeout、Promise）中的错误。这些错误需要使用原生的try...catch或Promise的.catch()方法进行处理。

<script>
export default {
  methods: {
    async fetchData() {
      try {
        const res = await fetch('/api/data');
        this.data = await res.json();
      } catch (err) {
        console.error('捕获到异步错误:', err);
        this.showError = true;
      }
    }
  }
}
</script>

对于async/await，使用try...catch是最直接的方式。对于事件处理器中的Promise，记得链式调用.catch()。

处理渲染函数和观察者错误

在模板渲染或计算属性中直接抛出错误会被Vue捕获。但为了更好的可维护性，建议在可能出错的地方进行防御性编程。

<template>
  <div>{{ safeComputedValue }}</div>
</template>
<script>
export default {
  computed: {
    safeComputedValue() {
      try {
        return this.someData.maybeNull.property;
      } catch {
        return '默认值';
      }
    }
  }
}
</script>

对于watch侦听器，也可以在其回调内部使用try...catch。

因此，一个完整的Vue错误处理策略应该是分层的：使用errorCaptured在关键组件（如布局组件）建立错误边界，阻止局部错误影响整个应用；使用全局errorHandler作为最后防线，进行统一的日志记录和上报；在异步操作和复杂逻辑中，积极使用try...catch进行本地处理。这能最大程度地保证应用的稳定性和可观测性。