nuxt logo

문서 번역(비공식)

createError

추가 메타데이터와 함께 에러 객체를 생성합니다.

이 함수는 추가 메타데이터와 함께 에러 객체를 생성하는 데 사용할 수 있습니다. 이 함수는 앱의 Vue 및 Nitro 부분 모두에서 사용 가능하며, 던져질 수 있도록 설계되었습니다.

매개변수

  • err: string | { cause, data, message, name, stack, statusCode, statusMessage, fatal }

createError 함수에 문자열 또는 객체를 전달할 수 있습니다. 문자열을 전달하면 에러 message로 사용되며, statusCode는 기본값으로 500이 설정됩니다. 객체를 전달하면 statusCode, message 및 기타 에러 속성과 같은 여러 속성을 설정할 수 있습니다.

Vue 앱에서

createError로 생성된 에러를 던지면:

  • 서버 측에서는 전체 화면 에러 페이지가 트리거되며, clearError로 이를 지울 수 있습니다.
  • 클라이언트 측에서는 비치명적인 에러가 던져지며, 이를 처리할 수 있습니다. 전체 화면 에러 페이지를 트리거해야 하는 경우 fatal: true로 설정할 수 있습니다.

예시

pages/movies/[slug\
const route = useRoute()
const { data } = await useFetch(`/api/movies/${route.params.slug}`)
if (!data.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
}

API 경로에서

서버 API 경로에서 에러 처리를 트리거하기 위해 createError를 사용하세요.

예시

server/api/error.ts
export default eventHandler(() => {
  throw createError({
    statusCode: 404,
    statusMessage: 'Page Not Found'
  })
})

API 경로에서는 짧은 statusMessage를 포함한 객체를 전달하여 createError를 사용하는 것이 권장됩니다. 이는 클라이언트 측에서 접근할 수 있기 때문입니다. 그렇지 않으면, API 경로에서 createError에 전달된 message는 클라이언트로 전파되지 않습니다. 대안으로, data 속성을 사용하여 데이터를 클라이언트로 반환할 수 있습니다. 어떤 경우든, 잠재적인 보안 문제를 피하기 위해 메시지에 동적 사용자 입력을 포함하지 않도록 항상 고려해야 합니다.

이것도 참고 getting-started > error-handling