error.js
errorファイルを使用すると、予期しないランタイムエラーを処理し、フォールバック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>Something went wrong!</h2>
<button
onClick={
// セグメントを再レンダリングすることで回復を試みる
() => reset()
}
>
Try again
</button>
</div>
)
}
error.js
はルートセグメントとその子要素をReactエラーバウンダリでラップします。バウンダリ内でエラーがスローされると、error
コンポーネントがフォールバックUIとして表示されます。
補足:
- React DevToolsを使用すると、エラーバウンダリを切り替えてエラー状態をテストできます。
- エラーを親のエラーバウンダリにバブルアップさせたい場合は、
error
コンポーネントのレンダリング時にthrow
できます。
リファレンス
Props
error
error.js
クライアントコンポーネントに転送されるError
オブジェクトのインスタンスです。
補足: 開発中は、クライアントに転送される
Error
オブジェクトがシリアライズされ、デバッグを容易にするために元のエラーのmessage
が含まれます。ただし、この動作は本番環境では異なり、エラーに含まれる可能性のある機密情報がクライアントに漏れないようになっています。
error.message
- クライアントコンポーネントから転送されたエラーは元の
Error
メッセージを表示します。 - サーバーコンポーネントから転送されたエラーは、識別子付きの一般的なメッセージを表示します。これは機密情報の漏洩を防ぐためです。
errors.digest
の下にある識別子を使用して、対応するサーバーサイドログと照合できます。
error.digest
自動生成されたエラーのハッシュです。サーバーサイドログ内の対応するエラーと照合するために使用できます。
reset
エラーの原因が一時的なものである場合があります。そのような場合、再試行することで問題が解決する可能性があります。
エラーコンポーネントはreset()
関数を使用して、ユーザーにエラーからの回復を促すことができます。実行されると、この関数はエラーバウンダリの内容を再レンダリングしようとします。成功した場合、フォールバックエラーコンポーネントは再レンダリングの結果に置き換えられます。
'use client' // エラーバウンダリはクライアントコンポーネントである必要があります
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>
タグを定義する必要があります。このファイルはアクティブになるとルートレイアウトまたはテンプレートを置き換えます。
'use client' // エラーバウンダリはクライアントコンポーネントである必要があります
export default function GlobalError({
error,
reset,
}: {
error: Error & { digest?: string }
reset: () => void
}) {
return (
// global-errorにはhtmlとbodyタグを含める必要があります
<html>
<body>
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</body>
</html>
)
}
補足:
global-error.js
は常に表示されます。開発環境では、代わりにエラーオーバーレイが表示されます。
バージョン履歴
バージョン | 変更内容 |
---|---|
v15.2.0 | 開発中もglobal-error を表示するようになりました。 |
v13.1.0 | global-error が導入されました。 |
v13.0.0 | error が導入されました。 |