How to utilize custom Nextjs _error.tsx page to catch 500 errors?

Help
1

I have a custom _error.tsx page in in my nextjs project to show 500 errors and to log the errors to Sentry. It works locally when I run the project in production mode with next build + next start, but whenever I deploy the app to Vercel I get a generic “EDGE_FUNCTION_INVOCATION_FAILED” error page whenever the app encounters 500 errors - effectively bypassing my custom error page:

Screenshot 2024-11-26 at 11.43.41
Screenshot 2024-11-26 at 11.43.411238×1046 63.4 KB

In above case the an error was thrown in middleware.ts.

My custom _error.tsx page:

import { type GetServerSideProps } from 'next'

function Error({ statusCode }) {
  return <p>{statusCode ? `An error ${statusCode} occurred on server` : 'An error occurred on client'}</p>
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  // Log to Sentry here
  return {
    props: { statusCode: context.res.statusCode },
  }
}

export default Error

How can I get this error page to work in Vercel?

2

Hi, @hermantorjussen-ngnn! Welcome to the Vercel Community :smile:

Could you try creating making the following changes?

For general 500 errors, create a pages/500.js file :

export default function Custom500() {
  return <h1>500 - Server-side error occurred</h1>
}

For advanced error handling and Sentry logging, use pages/_error.js :

import * as Sentry from '@sentry/nextjs'

const CustomError = ({ statusCode }) => (
  <p>{statusCode ? `Error ${statusCode} occurred on server` : 'Error occurred on client'}</p>
)

CustomError.getInitialProps = async (contextData) => {
  await Sentry.captureUnderscoreErrorException(contextData)
  return { statusCode: contextData.res?.statusCode || 404 }
}

export default CustomError

For middleware errors, catch them in the middleware itself:

export function middleware(request) {
  try {
    // Your middleware logic
  } catch (error) {
    console.error('Middleware error:', error)
    return NextResponse.redirect(new URL('/500', request.url))
  }
}

These changes should help you handle both regular 500 errors and middleware errors on Vercel. Give it a shot and let me know if you need any more help!