Error Pages

Error Pages are served to web browsers when users visit your website and encounter an error. Adobe Experience Manager allows you to control the content and behavior of certain error pages, helping users find their way.

404 Errors

A 404 error occurs when the page or resource being requested doesn’t exist. This can happen for any number of reasons such as old and out of date bookmarks, bad links on external websites, or just a simple typo. If you move a page or otherwise restructure your website, you should create redirects to prevent this from happening if you can.

In AEM, your 404 page is served using the 404.html file at the root of your code repository. The version of this file in the AEM Boilerplate will display your branded header and footer, but you can customize the code and content of this page as you see fit.

You can monitor the 404 errors that occur using OpTel.

Customizing 404 Content with Fragments

When working with repoless sites, many sites that share a single codebase, you may need more control over the error content than can be provided by a single html file. The recommended way of handling this is to use a fragment that gets loaded in your 404 page, replacing the page’s main content with the fragment content.

In your scripts.js, add the following function, modifying the fragment path as needed for your site (it could also be dynamic based on things like site bulk metadata, etc.).

function loadErrorPage(main) {
  if (window.errorCode === '404') {
    const fragmentPath = '/fragments/404';
    const fragmentLink = document.createElement('a');
    fragmentLink.href = fragmentPath;
    fragmentLink.textContent = fragmentPath;
    const fragment = buildBlock('fragment', [[fragmentLink]]);
    const section = main.querySelector('.section');
    if (section) section.replaceChildren(fragment);
  }
}

Then, edit the loadEager function to call this before calling decorateMain

const main = doc.querySelector('main');
if (main) {
  if (window.isErrorPage) loadErrorPage(main);
  decorateMain(main);
  document.body.classList.add('appear');
  await loadSection(main.querySelector('.section'), waitForFirstImage);
}

This technique can be used for more than just repo-less sites. If you need to serve language specific 404 content, let authors control the content of the 404 page without developer interaction, or really any scenario where the 404 content can vary, fragments are the way to do that.