Sponsor
ChatHubChatHub — Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-side
ここをクリック
Menu

error.js

errorファイルを使用すると、予期しないランタイムエラーを処理し、フォールバックUIを表示することができます。

error.js特殊ファイル
app/dashboard/error.tsx
TypeScript
'use client' // エラーバウンダリはクライアントコンポーネントである必要があります
 
import { useEffect } from 'react'
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // エラーをエラー報告サービスにログ記録する
    console.error(error)
  }, [error])
 
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          // セグメントを再レンダリングすることで回復を試みる
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  )
}

error.jsはルートセグメントとその子要素をReactエラーバウンダリでラップします。バウンダリ内でエラーがスローされると、errorコンポーネントがフォールバックUIとして表示されます。

error.jsの仕組み

補足:

  • React DevToolsを使用すると、エラーバウンダリを切り替えてエラー状態をテストできます。
  • エラーを親のエラーバウンダリにバブルアップさせたい場合は、errorコンポーネントのレンダリング時にthrowできます。

リファレンス

Props

error

error.jsクライアントコンポーネントに転送されるErrorオブジェクトのインスタンスです。

補足: 開発中は、クライアントに転送されるErrorオブジェクトがシリアライズされ、デバッグを容易にするために元のエラーのmessageが含まれます。ただし、この動作は本番環境では異なり、エラーに含まれる可能性のある機密情報がクライアントに漏れないようになっています。

error.message

  • クライアントコンポーネントから転送されたエラーは元のErrorメッセージを表示します。
  • サーバーコンポーネントから転送されたエラーは、識別子付きの一般的なメッセージを表示します。これは機密情報の漏洩を防ぐためです。errors.digestの下にある識別子を使用して、対応するサーバーサイドログと照合できます。

error.digest

自動生成されたエラーのハッシュです。サーバーサイドログ内の対応するエラーと照合するために使用できます。

reset

エラーの原因が一時的なものである場合があります。そのような場合、再試行することで問題が解決する可能性があります。

エラーコンポーネントはreset()関数を使用して、ユーザーにエラーからの回復を促すことができます。実行されると、この関数はエラーバウンダリの内容を再レンダリングしようとします。成功した場合、フォールバックエラーコンポーネントは再レンダリングの結果に置き換えられます。

app/dashboard/error.tsx
TypeScript
'use client' // エラーバウンダリはクライアントコンポーネントである必要があります
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  )
}

例

グローバルエラー

あまり一般的ではありませんが、国際化を活用している場合でも、ルートappディレクトリにあるglobal-error.jsを使用して、ルートレイアウトまたはテンプレートでエラーを処理できます。グローバルエラーUIは独自の<html>タグと<body>タグを定義する必要があります。このファイルはアクティブになるとルートレイアウトまたはテンプレートを置き換えます。

app/global-error.tsx
TypeScript
'use client' // エラーバウンダリはクライアントコンポーネントである必要があります
 
export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    // global-errorにはhtmlとbodyタグを含める必要があります
    <html>
      <body>
        <h2>Something went wrong!</h2>
        <button onClick={() => reset()}>Try again</button>
      </body>
    </html>
  )
}

補足: global-error.jsは常に表示されます。開発環境では、代わりにエラーオーバーレイが表示されます。

バージョン履歴

バージョン変更内容
v15.2.0開発中もglobal-errorを表示するようになりました。
v13.1.0global-errorが導入されました。
v13.0.0errorが導入されました。

エラー処理について詳しく学ぶ

エラー処理

予期されるエラーの表示と未捕捉例外の処理方法について学びます。