How to redirect to 500 pages when I get 400, 401, and 403 error code

Question

Have configured 404 and 500 error pages in SXA XM Cloud. I have a requirement to redirect 400, 401, and 403 error codes to same 500 error page. I have created redirect item and added as below. But when I'm getting bad request it's not redirecting to the 500 error page:

Answer 1

To handle 400, 401, and 403 error codes and redirect them to the 500 error page, create an _error.tsx file in your Next.js application.

Additionally, you can modify the Next.js logic with custom code to handle these error codes and redirect users to the 500 error page accordingly.

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import Error from 'src/pages/_error';

interface PageProps {
  errorCode?: number;
  text?: string;
}

const Page: React.FC<PageProps> = ({ errorCode, text }) => {
  const router = useRouter();

  useEffect(() => {
    // If errorCode is 401, 400, or 403, redirect to the 500 page
    if (errorCode === 401 || errorCode === 400 || errorCode === 403) {
      router.push('/500');
    }
  }, [errorCode, router]);

  // If there's an error code, render the Error component
  if (errorCode) {
    return <Error statusCode={errorCode} />;
  }

  // Otherwise, render the content
  return <div>Content: {text}</div>;
};

export default Page;

Hope this helps

Answer 2

As per the XM Cloud documentation you can handle all the error except 404 page using _error.tsx file in your Next.js application.

Reference link: https://doc.sitecore.com/xmc/en/developers/jss/22/jss-xmc/error-pages-in-the-jss-next-js-sample-app.html#the-500-error-page

And also need to set 500 page (in my case _500) in you site settings node (Error handling section):

Hope this can help.