Error Handling
NextWeb.js comes with a very smart error handler out of the box. Actually, you can do nothing unless add some styles to your error pages to make them look awesome.
Page-Level Errors
This type of error is caused by some code that called by getInitialProps()
. If this error type occurred, the handler will render the error page automatically.
Cause of Error | Error Page Status Code |
---|---|
Source Code | 500 |
API | Depend on API response |
Custom Error Page
NextWeb.js provides error pages with very simple styles. We know that you want to modify them so here are the files:
src/
components/
_error/
400/
index.js
500/
index.js
Component-Level Errors
This type of error is caused by <Fetch />
render prop. If this error type occurred, the handler will render nothing unless you handle it manually using the onError
prop.
function ArticleDetailPage({ data }) {
return (
<div>
<ArticleDetail data={data} />
<Fetch
service={getLatestArticles}
onError={error => {
console.error(error)
return <MyErrorMessage error={error} />
}}>
{({ data }) => <ArticleLatest data={data} />}
</Fetch>
</div>
)
}