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

  • Do you run start:production or start:connected? The first on does prevent starting of rendering container with broken pages. Mar 3 at 14:13
  • This is not only an issue locally but on Vercel as well during a proper build. It also occurs during revalidation. getStaticPaths does not think there is a failure because it isn't notified of one.
    – jrap
    Mar 3 at 15:38

1 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:

component error

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 ${
        }, 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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.