[javascript] Nuxt.js에서의 에러 처리 방법은?

19 Dec 2023

javascript

전역 에러 핸들링 미들웨어

Nuxt.js에서는 middleware 폴더 내에 error.js와 같이 이름을 지정하여 전역 에러 핸들링 미들웨어를 생성할 수 있습니다.

// middleware/error.js

export default function ({ error, redirect }) {
  if (error.response.status === 404) {
    redirect('/404')  // 404 페이지로 리다이렉트
  }
}

페이지 컴포넌트 내에서 에러 핸들링

Nuxt.js에서는 페이지 컴포넌트 내에서 asyncData 또는 fetch 메소드를 이용하여 데이터를 가져오는 과정에서 에러를 처리할 수 있습니다.

// pages/index.vue

export default {
  async asyncData({ error }) {
    try {
      const data = await fetch('https://api.example.com/data')
      return { data }
    } catch (e) {
      error({ statusCode: 404, message: '데이터를 불러오는 중 에러가 발생했습니다' })  // 에러 상태 코드와 메시지 설정
    }
  }
}

위의 두 가지 방법을 통해 Nuxt.js 애플리케이션에서 에러를 효과적으로 처리할 수 있습니다.

에러 처리에 대한 자세한 내용은 Nuxt.js 공식 문서를 참고하시기 바랍니다.