<p dir="auto">I was surprised (pleasantly so) to read that events bubble through portals and up the component tree rather than the DOM tree. Obviously this means I can detect clicks that occur within my component or child components without having to worry about whether they happen to be portal hosted.</p>
<p dir="auto">However, another fairly common thing you may want to do is detect whether an event occurred <em>outside</em> of a component or child components. There are plenty of libraries out there that do this, but they all (AFAIK) use the DOM tree so don't have this same behaviour.</p>
<p dir="auto">I was curious whether or not there is anything new, but unadvertised, in React 16 that can help with this part of the puzzle?</p>
<p dir="auto">React version: 17.0.2<br>
Relay version: 12.0.0</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>Wrap a component with an ErrorBoundary class to manage errors. Something like this:</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  &lt;ErrorBoundary FallbackComponent={ErrorFallback}&gt;
          &lt;Suspense
            fallback={
              &lt;LoaderContainer&gt;
                &lt;LoaderIcon iconSize=&quot;xl&quot; /&gt;
              &lt;/LoaderContainer&gt;
            }
          &gt;
            &lt;DetailedStatusContainer /&gt;
          &lt;/Suspense&gt;
        &lt;/ErrorBoundary&gt;"><pre class="notranslate"><code class="notranslate">  &lt;ErrorBoundary FallbackComponent={ErrorFallback}&gt;
          &lt;Suspense
            fallback={
              &lt;LoaderContainer&gt;
                &lt;LoaderIcon iconSize="xl" /&gt;
              &lt;/LoaderContainer&gt;
            }
          &gt;
            &lt;DetailedStatusContainer /&gt;
          &lt;/Suspense&gt;
        &lt;/ErrorBoundary&gt;
</code></pre></div>
<p dir="auto">On Detailed Status Container I have this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" const data =
    useLazyLoadQuery(
      RobotProductOverviewBySerialNumberQuery,
      serialNumber
    );
"><pre class="notranslate"><code class="notranslate"> const data =
    useLazyLoadQuery(
      RobotProductOverviewBySerialNumberQuery,
      serialNumber
    );

</code></pre></div>
<ol start="2" dir="auto">
<li>If I sent an invalid value to the query, the ErrorBoundary will be executed because the query returns 500. That's expected, but check that the console has the following errors:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/21174759/139734520-22ffb46a-9ea5-4c50-8daf-6ea8f5037781.png"><img src="https://user-images.githubusercontent.com/21174759/139734520-22ffb46a-9ea5-4c50-8daf-6ea8f5037781.png" alt="image" style="max-width: 100%;"></a></li>
</ol>
<p dir="auto">Is there a way to avoid the last two errors on the console?</p>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">Console messages:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/21174759/139734585-d9eca0cb-141d-4bf2-baf2-d2e24c9daa85.png"><img src="https://user-images.githubusercontent.com/21174759/139734585-d9eca0cb-141d-4bf2-baf2-d2e24c9daa85.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">Only shows 500 error message:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/21174759/139734652-3c93b3b6-a777-4a00-90bb-d4dba4a3f23e.png"><img src="https://user-images.githubusercontent.com/21174759/139734652-3c93b3b6-a777-4a00-90bb-d4dba4a3f23e.png" alt="image" style="max-width: 100%;"></a></p>