<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">While running in production mode, throwing an unhandled exception during <code class="notranslate">getInitialProps</code> should re-throw during <code class="notranslate">renderToHTML</code></p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">when rendering a route using <code class="notranslate">renderToHTML</code> and an unhandled exception is throw in <code class="notranslate">getInitialProps</code>, <code class="notranslate">renderToHTML</code> should re-throw the error.</p>

<p dir="auto">In many cases with a custom server (see SSR Caching example) you want to cache the HTML after it is generated. This is a common use case for <code class="notranslate">renderToHTML</code>. However, if an unhandled exception is thrown during that process, the HTML is still returned.</p>
<p dir="auto"><em>desired behavior</em></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" try {
      const html = await app.renderToHTML(req, res, '/some-route', params);
      // cache
      doSomeCaching(html);
      // send
      res.send(html);
    } catch (e) {
      // Something happened during the render, pass it up the chain
      next(e);
    }"><pre class="notranslate"> <span class="pl-k">try</span> <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-s1">html</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">renderToHTML</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">,</span> <span class="pl-s">'/some-route'</span><span class="pl-kos">,</span> <span class="pl-s1">params</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-c">// cache</span>
      <span class="pl-en">doSomeCaching</span><span class="pl-kos">(</span><span class="pl-s1">html</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-c">// send</span>
      <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-en">send</span><span class="pl-kos">(</span><span class="pl-s1">html</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span> <span class="pl-k">catch</span> <span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-c">// Something happened during the render, pass it up the chain</span>
      <span class="pl-en">next</span><span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span></pre></div>

<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto">Here is a repository with a barebones recreation. Running under production mode, I would expect this method to catch errors.<br>
<a href="https://github.com/bringking/error-example-nextjs/blob/master/server.js#L40">https://github.com/bringking/error-example-nextjs/blob/master/server.js#L40</a></p>
<h2 dir="auto">Context</h2>

<p dir="auto">What I was trying to accomplish is any unhandled exception thrown during server render would trigger an express error handler and render the <code class="notranslate">_error.js</code> page.</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>4.1.4</td>
</tr>
<tr>
<td>node</td>
<td>8.9.0</td>
</tr>
<tr>
<td>OS</td>
<td>MacOS</td>
</tr>
<tr>
<td>browser</td>
<td></td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">The page state is not reset for navigation between dynamic routes that served by the same source component.</p>
<p dir="auto">for example, give page source <code class="notranslate">/a/[param]/index.js</code>, when navigating from <code class="notranslate">/a/1</code> to <code class="notranslate">/a/b</code>, states on the page won't' be reset.</p>
<p dir="auto">The causing is that for this kind of navigation, what actually happened is the same React Component been rendered with different <code class="notranslate">props</code>. Thus react takes it as a component is rerendering itself, and causing the new navigated page receive stale states.</p>
<p dir="auto">To fix it, just add <code class="notranslate">{key: &lt;composed base on URL routing params&gt; }</code> to page initial props.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">I've created a live example:</p>
<p dir="auto"><a href="https://codesandbox.io/s/next-bug-dynamic-route-not-rerender-qf0r0?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow"><img src="https://camo.githubusercontent.com/90808661433696bc57dce8d4ad732307b5cec6270e6b846f114dcd7ee7f9458a/68747470733a2f2f636f646573616e64626f782e696f2f7374617469632f696d672f706c61792d636f646573616e64626f782e737667" alt="Edit next-bug-dynamic-route-not-rerender" data-canonical-src="https://codesandbox.io/static/img/play-codesandbox.svg" style="max-width: 100%;"></a></p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">Page should be fully reloaded and states should be reset.</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto">N/A</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: ALL</li>
<li>Browser: ALL</li>
<li>Version of Next.js: 9.1.6</li>
</ul>
<h2 dir="auto">Additional context</h2>