Custom 500 page not showing on client errors

[ghost]

When using your host redirect, NEXT.js is just showing an empty page instead of the custom 500 error page when a client error occur. Server side errors works as expected and is showing the custom 500 error page.

Next version 11.0.1
Node version 12.16.1

next.config.js

// Rewrites based on: https://github.com/acorcutt/next-multi-host
// Issue: https://github.com/vercel/next.js/discussions/12848
const moduleExports = {
	async rewrites() {
		return {
			afterFiles: [
				{
					has: [
						{
							type: 'host',
							value: '(?<host>.*)',
						},
					],
					source: '/',
					destination: '/hosts/:host',
				},
				{
					has: [
						{
							type: 'host',
							value: '(?<host>.*)',
						},
					],
					source: '/:path*',
					destination: '/hosts/:host/:path*',
				}
			],
		};
	},
	sassOptions: {
		includePaths: ['.'],
	},
	productionBrowserSourceMaps: true,
	webpack: (config) => {
		// Add SVGR Loader
		config.module.rules.push({
			test: /\.svg$/,
			use: ["@svgr/webpack", 'url-loader']
		});

		return config
	},
}

module.exports = moduleExports;

_error.tsx

import logger from 'utilities/logger';
import { NextPageContext, NextPage } from 'next';
import Custom500 from './Custom500';

const MyError: NextPage = () => (
	<Custom500 />
);

MyError.getInitialProps = async ({ res, err }: NextPageContext) => {
	const statusCode = res ? res.statusCode : err ? err.statusCode : 404;

	if (statusCode) {
		logger.error(`An error ${statusCode} occurred on server: ${err}`);
	} else {
		logger.error(`An error occurred on client: ${err}`)
	}

	return { statusCode }
}

export default MyError

Custom500.tsx

const Custom500: React.FC = () => {
	return <h1>500 - Server-side error occurred</h1>
}

export default Custom500;

As seen below, the log from getInitalProps inside _error.tsx is used, but still not showing the Custom500.tsx. Is it the host redirect that is causing the client to be unable to find the Custom500.tsx page?

[acorcutt]

I'm seeing something different... I've just added a custom error page to the example this is working locally but not on Vercel where it looks like the error is getting caught in the Serverless function when it does the pre-render.

Have you tried the simpler /pages/500.js method?

[acorcutt]

The getInitialProps on the _error page could be conflicting with getStaticProps on the pages maybe a static error page would be best and try catching and logging the errors from the other pages.

[ghost]

Thank you for a quick response. I couldn't replicate the issue with your repo (maybe should have tried that before creating the issue..). With some trial and error and found out that my redux and redux persist setup was somehow suppressing the error. After using the next-redux-wrapper instead, it is now working.