ErrorBounday.jsx

import React, { Component } from "react";
import { Link } from "react-router-dom";

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() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>Something Went Wrong</h1>
          <Link to={"/"}>Go Back</Link>
        </div>
      );
    }
    return this.props.children;
  }
}