error.js

`error`ファイルは、予期せぬランタイムエラーを処理し、フォールバックUIを表示することを可能にします。

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(() => {
    // Log the error to an error reporting service
    console.error(error)
  }, [error])
 
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          // Attempt to recover by trying to re-render the segment
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  )
}

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

補足:

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

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

リファレンス

Props

`error`

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

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

`error.message`

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

`error.digest`

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

`reset`

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

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

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>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  )
}

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

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 must include html and body tags
    <html>
      <body>
        <h2>Something went wrong!</h2>
        <button onClick={() => reset()}>Try again</button>
      </body>
    </html>
  )
}

バージョン履歴

バージョン	変更点
`v15.2.0`	開発環境でも `global-error` を表示するように変更。
`v13.1.0`	`global-error` が導入されました。
`v13.0.0`	`error` が導入されました。