Vue中onErrorCaptured使用疑问：ErrorBoundary未捕获插槽内错误

核心问题大概率出在这几个地方： #

1. ErrorBoundary的onErrorCaptured没阻止错误冒泡
   Vue的onErrorCaptured钩子默认返回true，会让错误继续向上传播到父组件的钩子。如果你的ErrorBoundary处理完错误后没返回false，错误就会跑到App.vue的onErrorCaptured里。必须在捕获并处理错误（比如给Sentry加标签）后返回false，切断传播链。

2. ErrorBoundary没正确覆盖错误触发的组件
   检查你的ErrorBoundary是不是真的包裹了目标按钮组件：

• 有没有嵌套错误，比如按钮被Teleport移到了ErrorBoundary的作用范围外？
• 组件是不是异步加载的，导致ErrorBoundary实例化时机晚于错误触发？

3. 异步错误没被捕获
   onErrorCaptured只能捕获同步错误和组件生命周期内的错误，如果按钮点击触发的是异步操作里的错误（比如setTimeout、async/await未捕获的异常），这个钩子抓不到。这种情况需要在组件内部用try/catch包裹异步逻辑，手动抛出错误让ErrorBoundary捕获，或者结合全局app.config.errorHandler处理。

修复示例 #

正确的ErrorBoundary组件实现：

<template>
  <slot v-if="!hasError"></slot>
  <div class="error-fallback">组件出错了</div>
</template>

<script setup>
import { ref, onErrorCaptured } from 'vue'
import * as Sentry from '@sentry/vue'

const hasError = ref(false)

onErrorCaptured((err, instance, info) => {
  // 给特定组件加专属标签
  if (instance?.$options.name === 'SpecialButton') {
    Sentry.setTag('component_tag', 'special_button')
  }
  
  // 标记错误状态，阻止错误向上传播
  hasError.value = true
  return false // 关键：返回false终止传播
})
</script>

处理异步错误的组件示例：

<template>
  <button @click="handleClick">触发异步错误</button>
</template>

<script setup>
const handleClick = async () => {
  try {
    // 模拟异步错误
    await new Promise((_, reject) => setTimeout(() => reject(new Error('异步出错')), 100))
  } catch (err) {
    // 手动抛出，让外层ErrorBoundary捕获
    throw err
  }
}
</script>

确保正确包裹组件：

<!-- 父组件中使用ErrorBoundary -->
<ErrorBoundary>
  <SpecialButton />
</ErrorBoundary>

额外排查点 #

如果App.vue的onErrorCaptured还是先捕获错误，检查ErrorBoundary组件本身是否正确注册了onErrorCaptured钩子，或者组件是否被正常渲染。onErrorCaptured是从子到父触发的，子组件的ErrorBoundary应该优先执行，顺序反了说明组件实例化有问题。

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