如何设计一个 Vue 应用的错误处理和降级方案，以应对 API 请求失败或组件渲染错误？

各位靓仔靓女，欢迎来到今天的错误处理与降级方案“避坑”讲座！我是你们的老司机，今天带大家玩转Vue应用中的各种“坑”，教你如何优雅地避开它们，保证你的应用在各种奇葩情况下都能坚挺不倒。

一、错误处理：别让你的用户看到“红字”

错误处理是任何应用都不可或缺的一部分。想象一下，用户正在开心地浏览你的网站，突然屏幕上蹦出一个大大的“Error 500”，这感觉就像吃火锅吃到一半发现锅里有只蟑螂一样，瞬间让人没了胃口。所以，我们的目标是：绝不让用户直接看到那些丑陋的错误信息！

1. 全局错误处理：Vue 的“守护神”

Vue 提供了一个全局错误处理函数 Vue.config.errorHandler，它可以拦截所有组件渲染期间未捕获的错误。这就像一个全局的“守门员”，把那些漏网之鱼统统拦下来。

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.errorHandler = (err, vm, info) => {
  // 处理错误
  console.error('Global Error Handler:', err)

  // 可以将错误信息发送到服务器进行记录
  // trackError(err, vm, info);

  // 显示友好的错误提示
  vm.$root.$emit('error', {
    message: '好像哪里出错了，请稍后再试...'
  });
}

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

• err: 错误对象。
• vm: 发生错误的组件实例。
• info: Vue 特定的错误信息，例如错误发生的生命周期钩子等。

为什么要用全局错误处理？

• 统一管理: 集中处理所有未捕获的错误，方便排查问题。
• 用户体验: 避免用户直接看到丑陋的错误信息，提供友好的提示。
• 监控报警: 记录错误信息，方便监控应用状态，及时发现问题。

2. 组件内部错误处理：局部“消防员”

除了全局的“守门员”，我们还需要在组件内部设置“消防员”，及时扑灭可能发生的“小火灾”。Vue 2.x 中，可以通过 errorCaptured 钩子函数来实现。 Vue 3.x 中，使用的是onErrorCaptured。

<template>
  <div>
    <h1>组件标题</h1>
    <p>{{ data.name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    }
  },
  mounted() {
    // 模拟异步请求
    setTimeout(() => {
      try {
        // 故意制造一个错误：访问不存在的属性
        this.data = { age: 30 };
        console.log(this.data.name); // 这里会报错
      } catch (error) {
        console.error("组件内部错误:", error);
        // 显示友好的错误提示
        this.$emit('error', {
          message: '组件加载失败，请稍后再试...'
        });
      }
    }, 1000);
  },
  errorCaptured(err, vm, info) {
    // 处理来自子组件的错误
    console.error('Error captured from child component:', err, vm, info);
    // 阻止错误继续传播到父组件
    return false;
  }
}
</script>

• err: 错误对象。
• vm: 发生错误的组件实例。
• info: 错误发生的位置信息。

errorCaptured 的特点：

• 冒泡机制: 错误会从子组件一直冒泡到父组件，直到被处理。
• return false: 阻止错误继续冒泡，相当于扑灭了“小火”。
• 局部处理: 只处理当前组件及其子组件的错误，不影响全局错误处理。

3. try...catch：精准打击

对于一些可能发生错误的特定代码块，我们可以使用 try...catch 语句进行精准打击。这就像一个“灭火器”，专门用来扑灭那些可预测的“小火苗”。

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('API 请求失败:', error);
    // 显示友好的错误提示
    this.$emit('error', {
      message: '数据加载失败，请检查网络连接...'
    });
    return null; // 或者返回一个默认值
  }
}

try...catch 的优势：

• 精准控制: 只捕获特定代码块中的错误，不会影响其他代码的执行。
• 灵活处理: 可以根据不同的错误类型进行不同的处理。
• 防止崩溃: 即使发生错误，也能保证程序的正常运行。

4. Promise 的 catch 和 finally：异步操作的“保险锁”

在处理异步操作时，Promise 的 catch 和 finally 方法就像两道“保险锁”，确保即使发生错误，也能进行一些必要的处理。

fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    // 处理数据
    console.log(data);
  })
  .catch(error => {
    console.error('API 请求失败:', error);
    // 显示友好的错误提示
    this.$emit('error', {
      message: '数据加载失败，请检查网络连接...'
    });
  })
  .finally(() => {
    // 无论成功还是失败，都要执行的代码
    console.log('请求完成');
  });

