【Nuxt3】クライアントサイドからエラーページへ飛ばす方法

前提

• Nuxt3プロジェクトが存在する

公式のエラーハンドリング

Nuxt3はフルスタックフレームワークであり、異なるコンテキストで発生するいくつかの予防不可能なユーザーランタイムエラーがあります。これには、Vueのレンダリングライフサイクル、APIまたはNitroサーバーライフサイクル、サーバーとクライアントの起動エラー、JSチャンクのダウンロードエラーなどが含まれます。

エラーヘルパーメソッド

• useError: 処理中のエラー状態管理
• createError: 追加のメタデータを持つエラーオブジェクトを作成するために使えます。
  ※ fatal: true をオプションに追加することで、エラーページへのレンダリングをトリガーできます。
• showError: 任意のタイミングで呼び出し、エラーページへのレンダリングをトリガーします。
• clearError: 現在処理されているエラー（useError）をクリアします。

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

Nuxtの起動中にエラーが発生した場合、app:errorフックを呼び出しています。

今回は、野菜のページを作成し、エラーページ表示の検証をしましょう。
許容するparamsは_vegetable(cabbage, pumpkin, carrot)とする。
※ それ以外はエラーページにレンダリングしたい。

<template>
  <div>
    <span>vegetable: {{ path }}</span>
  </div>
</template>

<script setup lang="ts">
type PathType = 'cabbage' | 'pumpkin' | 'carrot'
const vegetables: PathType[] = [
  'cabbage',
  'pumpkin',
  'carrot'
]
const path = useRoute().params._vegetable as PathType

if (!vegetables.includes(path)) {
  throw createError({
    statusCode: 404,
    message: 'Not Found',
    fatal: true
  })
  // もしくはshowErrorを使う
  // showError(
  //   createError({
  //     statusCode: 404,
  //     message: 'Not Found'
  //   })
  // )
}
</script>

今回は簡単にここまで。
エラーページも作成していないので、Nuxt3デフォルトのエラーページが表示されるはず。

もちろん、好きなタイミングでエラーを発生させることも可能。

<template>
  <div>
    <span>vegetable: {{ path }}</span>
    <v-btn @click="throwError">擬似エラー</v-btn>
  </div>
</template>

<script setup lang="ts">

~~ 省略
const throwError = () => {
  // 擬似的にサーバーエラーとする
  throw createError({
    statusCode: 500,
    message: 'Internal Server Error',
    fatal: true
  })
}
</script>

Vueライフサイクルのエラー

VueのエラーはonErrorCapturedを使用してフックできます。さらに、Nuxtはエラーがトップレベルまで伝播する場合に呼び出されるvue:errorフックを提供します。エラー報告フレームワークを使用している場合、vueApp.config.errorHandlerを通じてグローバルハンドラを提供できます。これにより、処理されたすべてのVueエラーが受信されます。

コンポーネントを利用したレンダリング

Nuxtは、エラーページを表示することなく、アプリ内でクライアントサイドのエラーを処理するための<NuxtErrorBoundary>コンポーネントも提供しています。

<template>
  <NuxtErrorBoundary @error="logSomeError">
    <!-- ... -->
  </NuxtErrorBoundary>
</template>

気になる場合は公式から

共有

こちらに動作環境があります。
cabbageページ
pumpkinページ
carrotページ
意図的なエラーページ

【今回の作業ブランチ】
https://github.com/yutahhh/firebase-study/tree/feature/%2310

お疲れ様でした。