【Nuxt.js】サーバエラーでオリジナルのエラーページを表示させる方法

こんにちは、タロウです。

初めてのTech Blogは「Nuxt.jsのサーバエラー」についてです！

Nuxt.jsを使ったプロジェクトでコーディングしていて、

ハマったので(備忘録も兼ねて)書き留めます。

ココにハマった！

レンダリング前にサーバエラーがすると、Nuxt標準のエラーページが表示されてしまい、

オリジナルのエラーページ表示方法ななかなか見当たらずハマってしまった・・

レンダリング後のエラーページ

とても簡単。ルート直下に下記ファイルを作成するとNuxtが良しなにエラーページに遷移してくれます。

layouts/error.vue

Statusをキャッチできる
ComponentのTemplateを適用できる(ほかページのcomponentと同様の書き方ができる)
特別エラー箇所にハンドリングのロジックを書かなくても良い


<template>
  <div class="error">
    <h1 class="error-title">{{error.statusCode}}</h1>
    <p class="error-txt" v-if="error.statusCode === 404">ページが見つかりません</p>
    <p class="error-txt" v-else>エラーが発生しました</p>
    <nuxt-link class="error-link" to="/">ホーム</nuxt-link>
  </div>
</template>
<script>
  export default {
    props: ['error'], 
  }; 
</script>
<style lang="scss" scoped>
 .error {
   text-align: center;
   padding: 20px;
   &-title {
     color: #888;
     font-size: 70px;
     font-weight: bold;
   }
 }
</style>

レンダリング前のエラーページ

さて、困ったのはこちら。

レンダリング前(サーバ側)でthrowされると、こんな画面が表示されます。

そう、レンダリング前のエラーはerror.vueに遷移してくれないのです。

静的ページで対応しよう！

ルート直下に下記ファイルを作成すると、Nuxt標準のエラーページの代わりに読み込んでくれます。

app/views/error.html

次のことさえ抑えておけば十分使えそう！

レンダリング前のエラーページなので、ユーザにエラーの理由を見せる必要がない
時間をおいてアクセスしてください　的なメッセージを出してあげる(親切心)
ComponentのTemplateは適用されない＝Header/Footerは適用されない

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>エラーが発生しました</title>
    <style>
        .error {
        text-align: center;
        padding: 20px;
        }
        .error-title {
        color: #888;
        font-size: 70px;
        font-weight: bold;
        }
        .error-txt {
        margin-top: 10px;
        }
        .error-link {
        display: block;
        margin-top: 50px;
        color: #2e9fe8;
        }
    </style>
  </head>
  <body>
    <div class="error">
      <p class="error-txt">エラーが発生しました
        <br>時間をおいてから再度アクセスしてください。
      </p>
      <a class="error-link" href="/hogehoge">ホーム</a>
    </div>
  </body>
</html>