• catch: 捕获 Promise 链中发生的任何错误。
• finally: 无论 Promise 成功还是失败，都会执行的代码块，通常用于清理资源或恢复状态。

5. 错误边界 (Error Boundaries) – Vue 3 的新玩具

Vue 3 引入了 onErrorCaptured 这个生命周期钩子，允许你创建一个错误边界组件，它可以捕获其后代组件的错误。 类似于 React 中的 Error Boundaries。

// ErrorBoundary.vue
<template>
  <div v-if="hasError">
    <h1>Something went wrong!</h1>
    <p>Please try again later.</p>
  </div>
  <slot v-else></slot>
</template>

<script>
import { ref, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const hasError = ref(false);

    const onErrorCaptured = (err, instance, info) => {
      console.error('Error captured by ErrorBoundary:', err, instance, info);
      hasError.value = true;
      // 阻止错误继续传播
      return false;
    };

    return {
      hasError,
      onErrorCaptured,
    };
  }
});
</script>

// ParentComponent.vue
<template>
  <ErrorBoundary>
    <ChildComponent />
  </ErrorBoundary>
</template>

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

export default {
  components: {
    ErrorBoundary,
    ChildComponent,
  },
};
</script>

二、降级方案：优雅地“跪着活下去”

即使我们做了充分的错误处理，也难免会遇到一些无法避免的“坑”。这时候，降级方案就派上用场了。降级方案就像一个“备胎”，当主要功能失效时，可以切换到备用方案，保证应用的基本可用性。

1. 功能降级：砍掉“不重要”的功能

当某些功能出现问题时，我们可以选择暂时禁用这些功能，保证核心功能的正常运行。例如，当评论系统出现问题时，可以暂时隐藏评论功能，避免影响用户的正常浏览。

<template>
  <div>
    <h1>文章标题</h1>
    <p>文章内容</p>
    <div v-if="showComments">
      <h2>评论</h2>
      <CommentList />
    </div>
    <button @click="toggleComments">
      {{ showComments ? '隐藏评论' : '显示评论' }}
    </button>
  </div>
</template>

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

export default {
  components: {
    CommentList
  },
  data() {
    return {
      showComments: true
    }
  },
  methods: {
    toggleComments() {
      this.showComments = !this.showComments;
    }
  },
  mounted() {
    // 模拟评论系统故障
    setTimeout(() => {
      this.showComments = false;
    }, 5000);
  }
}
</script>

2. 数据降级：使用缓存或默认数据

当 API 请求失败时，我们可以使用缓存数据或默认数据来代替，避免用户看到空白页面。例如，当获取用户信息失败时，可以显示默认的头像和昵称。

async function getUserInfo() {
  try {
    const response = await fetch('/api/user');
    const data = await response.json();
    // 将数据缓存到 localStorage 中
    localStorage.setItem('userInfo', JSON.stringify(data));
    return data;
  } catch (error) {
    console.error('获取用户信息失败:', error);
    // 从 localStorage 中获取缓存数据
    const cachedData = localStorage.getItem('userInfo');
    if (cachedData) {
      return JSON.parse(cachedData);
    } else {
      // 返回默认数据
      return {
        name: '匿名用户',
        avatar: '/default-avatar.png'
      };
    }
  }
}

3. 服务降级：切换到备用服务

当主要服务出现故障时，我们可以切换到备用服务，保证应用的基本可用性。例如，当主要图片服务器出现问题时，可以切换到备用图片服务器。

const primaryImageServer = 'https://primary.example.com';
const backupImageServer = 'https://backup.example.com';

function getImageUrl(imagePath) {
  try {
    // 尝试从主要图片服务器获取图片
    const response = await fetch(primaryImageServer + imagePath);
    if (response.ok) {
      return primaryImageServer + imagePath;
    } else {
      // 如果主要图片服务器出现问题，则切换到备用图片服务器
      console.warn('主要图片服务器故障，切换到备用图片服务器');
      return backupImageServer + imagePath;
    }
  } catch (error) {
    // 如果主要图片服务器出现问题，则切换到备用图片服务器
    console.error('主要图片服务器故障:', error);
    console.warn('切换到备用图片服务器');
    return backupImageServer + imagePath;
  }
}

