ErrorBounday.js

import { Component } from "react";

export default class ErrorBoundary extends Component {
  state = { hasError: false };

  // whenever an error happens this function will be invoked by React to
  // no object will be created that's why static method
  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Send these Client Side Error to Server (TrackJs) or (new Relic) or may
    // post to server
    console.log("ErrorBoundary has cached a new error -> ", error, errorInfo);
  }

  render() {
    const { errorComponent } = this.props;

    if (this.state.hasError) return errorComponent;
    return this.props.children;
  }
}