<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
I want to request a <em>feature</em>.</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<ul dir="auto">
<li>
<p dir="auto">Warning code is hardcoded to call <code class="notranslate">fbjs/lib/warning</code>. This makes it hard to integrate warnings with tools.</p>
</li>
<li>
<p dir="auto">As a workaround we could use webpack’s <code class="notranslate">resolve.alias</code> to alias <code class="notranslate">fbjs/lib/warning</code> into our fork which displays it on-screen.</p>
<ul dir="auto">
<li>This use case is similar to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="167784727" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/7360" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/7360/hovercard" href="https://github.com/facebook/react/pull/7360">#7360</a>.</li>
</ul>
</li>
<li>
<p dir="auto">Another use case is to integrate React warnings with our testing infrastructure. This helps us to better see which warning belongs to which test.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/193136/27680560-587f934a-5ce6-11e7-985b-a1a2042d831a.png"><img src="https://user-images.githubusercontent.com/193136/27680560-587f934a-5ce6-11e7-985b-a1a2042d831a.png" alt="image" style="max-width: 100%;"></a></p>
</li>
</ul>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<ul dir="auto">
<li>React allows library user to override the default warnings behavior.</li>
</ul>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<ul dir="auto">
<li>
<p dir="auto">The workaround works in React 15 and should still work in React 16, as the flat bundles does <code class="notranslate">var warning = require('fbjs/lib/warning')</code> which means we can still hook into it for now.</p>
</li>
<li>
<p dir="auto">This probably breaks when the flat bundles stopped doing <code class="notranslate">var warning = require('fbjs/lib/warning')</code>.</p>
</li>
</ul>
<p dir="auto">I'd like to configure my testsuite to fail if there are any react warnings triggered.</p>
<p dir="auto">I'm currently using a variant on this SO answer <a href="http://stackoverflow.com/questions/29651950/karma-and-react-have-warnings-to-cause-errors" rel="nofollow">http://stackoverflow.com/questions/29651950/karma-and-react-have-warnings-to-cause-errors</a></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="console.warn = (function(warn) {
  return function(msg) {

    // Detect react warnings &amp; error
    if (/^Warning: /.test(msg)) {
      throw new Error(&quot;React &quot; + msg);
    }

    return warn.apply(this, arguments);
  };
})(console.warn);"><pre class="notranslate"><span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-c1">warn</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">warn</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">msg</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

    <span class="pl-c">// Detect react warnings &amp; error</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">^</span>Warning: <span class="pl-c1">/</span></span><span class="pl-kos">.</span><span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s1">msg</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">"React "</span> <span class="pl-c1">+</span> <span class="pl-s1">msg</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-s1">warn</span><span class="pl-kos">.</span><span class="pl-en">apply</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">,</span> <span class="pl-smi">arguments</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-kos">(</span><span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-c1">warn</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">This basically works, but has a problem because there's some global-state memoisation in the code which triggers warning to try not to trigger too often:<br>
</p><div class="Box Box--condensed my-2">
  <div class="Box-header f6">
    <p class="mb-0 text-bold">
      <a href="https://github.com/facebook/react/blob/500d4c3f8779bce7c7dde129eb2fec9e901cf5ae/src/isomorphic/classic/element/ReactElementValidator.js#L46">react/src/isomorphic/classic/element/ReactElementValidator.js</a>
    </p>
    <p class="mb-0 color-fg-muted">
         Line 46
      in
      <a data-pjax="true" class="commit-tease-sha" href="/facebook/react/commit/500d4c3f8779bce7c7dde129eb2fec9e901cf5ae">500d4c3</a>
    </p>
  </div>
  <div itemprop="text" class="Box-body p-0 blob-wrapper blob-wrapper-embedded data">
    <table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8" data-paste-markdown-skip="">

        <tbody><tr class="border-0">
          <td id="L46" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="46"></td>
          <td id="LC46" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-k">var</span> <span class="pl-s1">ownerHasKeyUseWarning</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span> </td>
        </tr>
    </tbody></table>
  </div>
</div>
<p></p>
<p dir="auto">Could we provide a way to clear this state, or even better a supported API for opt-in erroring on warnings?</p>