title: componentDidCatch is not called on throw
body: <p>I've tried to use error boundaries to handle errors in my app, but for some reason the componentDidCatch is not called when an error is thrown. I've simplified my app to the example from the <a href="https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html" rel="nofollow noreferrer">react documentation</a>, but it still doesn't work.</p>
  
  <p>My react version is 16.6.3.</p>
  
  <p><strong>ErrorHandler.js</strong></p>
  
  <pre><code>import React from 'react';
  
  export default class ErrorBoundary extends React.Component {
      constructor(props) {
        super(props);
        this.state = { error: null, errorInfo: null };
      }
  
      componentDidCatch(error, errorInfo) {
        console.log('catch called')
        // Catch errors in any components below and re-render with error message
        this.setState({
          error: error,
          errorInfo: errorInfo
        })
        // You can also log error messages to an error reporting service here
      }
  
      render() {
        if (this.state.errorInfo) {
          // Error path
          return (
            &lt;div&gt;
              &lt;h2&gt;Something went wrong.&lt;/h2&gt;
              &lt;details style={{ whiteSpace: 'pre-wrap' }}&gt;
                {this.state.error &amp;&amp; this.state.error.toString()}
                &lt;br /&gt;
                {this.state.errorInfo.componentStack}
              &lt;/details&gt;
            &lt;/div&gt;
          );
        }
        // Normally, just render children
        return this.props.children;
      }  
    }
  </code></pre>
  
  <p><strong>IndexPage.js</strong></p>
  
  <pre><code>import React from 'react';
  
  export default class IndexPage extends React.Component
  {
      constructor(props) {
          super(props);
          this.state = { counter: 0 };
          this.handleClick = this.handleClick.bind(this);
        }
  
        handleClick() {
          this.setState(({counter}) =&gt; ({
            counter: counter + 1
          }));
        }
  
        render() {
          if (this.state.counter === 5) {
            // Simulate a JS error
            throw new Error('I crashed!');
          }
          return &lt;h1 onClick={this.handleClick}&gt;{this.state.counter}&lt;/h1&gt;;
        }
  };
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>import 'babel-polyfill';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import AppRoutes from './AppRoutes';
  import { Provider } from 'react-redux';
  import thunkMiddleware from 'redux-thunk';
  import { loadState, saveState } from './localStorage';
  import throttle from 'lodash/throttle';
  import { createStore, compose, applyMiddleware } from 'redux';
  import RootReducer from './reducers/flightControlApp';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  import { getMuiTheme } from 'material-ui/styles';
  import IndexPage from './components/IndexPage';
  
  import ErrorHandler from './components/ErrorHandler';
  
  const middlewares = [];
  middlewares.push(thunkMiddleware);
  
  console.log("Running in DEBUG: " + DEBUG);
  
  if (DEBUG)
  {
      const { logger } = require(`redux-logger`);
      middlewares.push(logger);
      // tests
      //
      // require('./UniTests/Test');
  }
  
  const persistedState = loadState();
  
  let store = compose(applyMiddleware(...middlewares)) (createStore) (
      RootReducer,
      persistedState
  );
  
  if (DEBUG)
  {
      if (persistedState != undefined)
      {
          console.log('Initial state loaded: ');
          console.log(persistedState);
      }
  }
  
  store.subscribe(throttle(()=&gt; {
      saveState(store.getState());
  }, 1000));
  
  window.onload = () =&gt; 
  {
      ReactDOM.render(
          &lt;MuiThemeProvider muiTheme={getMuiTheme()}&gt;
              &lt;ErrorHandler&gt;
                  &lt;IndexPage&gt;&lt;/IndexPage&gt;
              &lt;/ErrorHandler&gt;
          &lt;/MuiThemeProvider&gt;,
          document.getElementById('app'));
  }
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>When the exception is thrown the UI doesn't crash, I can still click the counter that increases on click, but in the console I see:</p>
  
  <p><a href="https://i.stack.imgur.com/pgq9p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pgq9p.png" alt="Console output"></a></p>