Next.js getServerSideProps (throw Error) results in 404 instead of 500

Question

I have very basic setup, of getServerSideProps with Sentry error logging in Production on Vercel

export const getServerSideProps = async () => {
  // some api call
 if(error) {
  throw new Error("Something went wrong")
}
  return {
    props: {
       data
    }
  };
};

_error.js looks like this

import * as Sentry from '@sentry/nextjs'
import { NextPageContext } from 'next'
import NextErrorComponent, { ErrorProps as NextErrorProps } from 'next/error'

const CustomErrorComponent = (props: NextErrorProps) => {
  return <NextErrorComponent statusCode={props.statusCode} />
}

CustomErrorComponent.getInitialProps = async (contextData: NextPageContext) => {
  await Sentry.captureUnderscoreErrorException(contextData)

  
  console.log(contextData.res?.statusCode) // this shows as 404
  console.log(contextData.err?.statusCode) // this as undefined

  return NextErrorComponent.getInitialProps(contextData)
}

export default CustomErrorComponent

Please note if I run the same Prod build on my local machine I correctly see a 500: 'Internal Server Error' but on Vercel I see this as 404: 'This page could not be found'

How can I show this as 500 error on Vercel ?

I'm experiencing the same issue as you. Did you ever resolve? — Chris Smith, Dec 10 '22 at 08:13
could this error be reproducible? or would you care to share the source? — sungryeol, Feb 07 '23 at 21:38
Check if framework in vercel is correctly set to `Next.js` only, could be an error there. — Aahan Agarwal, Feb 10 '23 at 14:55

faebster · Answer 1 · 2023-03-01T14:41:11.463

First, I don't deploy at Vercel and don't know SEntry (well, just red part of the docs there). So it's more general thinking than expert knowledge of the tech stack you're using. (at least my Next.js is pretty ok hehe)

[1] Why aren't you interested in the response of:

await Sentry.captureUnderscoreErrorException(contextData)

Means you you agreee that Sentry captured error can differ from what you return (or is getInitialProps loading the current SEntry response? feels strange too)
If you don't need to await the response, then why await it? You could just fire and forget (way faster)
await belongs into a try{}catch(e){}, looks like your code could throw unexpected errors (which you don't want in prod runtime I assume.. e.g. on 404, when Sentry cannot be found) therefore also possible that something is wrong with the paths to Sentry, maybe it depends on a ENV which doesn't exist on server deployed app.

[2] The contextData you return is probably not the same as the contextData you send to SEntry, correct? (as you execute getInitialProps() after awaiting SEntry request.

getInitialProps AND getServerSideProps should be ok, but be aware that there are differences and getServerSideProps basically replaced the other (for most cases). and your issue could be related to the detail differences of the two (eventually).. Details: https://blog.logrocket.com/getinitialprops-vs-getserversideprops-nextjs/

More thoughts & findings:

I'm assuming you're using Next.js > 10.0.8 (Sentry support minimum) and are in the pages/ directory, not app/ (obviously)

And finally (much fun if this is the solution after writing a ton):

SEntry depends on Gson (version mattters!), this could eventually lead to a 404 I've read somewhere ^^

Did you configure SEntry manually? anyway, sure about the configs mentioned here (e.g. setDNS wrong probably = 404) https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

If the problem is still not solve, please provide config data: SEntry (client & server, strip secrets), Vercel, Next Config, etc. ENV's, e.g. setDNS for SEntry correct? etc.

Debug Mode activated? maybe more details in SEntry....options.setDsn("https://****@****.ingest.sentry.io/****"); options.setTracesSampleRate(1.0); options.setDebug(true); — faebster, Mar 01 '23 at 14:37

Next.js getServerSideProps (throw Error) results in 404 instead of 500

1 Answers1