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
next-repro@1.0.0 /tmp/next-repro
└── next@8.0.4

$ 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).