2020-01-03 19:16:51 +01:00
---
description: Override and extend the built-in Error page to handle custom errors.
---
2019-12-23 16:07:38 +01:00
# Custom Error Page
**404** or **500** errors are handled both client-side and server-side by the `Error` component. If you wish to override it, define the file `pages/_error.js` and add the following code:
```jsx
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
```
> `pages/_error.js` is only used in production. In development you'll get an error with the call stack to know where the error originated from.
## Reusing the built-in error page
If you want to render the built-in error page you can by importing the `Error` component:
```jsx
import Error from 'next/error'
import fetch from 'isomorphic-unfetch'
const Page = ({ errorCode, stars }) => {
if (errorCode) {
return < Error statusCode = {errorCode} / >
}
return < div > Next stars: {stars}< / div >
}
Page.getInitialProps = async () => {
const res = await fetch('https://api.github.com/repos/zeit/next.js')
const errorCode = res.statusCode > 200 ? res.statusCode : false
const json = await res.json()
return { errorCode, stars: json.stargazers_count }
}
export default Page
```
The `Error` component also takes `title` as a property if you want to pass in a text message along with a `statusCode` .