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