Error component rendered 2 times when server rendering in production

Expected Behavior

1 error component is rendered

Current Behavior

2 error components are rendered below eachother. 1 through SSR and 1 through client side rendering.

Steps to Reproduce (for bugs)

import Link from 'next/link'

export default class extends React.Component {
  static async getInitialProps() {
   // Just throw an error in getInitialProps
    throw new Error('test');
  }
  render() {
    return (
      <div>
        <h1>Hello world</h1>
      </div>
    )
  }
}

Context

Issue can be seen here: https://create-next-example-app-olyuogqcxe.now.sh/ (deployment with the above code). Scroll down cause the component itself is screen filling 😅

@harshmaur surfaced this.

Your Environment

Tech	Version
next	2.x+ (so beta too)
mode	production

[kochis]

I believe this was introduced in https://github.com/zeit/next.js/pull/1800

And the problem code is here: https://github.com/zeit/next.js/blob/v3-beta/server/render.js#L114

If there is an error on the server, it’s sent to the client through the err prop, which is what the client is using to determine whether it should render the error page: https://github.com/zeit/next.js/blob/master/client/index.js#L96

So it seems like any uncaught exception will render both server & client error pages. I’m not sure what the correct behavior for this should be, but one solution I could think of would be to add .ignore to the error object created server-side.

[lock[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.