<NuxtErrorBoundary>

Source
<NuxtErrorBoundary> 컴포넌트는 기본 슬롯에서 발생하는 클라이언트 사이드 에러를 처리합니다.
<NuxtErrorBoundary>는 내부적으로 Vue의 onErrorCaptured 훅을 사용합니다.

Events

  • @error: 컴포넌트의 기본 슬롯에서 에러가 발생했을 때 발생하는 이벤트입니다.
<template>
  <NuxtErrorBoundary @error="logSomeError">
    <!-- ... -->
  </NuxtErrorBoundary>
</template>

Slots

  • #error: 에러가 발생했을 때 표시할 폴백 콘텐츠를 지정합니다.
<template>
  <NuxtErrorBoundary>
    <!-- ... -->
    <template #error="{ error, clearError }">
      <p>에러가 발생했습니다: {{ error }}</p>

      <button @click="clearError">
        에러 지우기
      </button>
    </template>
  </NuxtErrorBoundary>
</template>
Read more in Docs > 4 X > Getting Started > Error Handling.

Examples

스크립트에서 error와 clearError에 접근하기

아래와 같이 컴포넌트의 스크립트 내에서 error와 clearError 속성에 접근할 수 있습니다:

<template>
  <NuxtErrorBoundary ref="errorBoundary">
    <!-- ... -->
  </NuxtErrorBoundary>
</template>

<script setup lang="ts">
const errorBoundary = useTemplateRef('errorBoundary')

// errorBoundary.value?.error
// errorBoundary.value?.clearError()
</script>