이 기사에서는 Nuxt.js v2계에서의 설명이 됩니다.

Nuxt.js는 CSR시의 에러와 SSR시의 에러로 출력되는 화면이 다릅니다.
CSR시라면 app/layouts/error.vue 가 이용되어 커스터마이즈 할 수 있습니다.

그러나 SSR시에, 예를 들면 fetch로 호출한 axios의 응답의 스테이터스 코드가 500계였던 경우 app/layouts/error.vue 는 이용되지 않고, Nuxt.js 독자적인 에러 화면이 출력됩니다.



SSR시의 에러 페이지를 변경하는 경우 app/views/error.html 를 변경하는 것으로 독자적인 에러 화면을 작성할 수 있습니다.
※ srcDir: 'app', 로 하고 있는 경우는 app/app/views/error.html 가 됩니다. (약간)


(스쿠쇼가 너무 간단하다)

그러나, 이 경우라고 표현할 수 있는 에러 페이지는 1종류가 됩니다.
상태 코드별로 오류 페이지를 나누고 싶다면 어떻게 해야 하나요?

상태 코드별로 오류 페이지 분리

nuxt.config.js 의 정의에서 hooks 를 이용하는 것으로 Nuxt 어플리케이션이 에러가 되었을 경우에 처리를 꽂을 수가 있습니다.
이것을 이용하여 임의의 에러 페이지를 표시시키는 것이 가능합니다.

hooks render.errorMiddleware Nuxt 응용 프로그램이 오류가 발생하면 실행됩니다.
htps : // 그럼. 없는 xtjs. rg / cs / 2. x / r r ls-g ぉ さ ry / r r ls - rden r # % 3 % 83 % 95 % 3 % 83 % 83 % 3 % 82 % A F

아래 코드 예제에서는 http status가 503이면 your/path/errors/503.html가 표시되고, 그렇지 않으면 your/path/errors/error.html가 표시됩니다.
스테이터스 코드별로 페이지를 늘리는 경우는 case 를 적절히 추가하는 것으로 동적으로 나누는 것이 가능합니다.

nuxt.config.js

import fs from 'fs'

///

hooks: {
  render: {
    errorMiddleware(app) {
      app.use((error, _req, res, next) => {
        const status = error.response.status
        if (status >= 500) {
          res.statusCode = status
          res.setHeader('Content-Type', 'text/html; charset=utf-8')
          let html
          switch (status) {
            case 503:
              html = fs.readFileSync(`your/path/errors/${status}.html`)
              break
            default:
              html = fs.readFileSync('your/path/errors/error.html')
          }
          res.end(html)
          return
        }
        next(error)
      })
    }
  }
},

(이 기능, 디폴트로 들어 있으면 좋겠다 -)