Entire app remounts on error

Bug report

Describe the bug

I’m not sure if this is intentional or not, but it seems undesirable at least. This is in production mode.

When an error occurs during rendering, triggering Next.js’ error boundary, the entire <App> component remounts. This is counter to what I think the developer’s expectation is, which is that <App> is only mounted once and remains mounted for the entire duration.

I can’t think of a good reason this would be intentional. It seems more likely that the tree above <App> changes in some incidental way, such that React can no longer update the existing element instances but remounts them instead. For example:

<SomeContainer>                 <OtherContainer>
  <App>                           <App>
    <Page />   -- on error -->      <Page />
  </App>                          </App>
</SomeContainer>                </OtherContainer>

or:

                              <ErrorContainer>
<App>                           <App>  
  <Page />   -- on error -->      <Page />
</App>                          </App>
                              </ErrorContainer>

The downside is that code people expected to mount only once (potentially expensive initialization, recreating things that don’t need to be recreated, etc.) can happen multiple times.

To Reproduce

This repo demonstrates the issue: https://github.com/exogen/next-error-remount

Clicking the button will logs what is being unmounted.

Expected behavior

Transition to the error state should be just like transitioning pages: the <Page> should unmount and the <Error> should mount, but the <App> should remain mounted.

System information

• Version of Next.js: 8.0.4, 8.1.0, canary

[ericbiewener]

Nevermind, an <ErrorBoundary> does successfully catch the error. See the with-error-boundary branch here.

Therefore, everything appears to work correctly in my opinion. I don’t ultimately agree with the original post that <App> should not unmount when an error in a component’s render method occurs. This isn’t really a Next.js decision, but just how React works – everything up to an ErrorBoundary will unmount. It can’t just keep the same <App> mounted with the same props because that will just cause the error to get thrown again.

[Benimation]

This is especially fun when the error is caused by an effect in App that’s only supposed to run on mount… Creating an infinite loop…

The solution, of course, is to handle the error, but this was indeed very unexpected…