LoginSignup
5
2

More than 3 years have passed since last update.

[Nuxt.js]SSR時のエラー画面を切り替える

Posted at

この記事ではNuxt.js v2系での説明となります。

Nuxt.jsではCSR時のエラーとSSR時のエラーで出力される画面が異なります。
CSR時であればapp/layouts/error.vueが利用され、カスタマイズすることが可能です。

しかしSSR時に、例えばfetchで呼び出したaxiosのレスポンスのステータスコードが500系だった場合app/layouts/error.vueは利用されず、Nuxt.js独自のエラー画面が出力されます。

2021-05-11 11.49.38 localhost 248a51c44c06.png

SSR時のエラーページを変更する場合 app/views/error.html を変更することで独自のエラー画面を作成することができます。
srcDir: 'app',としている場合はapp/app/views/error.htmlとなります。(ややこしい)

2021-05-11 12.00.32 localhost 16a07b49040b.png
(スクショが簡素すぎた)

しかし、この場合だと表現できるエラーページは1種類となります。
ステータスコード別にエラーページを分けたい場合はどうしたら良いでしょうか。

ステータスコード別にエラーページを分ける

nuxt.config.jsの定義でhooksを利用することでNuxtアプリケーションがエラーになった場合に処理を差し込むことができます。
これを利用して任意のエラーページを表示させることが可能です。

hooksのrender.errorMiddlewareがNuxtアプリケーションがエラーになった場合に実行されます。
https://ja.nuxtjs.org/docs/2.x/internals-glossary/internals-renderer#%E3%83%95%E3%83%83%E3%82%AF

下記のコード例では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)
      })
    }
  }
},

(この機能、デフォルトで入っててほしいなー)

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2