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

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

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

My custom _error.tsx page:

1import { type GetServerSideProps } from 'next'23function Error({ statusCode }) {4  return <p>{statusCode ? `An error ${statusCode} occurred on server` : 'An error occurred on client'}</p>5}67export const getServerSideProps: GetServerSideProps = async (context) => {8  // Log to Sentry here9  return {10    props: { statusCode: context.res.statusCode },11  }12}1314export default Error

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

Hi, ! Welcome to the Vercel Community 😄

Could you try creating making the following changes?

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

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

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

1import * as Sentry from '@sentry/nextjs'23const CustomError = ({ statusCode }) => (4  <p>{statusCode ? `Error ${statusCode} occurred on server` : 'Error occurred on client'}</p>5)67CustomError.getInitialProps = async (contextData) => {8  await Sentry.captureUnderscoreErrorException(contextData)9  return { statusCode: contextData.res?.statusCode || 404 }10}1112export default CustomError

For middleware errors, catch them in the middleware itself:

1export function middleware(request) {2  try {3    // Your middleware logic4  } catch (error) {5    console.error('Middleware error:', error)6    return NextResponse.redirect(new URL('/500', request.url))7  }8}

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!