error.js

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

TypeScript
JavaScript

app/dashboard/error.tsx
'use client' // Error boundaries must be Client Components

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>
  )
}

app/dashboard/error.js
'use client' // Error boundaries must be Client Components

import { useEffect } from 'react'

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

  return (
    <div>
      <h2>何かがうまくいきませんでした！</h2>
      <button
        onClick={
          // セグメントを再レンダリングして回復を試みる
          () => reset()
        }
      >
        もう一度試す
      </button>
    </div>
  )
}

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

Good to know:

React DevTools を使用すると、エラーバウンダリを切り替えてエラーステートをテストできます。

エラーを親のエラーバウンダリにバブルアップさせたい場合は、error コンポーネントをレンダリングする際に throw できます。

リファレンス

Props

`error`

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

Good to know: 開発中は、クライアントに転送される Error オブジェクトはシリアライズされ、デバッグを容易にするために元のエラーの message を含みます。ただし、本番環境ではこの動作は異なります。エラーに含まれる潜在的に機密性のある詳細がクライアントに漏れるのを防ぐためです。

`error.message`

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

`error.digest`

スローされたエラーの自動生成されたハッシュ。サーバーサイドのログで対応するエラーを一致させるために使用できます。

`reset`

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

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

TypeScript
JavaScript

app/dashboard/error.tsx
'use client' // Error boundaries must be Client Components

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div>
      <h2>何かがうまくいきませんでした！</h2>
      <button onClick={() => reset()}>もう一度試す</button>
    </div>
  )
}

app/dashboard/error.js
'use client' // Error boundaries must be Client Components

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>何かがうまくいきませんでした！</h2>
      <button onClick={() => reset()}>もう一度試す</button>
    </div>
  )
}

例

グローバルエラー

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

TypeScript
JavaScript

app/global-error.tsx
'use client' // Error boundaries must be Client Components

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    // global-error には html と body タグを含める必要があります
    <html>
      <body>
        <h2>何かがうまくいきませんでした！</h2>
        <button onClick={() => reset()}>もう一度試す</button>
      </body>
    </html>
  )
}

app/global-error.js
'use client' // Error boundaries must be Client Components

export default function GlobalError({ error, reset }) {
  return (
    // global-error には html と body タグを含める必要があります
    <html>
      <body>
        <h2>何かがうまくいきませんでした！</h2>
        <button onClick={() => reset()}>もう一度試す</button>
      </body>
    </html>
  )
}

Good to know: global-error.js は本番環境でのみ有効です。開発中は、エラーオーバーレイが代わりに表示されます。

バージョン履歴

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

リファレンス​

Props​

error​

error.message​

error.digest​

reset​

例​

グローバルエラー​

バージョン履歴​