Next.js, Pages Still Generated When Components Error

Question

We have a Next.js implementation on Vercel connected to Experience Edge. We noticed that when components error out, the page that contains the component is still generated. This results in public-facing pages with chunks of missing content. Next.js builds the entire page but where the component is supposed to go is entirely blank.

Instead of considering a page valid, we instead want the page to fail validation and not generate/regenerate. At times the failure is mundane, such as the connection to Edge getting dropped momentarily. Instead of generating a half-baked version of the page, we would much prefer to keep the original copy of the page up.

Next.js revalidation is supposed to work this way. When it experiences an error, it should not validate a page, but with the Sitecore Next.js SDK it does.

Is it possible to skip validating a page when a component errors?

Sitecore-jss-nextjs: ^20.1.3

Next: ^12.3.3

Answer 1

It is correct that getStaticProps DOES in fact not validate a page that it receives an error on. The issue is that Sitecore swallows the errors that occur within components:

Therefore, when getStaticProps finishes executing the page, it assumes all is well and thus you get a page with missing content/components.

Luckily, this is easily solvable because the error is accessible in the componentProps property of props. Also, since getStaticProps implements the SitecorePagePropsFactory, we can add an additional plugin without disturbing the existing code.

Add the following code under

• lib
  • page-props-factory
    • plugins

Name: fail-on-component-error.ts

import { SitecorePageProps } from 'lib/page-props';
import { Plugin } from '..';

class FailOnComponentErrorPlugin implements Plugin {
  order = 2;

  async exec(props: SitecorePageProps) {
    const componentErrors = Object.keys(props?.componentProps ?? {})
      ?.filter((component) => (props?.componentProps?.[component] as { error: string })?.error)
      .map((key) => `${key}: ${(props?.componentProps?.[key] as { error: string })?.error}`);

    if (componentErrors.length > 0) {
      throw new Error(
        `[GET STATIC PATHS]. An error occurred processing ${
          props?.layoutData?.sitecore?.route?.name
        }, message: ${componentErrors.join(' .. ')}`
      );
    }

    return props;
  }
}

export const failOnComponentErrorPlugin = new FailOnComponentErrorPlugin();

This code will cycle through the componentProps collection to find any components that are outputting an error. It then concatenates the unique rendering ID's and error messages into a single output.

This will not only stop builds from succeeding on errors, but also revalidation (ISR or On-Demand Revalidation).