Error Boundary
コンポーネント内で発生する特定のエラー（実行時エラーなど）しかcatchしてくれない。以下のエラーは捕捉しないので、現状はあまり使い道はないかもしれない。
- イベントハンドラ内で発生したエラー
- fetch APIで帰ってきたエラーなど。
next/error
Next.jsではデフォルトでエラーコンポーネント(Error)が存在します。Next.jsが用意しているErrorコンポーネントを再利用したい場合はこれを使う。
pages/_error.js
デフォルトのErrorコンポーネントをオーバーライド（上書き）したい場合は配置します。サーバーサイドレンダリングされる。ちなみにこれは本番ビルド時のみ利用されます。（開発時は利用されません。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function Error({ statusCode }) { return ( <p> {statusCode ? `An error ${statusCode} occurred on server` : 'An error occurred on client'} </p> ) } Error.getInitialProps = ({ res, err }) => { const statusCode = res ? res.statusCode : err ? err.statusCode : 404 return { statusCode } } export default Error |
「getStaticProps」や「getServerProps」などでデータが取れなかった場合や、任意のエラーを表示させたい場合これを使う。
pages/404.js
存在しないURLにアクセスした際のページを返すことが可能です。公式では以下のようなページを作成しています。このファイルを作成したらビルド時に静的に生成されます。
|
1 2 3 |
export default function Custom404() { return <h1>404 - 指定したページが見つかりませんでした。</h1>; } |
pages/500.js
サーバー側で発生したエラーを捕捉したい場合は以下のページを作成します。このファイルを作成したらビルド時に静的に生成されます。
|
1 2 3 |
export default function Custom500() { return <h1>500 - サーバーサイドでエラーが発生しました。</h1> } |
この記事へのコメントはありません。