Vue3+Vite渲染库中如何捕获组件渲染错误并替换为自定义组件？

要实现捕获单个product组件的渲染错误、替换为自定义<Error>组件且不中断整体渲染的需求，你可以通过自定义错误边界组件来实现，利用Vue3的onErrorCaptured钩子捕获子组件错误，具体步骤如下：

1. 封装错误边界组件 ErrorBoundary.vue #

这个组件负责包裹需要容错的子组件，捕获其渲染错误，并在出错时切换为显示<Error>组件：

<script setup lang="ts">
import { ref, onErrorCaptured } from 'vue';
import Error from './Error.vue';

const props = defineProps<{
  product: any; // 传入出错的product对象，用于标识
  fallbackComponent: typeof Error; // 错误时显示的组件
}>();

const hasError = ref(false);
const errorMsg = ref('');

// 捕获子组件的错误
onErrorCaptured((err, instance, info) => {
  hasError.value = true;
  // 拼接错误信息，包含product类型和具体错误
  errorMsg.value = `[${props.product.type}] 渲染出错: ${err.message}\n错误详情: ${info}`;
  
  // 返回false阻止错误向上传播，避免中断整体渲染
  return false;
});
</script>

<template>
  <div v-if="!hasError">
    <slot /> <!-- 正常渲染子组件 -->
  </div>
  <component
    v-else
    :is="props.fallbackComponent"
    :msg="errorMsg"
    :product="props.product"
  />
</template>

2. 自定义错误提示组件 Error.vue #

用于展示错误详情和出错product的信息：

<script setup lang="ts">
defineProps<{
  msg: string;
  product: any;
}>();
</script>

<template>
  <div class="product-error">
    <h4>组件渲染失败</h4>
    <p><strong>Product类型:</strong> {{ product.type }}</p>
    <p><strong>错误原因:</strong> {{ msg }}</p>
  </div>
</template>

<style scoped>
.product-error {
  padding: 1rem;
  border: 1px solid #ff4444;
  background-color: #ffebee;
  border-radius: 4px;
  margin: 0.5rem 0;
}
</style>

3. 修改 Render.vue，用错误边界包裹每个组件 #

将原来的<component>包裹在ErrorBoundary中，确保单个组件出错不影响整体渲染：

// Render.vue

<script setup lang="ts">
import { Product } from 'bitran';
import { resolveComponent } from 'vue';
import ErrorBoundary from './ErrorBoundary.vue';
import Error from './Error.vue';

const props = defineProps<{ products: Product[] }>();
const products = props.products;
</script>

<template>
  <template v-for="product in products" :key="product.id"> <!-- 建议添加唯一key保证渲染稳定性 -->
    <ErrorBoundary
      :product="product"
      :fallback-component="Error"
    >
      <component :is="resolveComponent(product.type)" :product />
    </ErrorBoundary>
  </template>
</template>

效果验证 #

当你在<Paragraph>组件中主动抛出错误时，ErrorBoundary会立刻捕获该错误，自动将<Paragraph>替换为<Error>组件，显示包含Paragraph类型和错误信息的提示，同时其他product组件的渲染不受任何影响。

关键说明 #

• onErrorCaptured钩子会在子组件抛出错误时触发，返回false可以阻止错误向上冒泡，避免整个Render组件崩溃。
• 通过传递product对象到ErrorBoundary，可以在错误提示中明确标识出哪个product出错，方便快速定位问题。
• 错误边界组件可以复用在任何需要容错的组件场景中，扩展性强。

内容的提问来源于stack exchange，提问作者CMTV