title: React ErrorBoundary - Just can't get it to work
body: <p>Apologies, I know this has been asked, but I can't find a single example that works for me. Seems like it's not easy enough to understand if so many are struggling with it.</p>
  
  <p>I just need to know how to catch errors in React in a clean, simple way. I'm using CRA 2.0/React 16.7. I want a try/catch block at the action level, as this is where business logic is concentrated in my app.</p>
  
  <p>I read this and implemented it as described, but my ErrorBoundary object never catches errors.</p>
  
  <p>Example:</p>
  
  <pre><code>import React, { Component } from "react";
  
  class ErrorBoundary extends Component {
      constructor(props) {
          super(props);
          this.state = { hasError: false };
      }
  
      static getDerivedStateFromError(error) {
          return { hasError: true };
      }
  
      componentDidCatch(error, info) {
          console.log("ErrorBoundary: ", error);
          console.log("ErrorBoundary: ", info);
      }
  
      render() {
          if (this.state.hasError) {
              return &lt;h1&gt;Something went wrong.&lt;/h1&gt;;
          }
          return this.props.children;
      }
  }
  
  export default ErrorBoundary;
  </code></pre>
  
  <p>I'm wrapping my routes at the top level:</p>
  
  <pre><code>    return (
          &lt;BrowserRouter&gt;
              &lt;ErrorBoundary&gt;
                  &lt;div className="main-container"&gt;
                      &lt;SideBar /&gt;
                      &lt;div className="some-class"&gt;
                          &lt;Switch&gt;
                              &lt;Route path="/events" component={Events} /&gt;
                              &lt;Route exact path="/" component={Index} /&gt;
                          &lt;/Switch&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/ErrorBoundary&gt;
          &lt;/BrowserRouter&gt;
      );
  </code></pre>
  
  <p>In "events" above, I make an API call which is throwing a 500 error on the API side:</p>
  
  <pre><code>componentDidMount() {
      this.props.getAllEvents();
  }
  </code></pre>
  
  <p>Here's the Redux action:</p>
  
  <pre><code>export const getAllEvents = () =&gt; {
      return async (dispatch, getState) =&gt; {
          try {
              let state = getState();
              const result = await get({
                  state: state,
                  route: "/v1/events"
              });
              dispatch({
                  type: GET_EVENTS,
                  payload: result
              });
          } catch (e) {
              console.log("Something went wrong at action...");
          }
      };
  };
  </code></pre>
  
  <p>..."get()" is just wrapping an Axios GET - nothing fancy.</p>
  
  <p>I see a 500 error in the console from the failed API call. I never see the "Something went wrong..." in the console, from the catch block above, though that line does get hit while debugging.</p>
  
  <p>The "componentDidCatch()" method never gets called - "hasError" is always false and it always renders the children.</p>
  
  <p>If I remove the throw block in the API endpoint, everything works fine and I get my data. I'm just not able to catch errors at the UI level. I've tried a try/catch in the "componentDidMount()", I've tried removing the try/catch block in the action...behavior doesn't change.</p>
  
  <p>Thanks in advance.</p>