하위 렌더 오류를 페이지 일부에서 복구합니다.
NuxtErrorBoundary는 client-side 자식 오류를 포착하고 #error slot에 오류와 clearError를 제공합니다. 서버 전체 오류 처리와 적용 범위를 구분합니다.
오류가 난 위젯만 경계로 감싸 나머지 화면을 유지합니다.
오류를 관측 시스템에 기록하고 사용자에게 내부 stack을 노출하지 않습니다.
clearError 뒤 같은 원인이 유지되면 즉시 다시 실패하므로 상태 복구가 필요합니다.
로컬 프로젝트에서 확인해보세요실패 원인을 끄는 상태와 다시 시도 버튼을 연결하세요.
<script setup>
const broken = ref(false);
const Broken = {
setup() {
return () => {
if (broken.value) throw new Error("실패");
return h("p", "정상 위젯");
};
},
};
</script>
<template>
<main>
<button @click="broken = true">오류 발생</button
><NuxtErrorBoundary
><Broken /><template #error="{ clearError }"
><p role="alert">위젯 오류</p>
<button
@click="
broken = false;
clearError();
"
>
복구
</button></template
></NuxtErrorBoundary
>
</main>
</template>