<p dir="auto">This is related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="47678610" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/2461" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/2461/hovercard" href="https://github.com/facebook/react/issues/2461">#2461</a>. Essentially if we wrap a render call in a try catch this works the first time. It seems like when <code class="notranslate">React.render</code> is called a second time (the update case) it does not work. It seems that  <code class="notranslate">React.render</code> is async when updating an existing component tree.</p>
<p dir="auto">I may be missing something but it seems like this leaves no way for developers to catch errors when rendering children components.</p>
<p dir="auto">I have a JSBin demoing this issue here: <a href="http://jsbin.com/mifedepada/edit?js,console,output" rel="nofollow">http://jsbin.com/mifedepada/edit?js,console,output</a></p>
<p dir="auto">So I'm trying to put some graceful error handling in case 1 of my views crap out:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var MyGoodView = React.createClass({
  render: function () {
    return &lt;p&gt;Cool&lt;/p&gt;;
  }
});

var MyBadView = React.createClass({
  render: function () {
    throw new Error('crap');
  }
});

try {
  React.render(&lt;MyBadView/&gt;, document.body);
} catch (e) {
  React.render(&lt;MyGoodView/&gt;, document.body);
}"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-v">MyGoodView</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createClass</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-en">render</span>: <span class="pl-k">function</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-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>Cool<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">var</span> <span class="pl-v">MyBadView</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createClass</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-en">render</span>: <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</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">'crap'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">try</span> <span class="pl-kos">{</span>
  <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-v">MyBadView</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</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-v">React</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-v">MyGoodView</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">However, <code class="notranslate">MyGoodView</code> does not get rendered w/ the following stack trace:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/fd284309818d836a1305ff759d73533cd3b2e9668c4a179d0e76c1b975190cc4/687474703a2f2f662e636c2e6c792f6974656d732f304733643373314734353270336731713054326a2f53637265656e25323053686f74253230323031342d31312d3034253230617425323031322e31312e3433253230414d2e706e67"><img src="https://camo.githubusercontent.com/fd284309818d836a1305ff759d73533cd3b2e9668c4a179d0e76c1b975190cc4/687474703a2f2f662e636c2e6c792f6974656d732f304733643373314734353270336731713054326a2f53637265656e25323053686f74253230323031342d31312d3034253230617425323031322e31312e3433253230414d2e706e67" alt="stack trace" data-canonical-src="http://f.cl.ly/items/0G3d3s1G452p3g1q0T2j/Screen%20Shot%202014-11-04%20at%2012.11.43%20AM.png" style="max-width: 100%;"></a></p>
<p dir="auto">Seems like error throw React in a bad state where <code class="notranslate">renderedComponent</code> is <code class="notranslate">undefined</code>, thus cannot be unmounted. How do I handle this scenario?</p>