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>何か問題が発生しました！</h2>
<button
onClick={
// セグメントを再レンダリングすることで復旧を試みます
() => reset()
}
>
再試行
</button>
</div>
)
}error.jsの仕組み
error.jsはルートセグメントとその入れ子になった子要素をReactエラーバウンダリでラップします。バウンダリ内でエラーがスローされると、errorコンポーネントがフォールバックUIとして表示されます。
補足：
- React DevToolsを使用して、エラーバウンダリを切り替えてエラー状態をテストできます。
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>何か問題が発生しました！</h2>
<button onClick={() => reset()}>再試行</button>
</div>
)
}global-error.js
あまり一般的ではありませんが、国際化を利用する場合でも、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>何か問題が発生しました！</h2>
<button onClick={() => reset()}>再試行</button>
</body>
</html>
)
}補足：
global-error.jsは本番環境でのみ有効です。開発中は、代わりにエラーオーバーレイが表示されます。
not-found.js
not-foundファイルは、ルートセグメント内でnotFound()関数を呼び出した際にUIを表示します。
バージョン履歴
| バージョン | 変更点 |
|---|---|
v13.1.0 | global-errorが導入されました。 |
v13.0.0 | errorが導入されました。 |