<div id="root">
</div>

class MyBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: false };
  }

  static getDerivedStateFromError(data) {
    return { error: true }; // update the state object
  }

  componentDidCatch(error, data) {
    // handle the error content here.
  }

  render() {
    const { error } = this.state;
    const { children } = this.props;

    if (error) return <p>Something wrong happen! 🧐</p>;

    return children;
  }
}

class DispacthError extends React.Component {
  componentDidMount = async () => {
    try {
      const response = await fetch('htt//fake.url'); // fake url to crash
    } catch(e) {
      throw new Error(e.toString()); // throwing a new error
    }
  }

  render() {
      <div>
         <p>hola</p>
      </div>
  }
}

const App = () => (
  <MyBoundary>
    <DispacthError />
  </MyBoundary>
)


ReactDOM.render(
  <App />,
  document.getElementById('root')
);