NuxtのshowErrorとは？〜エラー表示を手軽に実装できる便利な機能〜

Webアプリケーション開発において、エラーハンドリングはユーザー体験を大きく左右する重要な要素です。Nuxtが提供するshowErrorは、エラー発生時にフルスクリーンのエラーページを簡単に表示できる仕組みで、開発者が複雑なエラー処理を自前で実装する手間を大幅に削減します。

この機能を使うことで、エラー状態をリアクティブかつSSR（サーバーサイドレンダリング）対応で管理でき、ユーザーにわかりやすいエラーメッセージを即座に提示可能です。特にAPI通信の失敗やページが見つからない場合など、ユーザーに適切なフィードバックを返す場面で役立ちます。

まず結論：showErrorのポイントまとめ

• 簡単にエラー画面を表示可能：文字列やオブジェクトでエラー情報を渡すだけでOK
• リアクティブかつSSR対応：Nuxtのエラーストアに状態をセットし、どのコンポーネントからも共有可能
• 標準のエラーページを活用：カスタムエラーページも作成できるため柔軟性が高い
• app:errorフックをトリガー：エラー発生時に追加処理を差し込める
• APIレスポンスのステータスコードやメッセージも指定可能

いつ使うべきか？使わない方がよいケースは？

使うべきケース

• API通信や非同期処理でエラーが発生し、ユーザーに明確なエラーメッセージを表示したいとき
• ページが存在しない（404）などのHTTPエラーを検知して適切な画面に遷移させたいとき
• SSR環境下でエラー状態を安全に管理し、クライアントとサーバー間で整合性を保ちたいとき
• 複数のコンポーネント間でエラー状態を共有し、一元管理したいとき

使わない方がよいケース

• 軽微なUIのバリデーションエラーなど、画面内で完結するエラー表示には向かない（showErrorはフルスクリーンのエラーページ表示が基本）
• エラーを単にログに記録したいだけで、ユーザーに表示する必要がない場合
• エラーの詳細をカスタムUIで細かく制御したい場合（カスタムエラーページを作るか、別の状態管理を検討）

実務でよくあるユースケースとサンプルコード

1. API通信失敗時にエラーページを表示する

try {
  const data = await $fetch('/api/data')
  // 正常処理
} catch (error) {
  showError({
    statusCode: error.response?.status || 500,
    statusMessage: error.message || 'API通信に失敗しました'
  })
}

APIからのレスポンスがエラーの場合、showErrorにステータスコードとメッセージを渡すことで、ユーザーにわかりやすいエラーページを表示できます。

2. ページが見つからない場合の404エラー表示

if (!pageExists) {
  showError({
    statusCode: 404,
    statusMessage: 'お探しのページは存在しません'
  })
}

動的ルーティングなどで対象ページが存在しない場合に、404エラー画面を表示してユーザーを案内します。

3. サーバーサイドでの致命的なエラー検知

export default defineEventHandler(async (event) => {
  try {
    // サーバー処理
  } catch (error) {
    showError(new Error('サーバー内部エラーが発生しました'))
  }
})

SSR中に致命的なエラーが発生した場合もshowErrorを使うことで、クライアントに適切なエラーページを返せます。

よくある落とし穴・注意点

SSRとHydrationのズレに注意

showErrorはSSR時にエラー状態をセットし、クライアント側でも同じ状態を再現します。しかし、サーバーとクライアントでエラー状態が異なるとHydrationエラーが発生する可能性があります。エラー状態はできるだけサーバー側で確定させてからクライアントに渡す設計が望ましいです。

パフォーマンスへの影響

頻繁にshowErrorを呼び出すと、エラーページのレンダリングが多発しUXが悪化します。軽微なエラーは画面内で処理し、重大なエラーのみshowErrorで表示するように使い分けましょう。

エラーメッセージの過剰な露出に注意

ユーザーに表示するエラーメッセージは、セキュリティ上の観点から内部情報を含まないように注意してください。特にスタックトレースや内部例外はログにのみ記録し、ユーザー向けには簡潔でわかりやすい文言を用いるのがベストプラクティスです。

まとめ

NuxtのshowErrorは、エラー発生時に即座にフルスクリーンのエラーページを表示できる強力なツールです。リアクティブかつSSR対応で、API通信失敗や404エラーなど実務でよくあるケースに簡単に対応可能です。一方で、Hydrationのズレやパフォーマンス面の注意も必要なので、適切な使い分けを心がけましょう。

この機能を活用することで、ユーザーにとってわかりやすく信頼性の高いエラーハンドリングを実現し、Nuxtアプリケーションの品質向上に大きく貢献できます。