BLOG

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

2019.10.9
TECH

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

初めての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>

まとめ

レンダリング前後でエラーページを2種類作成することで、エラー時も統一感を持たせることができます。

レンダリング前 静的なエラーページを作成して読み込ませる
レンダリング後 error.vue を配置する

以上、サーバエラー時の画面表示についてでした!

The following two tabs change content below.
Taro

Taro

ディレクターも、サーバ構築も、ゴリゴリ開発もやります。 オールマイティ担当。 スパイスも甘いものも大好き。