error.js

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

TypeScript
JavaScript

app/dashboard/error.tsx
'use client' // Error boundaries は 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 は 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 Client Component に転送される Error オブジェクトのインスタンス。

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

`error.message`

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

`error.digest`

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

`reset`

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

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

TypeScript
JavaScript

app/dashboard/error.tsx
'use client' // Error boundaries は 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 は Client Components でなければなりません

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

例

グローバルエラー

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

TypeScript
JavaScript

app/global-error.tsx
'use client' // Error boundaries は 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 は Client Components でなければなりません

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

バージョン履歴

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

リファレンス​

Props​

error​

error.message​

error.digest​

reset​

例​

グローバルエラー​

バージョン履歴​