Custom pages/_error not rendered when exception in getInitialProps + custom _app + deployed to Vercel

[wilsonpage]

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

14

What browser are you using?

Chrome

What operating system are you using?

Mac

How are you deploying your application?

Vercel

Describe the Bug

When the following are true Next fails to render the custom pages/_error:

• Exception throw in MyPage.getInitialProps
• Custom MyApp.getIntialProps is defined
• App is deployed to Vercel

Expected Behavior

The error should be caught by Next and the custom pages/_error page should be rendered and passed props.err.

To Reproduce

Source: https://github.com/wilsonpage/nextjs-bug-get-initial-props-error-handling
Deploy: https://test-get-initial-props-error-wilsonpage.vercel.app/

1. Deploy to Vercel (or use above deployment)
2. Visit /?throwInGetInitialProps=1
3. Observe custom pages/_error is not rendered. Instead we see Vercel default 500: INTERNAL_SERVER_ERROR screen.

[wilsonpage]

This behaviour is inconsistent. Locally using next build && next start the error is handled and pages/_error is rendered as expected. The issue only seems to occur once deployed to Vercel.

It would be possible for me to wrap Component.getInitialProps() in a try-catch and render pages/_error myself, but this seems counter-intuitive.

[wilsonpage]

I've also added a way to force an error during serverside render phase:
https://test-get-initial-props-error-wilsonpage.vercel.app/?throwInServerRender=1

The result is the same, Vercel/Next don't render the custom pages/_error, instead the Vercel default error screen:

[vaniyokk]

Same problem for me.
Not deployed to Vercel, reproduced when after build and start server locally

[emzet93]

@wilsonpage @vaniyokk did you find a way to solve this issue somehow? I'm trying to setup Sentry and have exactly the same issue

[wilsonpage]

@emzet93 no, never found a solution and no-one from Next.js team has responded :(

[ijjk]

Hi, this appears to be a duplicate of #31594 and as mentioned there this is required due the way serverless functions must be exited. This can be achieved using pages/500, see the related documentation here https://nextjs.org/docs/advanced-features/custom-error-page#500-page

Note: if _app has getInitialProps you may have to add getStaticProps to pages/500 to ensure it is statically created correctly.

[wilsonpage]

Duplicate of #31594

[ludwighogstrom]

Hi, I also have a project that uses a custom pages/_error page (following the example here https://nextjs.org/docs/advanced-features/custom-error-page#more-advanced-error-page-customizing).

Just so I understand correctly: Custom pages/_error page must not be used when deploying to serverless Vercel, instead a custom pages/500 page should be used? Can't find anything in the documentation about that.

Right now I'm using the custom pages/_error page for:

• Custom design.
• To set different 5xx http status codes depending of what goes wrong.
• Loading different i18n depending on locale (via getInitialProps).
• Report error to Sentry.

Not sure if all of those can be achived with the pages/500 page?

[junheep-dev]

Hi, I'm also using Vercel and tried to use pages/500 and pages/_error together by following these comments.
However, if pages/500 exists, pages/500 takes precedence over pages/_error (e.g. throwing an error in App.getiniaipProps/ throwing an error in server-side rendering phase)

I want to use 500 page for recursive error(because we have to exit serverless process, we should use static page to break the recursive loop)
and _error for the rest of errors that can be handled by next.js.

I think it's not possible with next.js now.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.