Next.js Discord

Discord Forum

react-error-boundary in pages Next.js

Unanswered
Sloth bear posted this in #help-forum
Open in Discord
Sloth bearOP
Hi, I wanted to wrap each section of my app with error boundary.

I did it like that:
const ContentRenderer = ({ sections }: Props) => {
  return (
    <>
      {sections.map((section) => {
        const key = `${section.id}-${section.type}`;

        return (
          <ErrorBoundary
            key={key}
            onError={(error, info) => console.error("Section couldn't be rendered", error, info)}
            fallbackRender={({ error }) => <div>error</div>}
          >
            <SectionRenderer section={section} />
          </ErrorBoundary>
        );
      })}
    </>
  );
};


Inside SectionRenderer component there is a switch that renders correct section and inside one of them error is thrown. After that Next.js just shows a 500 page or error in dev mode instead of the fallback from error boundary.

Am I using it correctly? Does that should even work? Is there a known bug in Next.js regarding that?

Next.js version: 13.5.4

1 Reply

Sloth bearOP
To be more precise, the error is during rendering phase
const NewCollectionSection = ({ image, logo, products, ...rest }: NewCollectionSectionProps) => {
  throw new Error('test error');
  return (
    <Section {...rest}>
      <Flex
        justifyContent="space-between"
        flexDir={{
          base: 'column',
          lg: 'row',
        }}
...