コンテンツにスキップ
APIリファレンスファイル規約error.js

error.js

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

error.js special file
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のしくみ

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

How error.js works

知っておくと良いこと:

  • React開発ツールを使用すると、エラー境界を切り替えてエラー状態をテストできます。

プロパティ

error

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

知っておくと良いこと: 開発中は、クライアントに転送されるErrorオブジェクトはシリアライズされ、デバッグを容易にするために元のエラーの`message`が含まれます。ただし、エラーに含まれる機密性の高い詳細がクライアントにリークするのを防ぐため、**この動作は本番環境では異なります**。

error.message 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>
  )
}

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

知っておくと良いこと:

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

not-found.js

not-found ファイルは、ルートセグメント内で notFound() 関数を呼び出すときにUIを表示します。

バージョン履歴

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

エラー処理の詳細はこちら

エラー処理

予期されるエラーを表示し、キャッチされない例外を処理する方法を学ぶ。