Set up error handler around performance tab

Author: gpanciera

src/app/components/ErrorHandler.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+class ErrorHandler extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { errorOccurred: false };
+  }
+
+  componentDidCatch(error, info) {
+    this.setState({ errorOccurred: true })
+    console.log('Error occurred in React Component: ', error, info);
+  }
+
+  render() {
+    return this.state.errorOccurred ? <h1>Something went wrong!</h1> : this.props.children
+  }
+}
+
+export default ErrorHandler;

src/app/components/StateRoute.jsx

@@ -7,6 +7,7 @@ import { MemoryRouter as Router, Route, NavLink, Switch } from 'react-router-dom
 import Chart from './Chart';
 import Tree from './Tree';
 import PerfView from './PerfView';
+import ErrorHandler from './ErrorHandler';
 
 const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
 // eslint-disable-next-line react/prop-types
@@ -30,7 +31,11 @@ const StateRoute = ({ snapshot, hierarchy, snapshots, viewIndex }) => {
 
   const renderPerfView = () => {
     if (hierarchy) {
-      return <PerfView viewIndex={viewIndex} snapshots={snapshots} />;
+      return (
+        <ErrorHandler>
+          <PerfView viewIndex={viewIndex} snapshots={snapshots} />
+        </ErrorHandler>
+      );
     }
     return <div className="noState">{NO_STATE_MSG}</div>;
   };