<p dir="auto">We are using the custom <code class="notranslate">_error.js</code> page, and we're seeing an issue where anything other than a <code class="notranslate">404</code> from a server error is rendering the error page twice.</p>
<p dir="auto">It looks like it's rendering once on the server (the render HTML only has 1 error page), but also rendering an <em>additional</em> error page on the client.</p>
<p dir="auto">I'm not sure if this is a bug, or if there is something wrong with the way we're handling the error (we're letting next handle the uncaught error). Any guidance would be appreciated.</p>
<p dir="auto">I've created an example that replicates the issue here:</p>
<p dir="auto"><a href="https://github.com/kochis/next.js/tree/duplicate-error-example/examples/duplicate-error-pages">https://github.com/kochis/next.js/tree/duplicate-error-example/examples/duplicate-error-pages</a></p>
<p dir="auto"><strong>Screenshot</strong></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/814934/30785818-acb889ce-a13a-11e7-96df-4f026d142889.png"><img src="https://user-images.githubusercontent.com/814934/30785818-acb889ce-a13a-11e7-96df-4f026d142889.png" alt="screen shot 2017-09-24 at 3 11 20 pm" style="max-width: 100%;"></a></p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">1 error component is rendered</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">2 error components are rendered below eachother. 1 through SSR and 1 through client side rendering.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="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 (
      &lt;div&gt;
        &lt;h1&gt;Hello world&lt;/h1&gt;
      &lt;/div&gt;
    )
  }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">Link</span> <span class="pl-k">from</span> <span class="pl-s">'next/link'</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span>
  <span class="pl-k">static</span> <span class="pl-k">async</span> <span class="pl-en">getInitialProps</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
   <span class="pl-c">// Just throw an error in getInitialProps</span>
    <span class="pl-k">throw</span> <span class="pl-k">new</span> <span class="pl-v">Error</span><span class="pl-kos">(</span><span class="pl-s">'test'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>Hello world<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<h2 dir="auto">Context</h2>
<p dir="auto">Issue can be seen here: <a href="https://create-next-example-app-olyuogqcxe.now.sh/" rel="nofollow">https://create-next-example-app-olyuogqcxe.now.sh/</a> (deployment with the above code). Scroll down cause the component itself is screen filling <g-emoji class="g-emoji" alias="sweat_smile" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f605.png">😅</g-emoji></p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/harshmaur/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/harshmaur">@harshmaur</a> surfaced this.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>2.x+ (so beta too)</td>
</tr>
<tr>
<td>mode</td>
<td>production</td>
</tr>
</tbody>
</table>