4. 页面降级：显示静态页面或简易版本

当整个应用无法正常运行时，我们可以显示静态页面或简易版本，至少给用户一个可以访问的页面。例如，当服务器崩溃时，可以显示一个包含基本信息的静态页面。

三、API 请求失败处理的常见策略

API 请求失败是前端开发中常见的问题，以下是一些常用的策略来处理这种情况：

策略	描述	优点	缺点	适用场景
重试	在请求失败后，自动重新发送请求。可以使用指数退避策略来避免在服务器过载时造成更大的压力。	简单易用，对于临时性网络问题有效。	可能增加服务器压力，对于持久性错误无效。	适用于临时性网络问题，如网络抖动、短暂的服务不可用。
缓存	将 API 响应缓存到本地，以便在请求失败时可以使用缓存数据。可以使用 localStorage、sessionStorage 或 IndexedDB 等技术来实现缓存。	提高用户体验，减少对服务器的请求。	需要考虑缓存的过期时间和更新策略，可能导致数据不一致。	适用于不经常变化的数据，如用户信息、配置信息等。
默认值	在请求失败时，使用预定义的默认值来代替 API 响应。	简单易用，可以保证用户界面始终显示内容。	默认值可能不准确，无法反映真实数据。	适用于可以接受默认值的情况，如图片占位符、默认配置等。
错误提示	向用户显示友好的错误提示，告知他们请求失败的原因，并提供一些建议，例如检查网络连接、稍后再试等。	提高用户体验，让用户了解发生了什么问题。	需要精心设计错误提示信息，避免过于技术化或吓唬用户。	适用于任何 API 请求失败的情况。
降级	禁用或简化某些功能，以减轻服务器压力。例如，可以禁用评论功能、减少图片质量等。	保证核心功能的可用性，避免服务器崩溃。	可能影响用户体验，某些功能可能无法使用。	适用于服务器过载或出现故障时。
上报错误	将错误信息发送到服务器进行记录，以便开发人员可以及时发现和解决问题。	方便开发人员排查问题，及时修复 bug。	需要考虑用户隐私，避免泄露敏感信息。	适用于任何 API 请求失败的情况，尤其是在生产环境中。
断路器模式	使用断路器模式来防止对不可用服务的重复请求。断路器会在服务不可用时自动打开，并在一段时间后尝试重新连接。	防止对不可用服务的重复请求，避免资源浪费。	实现较为复杂，需要引入额外的库或框架。	适用于需要高可用性的服务。

四、 Vue 3 的 Suspense 和 Error Boundaries 的结合

Vue 3 的 Suspense 组件可以与 Error Boundaries 结合使用，提供更强大的错误处理和降级方案。 Suspense 允许你在等待异步操作完成时显示一个占位符，而 Error Boundaries 可以捕获组件渲染期间发生的错误。

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue';
import ErrorBoundary from './ErrorBoundary.vue';

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./MyComponent.vue'),
  onError(error, retry, fail) {
    console.error('Failed to load component', error);
    // 可以在这里进行重试或降级
    // retry()
    fail(); // 让 Suspense 显示 fallback 内容
  }
});

export default {
  components: {
    AsyncComponent,
    ErrorBoundary,
  },
};
</script>

在这个例子中，如果 AsyncComponent 加载失败，Suspense 会显示 fallback 内容。 你也可以将 AsyncComponent 放在 ErrorBoundary 中，以便捕获组件渲染期间发生的错误。

五、总结：打造坚如磐石的 Vue 应用

今天我们学习了 Vue 应用中错误处理和降级方案的各种技巧，包括：

• 全局错误处理：Vue.config.errorHandler
• 组件内部错误处理：errorCaptured (Vue 2) / onErrorCaptured (Vue 3)
• try...catch：精准打击
• Promise 的 catch 和 finally：异步操作的“保险锁”
• 功能降级、数据降级、服务降级、页面降级
• API 请求失败的常见策略
• Vue 3 的 Suspense 和 Error Boundaries

记住，错误处理和降级方案不是一次性的工作，而是一个持续改进的过程。我们需要不断地测试、监控和优化我们的应用，才能打造出一个坚如磐石的 Vue 应用，让用户体验更加流畅和稳定。

最后，希望大家在开发过程中少踩坑，多用这些技巧，让你的 Vue 应用更加健壮！ 谢谢大家！