Nuxt 에서 오류 처리하는 방법 createError, showError, NuxtErrorBoundary

프론트엔드 개발을 하면 많은 오류를 만날 수 있습니다.

 

서버에서 오류가 날 때,

Vue 렌더링 할 때,

클라이언트에서 오류 등

개발 중 또는 Product 시점에서도 오류가 나타날 수 있습니다.

 

오류가 나타날 것을 예상해 적절하게 처리를 해준다면, 사용자도 개발자도 더 편리하게 사이트를 사용할 수 있습니다.

 

Nuxt에서 오류처리 하는 방법에 대해서 알아보도록 하겠습니다.

 

오류 처리하는 방법

• 치명적 오류 ▶ 전체 페이지가 오류 페이지로 전환
• 비치명적 오류 ▶ 오류가 발생 

createError()

사용법

 

const { data } = await useFetch(`/api/products`)
if (!data.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
}

 

createError의 경우

서버에서 오류 발생 시 치명적인 오류가 발생하여 전체 화면 오류 페이지로 이동합니다.

클라이언트에서 오류 발생 시 비치명적 오류가 발생합니다.

clearError()로 전체 화면 오류를 지울 수 있습니다.

 

showError()

전체 화면 에러 페이지를 만들 수 있는 방법입니다.

주로, 클라이언트, plugins, 서버 측의 미들웨어에서 사용합니다.

clearError()로 전체 화면 오류를 지울 수 있습니다.

 

사용법

showError("오류가 발생하였습니다.")
showError({
  statusCode: 404,
  statusMessage: "Page Not Found"
})

 

createError() vs showError() 

createError

• 더 많은 메타 데이터 처리 가능
• 서버에서 발생 시 치명적인 오류, 클라이언트에서 발생 시 비 치명적인 오류
• 서버 측에서 발생한 에러 처리 가능

showError

• client에서 언제든지 호출 가능
• 미들웨어, 플러그인, setup 함수 등에서 사용 가능
• client 에서 발생한 에러를 특정시점에 처리하는 것으로 사용 가능

useError()

사용법

현재 발생한 오류 정보를 알 수 있습니다. 상태 코드, 상태 메시지, 에러 메시지 등을 조회할 수 있습니다.

const error = useError()
 
interface {
  //  HTTP 상태 코드
  statusCode: number
  // HTTP 상태 메시지
  statusMessage: string
  // 이러 메시지
  message: string
}

 

clearError()

처리된 오류를 모두 지웁니다.

사용법

// redirect 없이
clearError()
// redirect
clearError({ redirect: '/homepage' })

 

 

NuxtErrorBoundary

<NuxtErrorBoundary> 컴포넌트는 클라이언트에서 발생한 오류를 전체 화면 오류 페이지로 전환하지 않고,

기본 slot 내에서 표시하게 됩니다.

 

이벤트 @error

에러 정보를 수신합니다.

 

slot #error

에러 발생 시 대체할 페이지를 표시합니다.

 

app.vue

<NuxtErrorBoundary @error="someErrorLogger">
  <NuxtPage />
  <template #error="{ error, clearError }">
    <div>
        {{ error }}
    </div>
    <button @click="clearError">돌아가기</button>
  </template>
</NuxtErrorBoundary>

 

NuxtPage 의 content는 표시하지 않고 error 슬롯 내의 content를 표시합니다.