React + Redux: Debugging hell with dispatch({.., payload: promise})

Question

Working on an isomorphic app under Electrode framework and having debugging issue that I'm unable to solve. I believe, the framework here doesn't matter and you can reproduce the same easily.

Used: Redux, redux-thunk, redux-promise-middleware, redux-devtools-extension (helps to debug redux flow in with Chrome-extension).

The issue is that I don't receive the informative exception from the child element that makes the debugging a hell.

Will appreciate a lot for any hints on how to fix it. Providing a simplified code for the reference:

import React from "react";
import { render } from "react-dom";
import thunk from 'redux-thunk';
import promise from 'redux-promise-middleware';
import { applyMiddleware, createStore } from 'redux';
import { connect } from "react-redux";
import { composeWithDevTools } from 'redux-devtools-extension';

const rootReducer = function(state = { test: false }, action) {
  switch (action.type) {
    case 'TEST_FULFILLED': {
      state = {
        ...state,
        test: true
      };
      break;
    }
  }
  return state;
};

  const store = createStore(
    rootReducer,
    composeWithDevTools(
      applyMiddleware(promise(), thunk)
    )
  );

  const asyncCallAction = () => dispatch => {
    dispatch({
      type: 'TEST',
      payload: new Promise(resolve=>{
        resolve(true)
      })
    });
  };

  class Test extends React.Component {
    componentWillMount() {
      this.props.asyncCall();
    }

    render() {
      const { test } = this.props;
      console.log('Test Value: ', test)
      return (
        <div>
          If test passed you should see the output below, or the exception in console:

          {
            test && // No exception shown regarding the invalid child element shown
            // test && // If commented, shows the exception from the invalid child element
            <ElementWithError someState={true} />
          }
        </div>
      );
    }
  }

  class ElementWithError extends React.Component {
    render() {

      ThrowError(); // Expecting: ThrowError is not defined exception

      return <div>
        Test Passed
      </div>
    }
  }

  const mapStateToProps = state => {
    return {
      test: state.test
    };
  };


  const Render = connect(mapStateToProps, dispatch => ({
    dispatch,
    asyncCall: ()=>dispatch(asyncCallAction()),
  }))(Test);


  render(
    <Render store={store} />,
    document.querySelector('.js-content')
  );