하위 컴포넌트 오류를 가까운 상위 경계에서 관찰합니다.
onErrorCaptured는 자식에서 전파된 오류와 컴포넌트 정보를 받습니다. false를 반환하면 추가 전파를 멈출 수 있지만 복구 UI 상태도 함께 설계해야 합니다.
전역 errorHandler와 기능 경계의 책임을 나눕니다.
내부 stack과 민감 데이터는 사용자 화면에 노출하지 않습니다.
모든 오류를 조용히 false로 막으면 운영 관측이 사라집니다.
로컬 프로젝트에서 확인해보세요다시 시도할 때 자식을 새 key로 재마운트하세요.
<script setup>
import { defineComponent, h, onErrorCaptured, ref } from "vue";
const failed = ref(false);
onErrorCaptured(() => {
failed.value = true;
return false;
});
const Broken = defineComponent(() => () => {
throw new Error("렌더 실패");
});
</script>
<template>
<main>
<h1>기능 경계</h1>
<p v-if="failed" role="alert">위젯을 표시하지 못했습니다.</p>
<Broken v-else />
<p>다른 영역은 유지됩니다.</p>
</main>
</template>