error.js

error ファイルは、ルートセグメントのエラー UI 境界を定義します。

サーバーコンポーネントとクライアントコンポーネントで発生する予期しないエラーをキャッチし、フォールバック UI を表示するのに役立ちます。

'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>問題が発生しました！</h2>
      <button
        onClick={
          // セグメントを再レンダリングして復旧を試みる
          () => reset()
        }
      >
        再試行
      </button>
    </div>
  )
}

'use client' // エラーコンポーネントはクライアントコンポーネントである必要があります

import { useEffect } from 'react'

export default function Error({ error, reset }) {
  useEffect(() => {
    // エラーをエラー報告サービスに記録
    console.error(error)
  }, [error])

  return (
    <div>
      <h2>問題が発生しました！</h2>
      <button
        onClick={
          // セグメントを再レンダリングして復旧を試みる
          () => reset()
        }
      >
        再試行
      </button>
    </div>
  )
}

Props

`error`

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

`error.message`

エラーメッセージ。

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

`error.digest`

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

`reset`

エラー境界をリセットする関数。実行すると、関数はエラー境界のコンテンツを再レンダリングしようとします。成功した場合、フォールバックエラーコンポーネントは再レンダリング結果に置き換えられます。

ユーザーにエラーからの復旧を試みるよう促すために使用できます。

知っておくと良いこと:

error.js 境界は必ず**クライアントコンポーネント**でなければなりません。

本番ビルドでは、サーバーコンポーネントから転送されたエラーは機密情報の漏洩を防ぐため特定のエラー詳細が削除されます。

error.js 境界は、同じセグメント内の layout.js コンポーネントでスローされたエラーを処理しません。これはエラー境界がそのレイアウトコンポーネントの内側にネストされているためです。

特定のレイアウトのエラーを処理するには、レイアウトの親セグメントに error.js ファイルを配置します。

ルートレイアウトまたはテンプレート内のエラーを処理するには、app/global-error.js と呼ばれる error.js のバリエーションを使用します。

`global-error.js`

ルート layout.js のエラーを特別に処理するには、ルート app ディレクトリにある app/global-error.js と呼ばれる error.js のバリエーションを使用します。

'use client'

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <html>
      <body>
        <h2>問題が発生しました！</h2>
        <button onClick={() => reset()}>再試行</button>
      </body>
    </html>
  )
}

'use client'

export default function GlobalError({ error, reset }) {
  return (
    <html>
      <body>
        <h2>問題が発生しました！</h2>
        <button onClick={() => reset()}>再試行</button>
      </body>
    </html>
  )
}

知っておくと良いこと:

global-error.js はアクティブ時にルート layout.js を置き換えるため、独自の <html> タグと <body> タグを定義する必要があります。

エラー UI を設計する際には、React Developer Tools を使用してエラー境界を手動で切り替えると便利な場合があります。

not-found.js

not-found ファイルは、ルートセグメント内で notFound() 関数がスローされたときに UI をレンダリングするために使用されます。

バージョン履歴

バージョン	変更点
`v13.1.0`	`global-error` が導入されました。
`v13.0.0`	`error` が導入されました。

On this page