Next.js Discord

Discord Forum

Can We Display Error Message Detail on Error 500 Page?

Answered
Sun bear posted this in #help-forum
Open in Discord
Sun bearOP
Anyway I'm still using page directory, and I use both file 500.tsx and _error.tsx. The problem is when it occurs, I don't get any error details in production simply because i don't know how to display it. How to?

Another question, can I make it hit some endpoints when occurs?
Answered by Ray
have you tried this in _error.tsx?
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
  console.log(err)
  if (err) fetch("")
  return { statusCode }
}
 
export default Error
View full answer

5 Replies

@Sun bear Anyway I'm still using page directory, and I use both file 500.tsx and _error.tsx. The problem is when it occurs, I don't get any error details in production simply because i don't know how to display it. How to? Another question, can I make it hit some endpoints when occurs?
Ray
have you tried this in _error.tsx?
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
  console.log(err)
  if (err) fetch("")
  return { statusCode }
}
 
export default Error
Answer
Sun bearOP
let me try it first, I'll ask again if either the error message doesn't exist or cannot hit the endpoint. Thank you in advance
@Ray and remove 500.tsx if you use _error.tsx
Sun bearOP
I want to appreciate it because the code you provided is very insightful. I didn't remember that getInitialProps can return err.

All your suggests work on me, thank you sir!
And anyway this is my solution code (in typescript)
ErrorPage.getInitialProps = ({ res, err }: NextPageContext) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  console.log("errorDetail::", err);
  return {
    statusCode: statusCode,
    err: err ?? null,
  }
}

this will return two pageProps: statusCode and err, because i need functional react component for some reason. So I define the page function like this:
function ErrorPage({
  statusCode,
  err,
}: {
  statusCode: number;
  err: (Error & { statusCode?: number | undefined; }) | null;
}) {
  // your page component
}

Next I just make a button that trigger to hit my endpoint, (or I just add useEffect so I don't need that button anymore)