Problem with Error Handling in React 16

New Error Handler in ReactJS 16 gives some great changes to how React handles JavaScript errors inside components. But I found one problem with it in case described below.

We have global script Application.jsx

export default class extends React.Component {
    render() {
        return (
          <GlobalErrorBoundary>
    <Content/>
</GlobalErrorBoundary>
        )
    }
}

(I omit import sections in my snippets to show more concise code)

GlobalErrorBoundary.jsx

export default class extends React.Component {
    constructor(props) {
        super(props);
        this.state = {error: null};
    }
    componentDidCatch(error, errorInfo) {
        this.setState({error});
    }
    render() {
        if (this.state.error) {
            return (
                <p>Global Boundary</p>
            );
        }
        return this.props.children;
    }
}

Content.jsx

const _getElement = Symbol();
export default class extends React.Component {
    render() {
        return (
            <LocalErrorBoundary>
                {this[_getElement]()}
            </LocalErrorBoundary>
        )
    }
    [_getElement]() {
        return (<div><InnerComponent/><InnerComponent2/></div>)
    }
}

LocalErrorBoundary.jsx

export default class extends React.Component {

  constructor(props) {

    super(props);

    this.state = {error: null};

  }

  componentDidCatch(error, errorInfo) {

    this.setState({error});

  }

  render() {

    if (this.state.error) {

    return (

      <p>Local Boundary</p>

    );

  }

  return this.props.children;

 }

}

Component1.jsx

const _getElement = Symbol();
export default class extends React.Component {
    render() {
        return (
            <div>
                {this[_getElement]()};
            </div>
        )
    }
    [_getElement]() {
        return 'InnerComponent1'
    }
}

Component2.jsx

const _getElement = Symbol();

export default class extends React.Component {

  render() {

    return (

      <div>

        {this[_getElement]()};

      </div>

    )

  }

  [_getElement]() {

    return 'InnerComponent2'

  }

}

And waht will happened when Content.jsx thows an error?

[_getElement]() {
        throw 500;
    }

It will be cought by 

componentDidCatch(error, errorInfo) {
        this.setState({error});
    }

and printed what we expected:

<p>Global Boundary</p>

But what happenes when we have some widget s on our page and one of them throws an error? Error will be caughed by <LocalErrorBoundary> and will be printed: 

<p>Local Boundary</p>

In many cases this is a desirable behavior, but not in my case. 
In my case, when I have many independent widgets on page and each of them gets data content from other resource (which could thow an error) this solution does not work. I’ll expect that problematic widget, which throws an error, will print error information only in its own block and Error Handling will not stop rendering other widgets.

Maybe is the other solution? I'll try to find out.