Endless loop when _error render throws on client side

[dorian-marchal]

Bug report

Describe the bug

When using a custom _error page, Next can enter an infinite loop if _error render throws on client side (with a production build).

To Reproduce

Repro here : https://github.com/dorian-marchal/next-repro/tree/repro-6973

In a terminal:

$ git clone -b repro-6973 https://github.com/dorian-marchal/next-repro
Cloning into 'next-repro'...

$ cd next-repro/

$ node -v
v10.14.1

$ npm install

$ npm ls next
[email protected] /tmp/next-repro
└── [email protected]

$ npm run build && npm run start
...
> Ready on http://localhost:3000

In your browser:

• Go to http://localhost:3000/
• Open your browser devtools
• Click on "Client side nav"
• See the app entering an endless loop (stopped after 20 iterations).

Expected behavior

On client side, if _error throws, I expect an "Internal Error" page (this is what happens when _error throw during server side rendering).

I suppose that Next could force a page reload in this case.

System information

• OS: Ubuntu 18.04
• Version of Next.js: 8.0.4

Additional context

In our project, this error happens when _error getInitialProps fails to retrieve some dependencies (Error.render tries to access an undefined property).

[dorian-marchal]

Possible workaround, using an error boundary: https://github.com/dorian-marchal/next-repro/blob/workaround-6973/pages/_error.js

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return "Internal Error.";
    }

    return this.props.children;
  }
}

const ErrorTemplate = () => {
  // ReferenceError: foo is not defined.
  foo;
  return "OK";
};

class Error extends React.Component {
  render() {
    return (
      <ErrorBoundary>
        {/* If ErrorTemplate throws, the boundary will catch it. */}
        <ErrorTemplate {...this.props} />
      </ErrorBoundary>
    );
  }
}

[armenr]

^ We are running into this same error on our side. The workaround provided doesn't appear to be working for us, when we implement it verbatim.

[MarcusBondezan]

Same error here. None of the solutions above did the trick for me =/

[dan-fein]

This is a really worrisome bug. Happens to me on every single error.

[timneutkens]

Well it's not super worrisome, you're customizing the error page and introducing another error (runtime error) into it, which is more like a pretty big edge case. We'll fix it though (or you're welcome to open a PR).

[Oikio]

v9.4.2, still happens.

[grefrit]

9.5.3 not fixed

[MyCupOfTeaOo]

v10.0.1, still happens.

[wjd3]

Happens in 10.0.5 in production (deployed to Vercel) when calling .includes() on a variable that's missing server-side data.

I actually don't have a custom /_error page, but this was the only existing issue that resembles what I'm experiencing. It matches in every way except for the use of custom /_error.

[CharlestonREM]

Happens in 10.0.5 in production (deployed to Vercel) when calling .includes() on a variable that's missing server-side data.

I actually don't have a custom /_error page, but this was the only existing issue that resembles what I'm experiencing. It matches in every way except for the use of custom /_error.

@dayvista , i think i'm running into this issue in my nextjs app. could you post one of your examples of calling .includes() on a variable that's missing server-side data?

[wjd3]

@CharlestonREM unfortunately that was many iterations ago in a private repo at my last job. I recall that I solved the issue by structuring the code like:

serverSideData?.includes('some string')

instead of:

serverSideData.includes('some string')

That way, if the server side data == null, then the function evaluates to false instead of throwing an error.

[wjd3]

@CharlestonREM you could also use a server side data caching library like SWR and check if isLoading === false before calling .includes()

[tarasov-gk]

in Next 10.0.1 is still happens.

[Abhishek-Sati]

next version: 12.0.2
node version: 17.0.1
On client-side rendering when routing happens, and the page has some error then _error page goes into an infinite loop.

[huozhi]

@Abhishek-Sati can you open a new issue with a reproduction? We can investigate it, thanks!

[kvet]

Got similar issue with the swcMinify: true configuration in [email protected] and [email protected]

[WinnersProx]

Got similar issue with the swcMinify: true configuration in [email protected] and [email protected]

Getting the exact same error too

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.