こんにちは、”はふぃ”です。

今回は Nuxt.js を使ったエラーページに関する話をしたいと思います。

エラーページとは

エラーページはその名の通り、サイト上でなんらかの不具合（エラー）が発生した時にユーザーにそれを伝えるためのページのことです。

上記のようにエラーページには三桁の数字（画像では404）が表示されていることが多いのですが、これは HTTPステータスコード と呼ばれるもので、なんのエラー（エラー以外もありますが）が発生しているのかをコードごとに示すものとなります。

エラーに関する HTTPステータスコード だと 400系 と 500系 があり、400系 がクライアントエラー（ユーザー操作などで発生するエラー）で 500系 がサーバーエラー（システム側でのエラー）を表します。

例えば、上の画像の 404 というエラーは「そんなページは存在しません」というコードなのですが、ページにアクセスするためのURLを入力するのはユーザーで、それが間違っているというエラーなのでクライアントエラーである400系に分類されているというわけです。

以下に代表的な400系と500系のエラーを紹介します。

• 400系（クライアントエラー）
  • 400（Bad Request）：クライアントからサーバーへのリクエストに何らかの不備がある
  • 403（Forbidden）：アクセス権がないページにアクセスするなどサービス側で禁止している
  • 404（Not Found）：ページが見つからない
• 500系（サーバーエラー）
  • 500（Internal Server Error）：サーバー側で処理方法が分からないエラーが発生した
  • 503（Service Unavailable）：サーバーがダウンしていたりメンテナンス中などサービスが利用できない状態

エラーページ作成

では、ここから実際にコードや画面で説明しながらエラーページを作っていきます。

Nuxt.js では layouts/error.vue にエラーページのデザインや処理を記入することで全ページ共通のエラーページを作成することができます。

< layouts/error.vue >

<template>
  <div>
    <h1>{{ error.statusCode }}</h1>
    <h1>エラーが発生しました</h1>
  </div>
</template>

<script>
export default {
  props: {
    error: { type: Object, default () { return {} } }
  }
}
</script>

このページでは標準で error というObjectのpropsが渡され、その中に先ほど紹介した HTTPステータスコード を表す statusCode という値を持っています。

statusCode の値はデフォルトでは404なので、例えば /aaa のような存在しないページのURLでアクセスすると以下のような表示になります。

※ わかりやすくするために枠線をひいています

エラーハンドリング（エラーページの表示制御）

エラーページが作成できたので、ここからはエラーハンドリング（発生したエラーに応じて処理を使い分ける）をしながらエラーページをカスタマイズしていこうと思います。

基本的なエラーハンドリング

まずは Nuxt.js の fetch 処理の中でAPIを使ってデータを取得する場面を想定してエラーハンドリングしてみましょう。

API側でエラーが発生した場合はシステムのエラーなので 500系 が使われます。

今回は50%で失敗する（現実ではありえませんが。笑）処理をAPIからデータを取得する処理と仮定して、うまくいった場合には 400 エラーを返す以下のような処理で試してみます。

< pages/sample/errorPage.vue >

<template>
  <div />
</template>

<script>
export default {
  fetch ({ error }) {
    const fetchFn = () => {
      // 50%で失敗する
      if (parseInt(Math.random() * 2, 10) === 1) {
        throw new Error('server error')
      }
      return true
    }

    try {
      // 処理が成功したら400, 失敗したら500
      fetchFn()
      error({ statusCode: 400 })
    } catch (e) {
      error({ statusCode: 500 })
    }
  }
}
</script>

<style></style>

なお、Nuxt.js の error メソッドを使った場合、エラーページが表示される際にURLが変わらない（ /error などにならない）という特徴があるのでサイトによっては注意が必要です！（Google Analyticsなどのツールを使って後からエラー率を取得しようとしている場合など）

バリデーション（validate）を使ったエラー

Nuxt.js では validate という機能を使って、ページにアクセスしてきた時にURLパラメータやURLクエリーが正しいかをチェックすることができます。

先ほどのコードに以下のようなvalidate処理を追加してみましょう。

< pages/sample/errorPage.vue >

…

<script>
export default {
  validate ({ query }) {
    return query.sampleId
  },
  fetch ({ error }) {
  …

今回は sampleId というqueryがついていない場合はバリデーションで弾くような実装にしました。

○：http://localhost:3000/sample/errorPage?sampleId=1

×：http://localhost:3000/sample/errorPage

これで↑の × のパターンのURLでアクセスすると以下のように404エラーの表示になります。

※ validateエラーのstatusCodeは404になります

エラーメッセージを動的に表示

Nuxt.js の error メソッドでは statusCode の他に message というパラメータでエラーメッセージも渡すことができます。

これを使うことでエラーごとに任意のエラーメッセージをエラーページで表示させることが可能です。

< pages/sample/errorPage.vue >

…

try {
  // 処理が成功したら400, 失敗したら500
  fetchFn()
  error({ statusCode: 400, message: '操作にミスがあります。最初からやり直してください。' })
} catch (e) {
  error({ statusCode: 500, message: 'システムがダウンしています。時間をおいてやり直してください。' })
}

…

< layouts/error.vue >

<template>
  <div>
    <h1>{{ error.statusCode }}</h1>
    <h1>{{ error.message }}</h1>
  </div>
</template>

…

さらに layouts/error.vue でも処理を追加してエラーメッセージを切り替えてみましょう。

< layouts/error.vue >

<template>
  <div>
    <h1>{{ error.statusCode }}</h1>
    <h1>{{ errorMessage }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    error: { type: Object, default () { return {} } }
  },
  computed: {
    errorMessage () {
      if (this.error.statusCode === 404) {
        return 'ページが存在しません'
      }
      if (this.error.message) {
        return this.error.message
      }
      return 'エラーが発生しました'
    }
  }
}
</script>

この状態で先ほどのバリデーションエラーを発生させると、このように設定したエラーメッセージが表示されます。

まとめ

Nuxt.js は layouts/error.vue をいじるだけでエラーページをいじれるので便利ですね！

参考

今回のコードはgithubで公開中なので参考にしてみてください！↓

https://github.com/hafilog/vue-sample/tree/master/components/pages/sample