😇

Nuxt.jsでエラー発生時に表示するエラーページの作り方(CSRとSSR対応)

2023/11/27に公開

こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです!
今回は、Nuxt.jsでエラー発生時に表示するエラーページの作り方(CSRとSSR対応)について解説します。

Nuxt.jsでのエラーページの作り方

まず前提として、CSR(クライアントサイド)の場合と、SSR(サーバーサイド)の場合で対応を分けて考える必要があります。

今回は、次のような順序でエラーページの作り方と、その確認するためのSample Pageについてご紹介します。

CSR(クライアントサイド)の場合のエラーページの作り方

/layouts/error.vueを作成すると、CSR側でエラーが発生したときに、自動でそのページが表示されるようになります。

error.vue
<!-- Client Side 側の Error (CSR-Error) は、こちらで対応できる -->
<template>
  <div class="error-msg">
    <p>Error ステータスコード:{{ error.statusCode }}</p>
    <p>Error メッセージ:{{ error.message }}</p>
    <div>
      <nuxt-link class="home-return-link" to="/">ホームに戻る</nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    error: {
      type: Object,
      default: null,
    },
  },
}
</script>
<style lang="scss" scoped>
.error-msg {
  text-align: center;
  padding: 30px;
}
.home-return-link {
  display: inline-block;
  margin-top: 12px;
  color: $black-color-2;
  font-weight: 600;
  padding: 12px;
  background-color: white;
  border-radius: 8px;
  &:hover {
    background-color: rgba(128, 128, 128, 0.5);
  }
}
</style>

SSR(サーバーサイド)の場合のエラーページの作り方

/app/views/error.htmlを作成すると、SSR側でエラーが発生したときに、自動でそのページが表示されるようになります。

error.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-msg {
        text-align: center;
        padding: 30px;
      }
    </style>
  </head>
  <body>
    <div class="error-msg">
      <p class="error-txt">サーバー・エラーが発生しました。</p>
      <div>
        <a class="return-link" href="https://masanyon.com/">ホームに戻る</a>
      </div>
    </div>
  </body>
</html>

CSRとSSR、それぞれを確認するためのSample Page

/pagesにCSRとSSR、それぞれを確認するためのSample Pageを作成していきます。

throw new Error()で、わざとErrorを発生させます。

SSRの処理は、asyncData()を使用すると簡単に確認ができます。

test.vue
<template>
  <div>
    <h2>Error Test Template</h2>
  </div>
</template>
<script>
// Import_Zone
export default {
  name: 'Test Component',
  /** NuxtAuth: 未ログイン状態でも、Access可能 */
  auth: false,
  /** SSR(サーバーサイド)処理 */
  asyncData(context) {
    throw new Error('SSR Error')
  },
  /** LifeCycleHook: MountedTiming */
  mounted() {
    throw new Error('CSR Error')
  },
}
</script>
<style scoped>
/* Style_定義 */
</style>

まとめ

今回は、Nuxt.jsでエラー発生時に表示するエラーページの作り方(CSRとSSR対応)について解説しました。

フロントエンドの場合は、エラーハンドリングだけでなく、エラーの際のページ対応も考える必要があると改めて、考えさせられました。

個人で、Blogもやっています、よかったら見てみてください。

https://masanyon.com/

注意事項

この記事は、AIQ 株式会社の社員による個人の見解であり、所属する組織の公式見解ではありません。

求む、冒険者!

AIQ株式会社では、一緒に働いてくれるエンジニアを絶賛、募集しております🐱🐹✨

詳しくは、Wantedly (https://www.wantedly.com/companies/aiqlab)を見てみてください。

参考・引用

https://zenn.dev/kokota/articles/ffd20ddf228ef3

https://www.lichter.io/articles/nuxt-change-server-error-page/

https://github.com/nuxt/nuxt/issues/2120

https://qiita.com/kubotak/items/e38292d1703e3eae9590

AIQ Tech Blog (有志)

Discussion