Content Managed 404 and 500 Error pages for in Sitecore XMCoud

In web development, providing users with a seamless experience, even when things go wrong, is crucial. Properly managed error pages, like the 404 "Page Not Found" and 500 "Internal Server Error" pages, play a significant role in maintaining user engagement. In Sitecore XMCloud, you can manage these error pages content dynamically, ensuring that they are always up-to-date with your brand's messaging. This blog will guide you through setting up content-managed 404 and 500 error pages in Sitecore XM Cloud.

1. Creating 404 and 500 Page Items in the Content Tree

To start, you need to create the 404 and 500 error page items within your Sitecore content tree. These items should be placed inside the Home node, aligning them with the rest of your website's content structure.

1. Navigate to the Content Editor: Open the Content Editor in Sitecore XM Cloud.
2. Locate the Home Node of Site: Find the Home node in the content tree of site.
3. Create 404 and 500 Pages:

• Right-click on the Home node and select Insert -> Page.
• Name them 404 and 500.
• Fill in the necessary fields, such as the page title, meta description, and content. These pages should communicate clearly what went wrong and provide users with options to navigate back to a functional part of the site.

2. Configuring Error Handling in Sitecore

Once your error pages are created, you need to configure the error handling settings in Sitecore to ensure these pages are displayed when errors occur.

1. Navigate to the Error Handling Section:

• Go to /sitecore/content/[your site]/Settings/ or the relevant settings location in your project.
• Find the Error Handling section within your settings item.

2. Set the Error Page Links:

• In the Page Not Found Link field, select the 404 page item you created earlier.
• In the Server Error Page Link field, select the 500 page item.

By setting these fields, Sitecore will know which pages to serve when a 404 or 500 error occurs, directing users to the content-managed error pages.

3. Handling Errors in Next.js Starter Kit

The Next.js Starter Kit for supports Sitecore integrates with these custom error pages through its robust error handling mechanism. Specifically, the 404.tsx and 500.tsx files in the Starter Kit utilize the GraphQLErrorPagesService to manage these errors effectively.

• GraphQLErrorPagesService: This service queries Sitecore using GraphQL to fetch the content for the 404 and 500 error pages. By doing so, it ensures that the error pages served are content-managed and can be updated without developer intervention.
• Customizing Error Pages:

1. Modify the 404.tsx and 500.tsx files to fetch and display content from your Sitecore 404 and 500 error pages.
2. These files are responsible for rendering the error page components, making sure that even when an error occurs, the user is presented with a fully content-managed and dynamic page.

For more details on customizing these static error pages, refer to the Sitecore XM Cloud documentation. This guide offers an in-depth look at configuring error pages and handling errors efficiently within the XM Cloud environment.

Note: 500 does not work consistently. This is only tested on locale setup with some tweaks to verify.