title: Next.js & Axios - Forward statusCode 500 from an Axios request to Next.js
body: <p>how can I forward a statusCode from an Axios request to next.js?</p>
  
  <p>Does the error object need to be passed through an axios promise consumer (<code>.catch(error=&gt; { ... })</code>) to next.js? If yes, how? Without the <code>.catch</code> consumer I get the server side error <code>UnhandledPromiseRejectionWarning: Error</code> and Next.js doesn't automatically catch the error to throw a styled error page.</p>
  
  <p>I also overrode the next/error component by adding the custom component to pages/_error.tsx.
  (<a href="https://nextjs.org/docs/advanced-features/custom-error-page#customizing-the-error-page" rel="nofollow noreferrer">Docs - Customizing The Error Page</a>) and it worked before with statucode 404.</p>
  
  <pre><code>import React, { ReactElement } from 'react'
  
  import ErrorPage from '@templates/ErrorPage'
  import { PageContext } from '@pages/_app'
  
  interface Props {
    statusCode: number
  }
  
  function Error({ statusCode }: Props): ReactElement {
    return &lt;ErrorPage /&gt;
  }
  
  Error.getInitialProps = ({ res, err }: PageContext) =&gt; {
    const errorStatusCode = err ? err.statusCode : 404
    const statusCode = res ? res.statusCode : errorStatusCode
  
    return { statusCode }
  }
  
  export default Error
  </code></pre>
  
  <p>Furthermore, the request function is written into a helper file, which imports axios.</p>
  
  <pre><code>import axios from 'axios'
  
  export function request(requestObject) {
    const { method, url, data } = requestObject
  
    ...
  
    const requestData = { ... }
  
    ...
  
    return axios({
      url,
      method,
      data: method !== 'get' ? requestData : null,
      params: method === 'get' ? requestData : null,
    })
      .then(res =&gt; {
  
        ...
  
        return response
      })
      .catch(
        (error: Error) =&gt;
        {
          throw error
        }
      )
  }
  </code></pre>
  
  <p>Somehow the Next.js's React Error Boundary doesn't catch the statuscode 500 Error.</p>
  
  <p>The entry in the docs to a 500 Page: <a href="https://nextjs.org/docs/advanced-features/custom-error-page#500-page" rel="nofollow noreferrer">Link</a></p>
  
  <blockquote>
    <h1>500 Page</h1>
    
    <p>By default Next.js provides a 500 error page that matches the default 404 page’s style. This page is not statically optimized as it allows server-side errors to be reported. This is why 404 and 500 (other errors) are separated.</p>
  </blockquote>
  
  <p>And yes, I also tried it with a built (production).</p>
  
  <p>Any ideas? Thank you in advance!</p>