--- description: Override and extend the built-in Error page to handle custom errors. --- # 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 (
{statusCode ? `An error ${statusCode} occurred on server` : 'An error occurred on client'}
) } 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