<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
feature</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
When a child throws an error inside an error boundary and hits it's <code class="notranslate">componentDidCatch</code> the error is still logged to the console regardless of any handling that you then do inside of your <code class="notranslate">componentDidCatch</code>.</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
Wouldn't it make more sense to give some more fine grated control over how errors get logged once they do bubble up all the way to an error boundary? My motivation for this is:</p>
<ul dir="auto">
<li>
<p dir="auto">When using an error logging service (rollbar, sentry, etc.) you normally don't really need/want your error to bubble through to the console in production.</p>
</li>
<li>
<p dir="auto">Testing an error boundary component feels a bit funky right now because for test runners like jest you have to mock jsDom's virtual console to suppress error showing up in your test results.</p>
</li>
<li>
<p dir="auto">The severity of an error caught by a specific error boundary might be just a warning, thus you would have to throw a console.warn along the already thrown error.</p>
</li>
<li>
<p dir="auto">When you try/catch outside of react you would also handle the logging in your catch by rethrowing a specific exception.</p>
</li>
</ul>
<p dir="auto">I wonder what your opinion is on this :)</p>
<hr>
<p dir="auto"><strong>(This is a repost of <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="262802629" data-permission-text="Title is private" data-url="https://github.com/jestjs/jest/issues/4597" data-hovercard-type="issue" data-hovercard-url="/jestjs/jest/issues/4597/hovercard" href="https://github.com/jestjs/jest/issues/4597">jestjs/jest#4597</a> by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/erikras/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/erikras">@erikras</a>.)</strong></p>
<hr>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Somewhere in between?</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">When I'm running tests on <a href="https://github.com/erikras/redux-form">my library</a>, there are some behaviors that I want to test <em>do</em> throw an error. These currently result in:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries at https://fb.me/react-error-boundaries."><pre class="notranslate"><code class="notranslate">Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries at https://fb.me/react-error-boundaries.
</code></pre></div>
<p dir="auto">...being output to the console. This error is great in an application, but not so great for a library test.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">It would be great if I could do something like:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="expect(() =&gt; {
  TestUtils.renderIntoDocument(&lt;DoSomething naughty/&gt;)
})
.toThrow(/Bad developer!/)
.andCatch() // &lt;---- prevents React 16 error boundary warning"><pre class="notranslate"><span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-v">TestUtils</span><span class="pl-kos">.</span><span class="pl-en">renderIntoDocument</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">DoSomething</span> <span class="pl-c1">naughty</span><span class="pl-c1">/</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-en">toThrow</span><span class="pl-kos">(</span><span class="pl-pds"><span class="pl-c1">/</span>Bad developer!<span class="pl-c1">/</span></span><span class="pl-kos">)</span>
<span class="pl-kos">.</span><span class="pl-en">andCatch</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c">// &lt;---- prevents React 16 error boundary warning</span></pre></div>
<p dir="auto"><strong>Please provide your exact Jest configuration and mention your Jest, node, yarn/npm version and operating system.</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="jest@21.2.1
react@16.0.0
react-dom@16.0.0"><pre class="notranslate"><code class="notranslate">jest@21.2.1
react@16.0.0
react-dom@16.0.0
</code></pre></div>
<p dir="auto"><strong>See also</strong></p>
<ul dir="auto">
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="262782704" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/11083" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/11083/hovercard" href="https://github.com/facebook/react/issues/11083">#11083</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="250734072" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/10474" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/10474/hovercard?comment_id=334164834&amp;comment_type=issue_comment" href="https://github.com/facebook/react/issues/10474#issuecomment-334164834">#10474 (comment)</a></li>
</ul>