error.js
errorファイルは、ルート Segment のエラー UI Boundary を定義します。
Server Components や Client Components で発生した予期しないエラーをキャッチし、フォールバック UI を表示するのに便利です。
app/dashboard/error.tsx
'use client' // Errorコンポーネントは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>Something went wrong!</h2>
<button
onClick={
// Segmentの再レンダリングを試みる
() => reset()
}
>
Try again
</button>
</div>
)
}
Props
error
Client Component であるerror.jsに転送されたErrorオブジェクトのインスタンス。
error.message
エラーメッセージです。
- Client Components から転送されたエラーの場合、これは元のエラーのメッセージになります
- Server Components から転送されたエラーの場合は、機密情報の漏洩を避けるために一般的なエラーメッセージとなります。
errors.digestを使用して、サーバー側のログにある対応するエラーとマッチさせることができます
error.digest
Server Component でスローされたエラーの自動生成ハッシュ。サーバー側のログに対応するエラーとマッチさせるために使用します。
reset
エラーバウンダリをリセットする関数。実行されると、この関数はエラーバウンダリの内容の再レンダリングを試みます。成功した場合、フォールバックのエラーコンポーネントは再レンダリングの結果で置き換えられます。
ユーザーにエラーからの回復を試みるよう促すために使用できます。
Good to know:
error.jsはClient Componentである必要があります- プロダクション用のビルドでは、Server Components から転送されたエラーは、機密情報の漏洩を避けるために、特定のエラー詳細が取り除かれます
error.jsバウンダリは 、同じSegment 内のlayout.jsコンポーネントでスローされたエラーを処理しません。なぜなら、エラーバウンダリはそのレイアウト・コンポーネントの中にネストされているからです
- 特定のレイアウトのエラーを処理するには、レイアウトの親 Segment に
error.jsファイルを配置します- ルートレイアウトまたはテンプレート内でエラーを処理するには、
app/global-error.jsというerror.jsのバリエーションを使います
global-error.js
ルートのlayout.jsでエラーを処理するには、appディレクトリのルートでerror.jsのバリエーションであるapp/global-error.jsを使います。
app/global-error.tsx
'use client'
export default function GlobalError({
error,
reset,
}: {
error: Error & { digest?: string }
reset: () => void
}) {
return (
<html>
<body>
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</body>
</html>
)
}
Good to know:
global-error.jsは、アクティブになるとルートのlayout.jsと置き換わるので、<html>タグと<body>タグを定義する必要があります- エラー UI をデザインする際、React Developer Toolsを使って手動でエラーバウンダリに切り替えると便利です
not-found.js
not-found ファイルは、ルートセグメント内で notFound() 関数がスローされたときに UI をレンダリングするために使用されます。
バージョン履歴
| Version | Changes |
|---|---|
v13.1.0 | global-errorの導入 |
v13.0.0 | errorの導入 |