added error boundary component

src/components/errorboundary/ErrorBoundary.tsx

@@ -0,0 +1,52 @@
+import { Container } from '@material-ui/core';
+import { DialogBox } from 'components/UI/DialogBox/DialogBox';
+import React, { Component } from 'react';
+
+class ErrorBoundary extends Component<any, any> {
+  constructor(props: any) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: any) {
+    console.log(error);
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: any, errorInfo: any) {
+    console.log(error, errorInfo);
+    // You can also log the error to an error reporting service
+    // logErrorToMyService(error, errorInfo);
+  }
+
+  render() {
+    const { hasError } = this.state;
+    const { children } = this.props;
+    if (hasError) {
+      // You can render any custom fallback UI
+      return (
+        <Container>
+          <div data-testid="errorMessage">
+            <DialogBox
+              title="Error in rendering"
+              colorOk="secondary"
+              handleOk={() => {}}
+              handleCancel={() => {}}
+              buttonOk="Ok"
+              skipCancel
+              alignButtons="center"
+              contentAlign="center"
+            >
+              An error has occurred!
+            </DialogBox>
+          </div>
+        </Container>
+      );
+    }
+
+    return children;
+  }
+}
+
+export default ErrorBoundary;

src/index.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { ThemeProvider, CssBaseline } from '@material-ui/core';
 import Appsignal from '@appsignal/javascript';
 import { ErrorBoundary } from '@appsignal/react';
+import ReactErrorBoundary from 'components/errorboundary/ErrorBoundary';
 import * as WindowEvents from '@appsignal/plugin-window-events';
 import * as BreadcrumbsNetwork from '@appsignal/plugin-breadcrumbs-network';
 import * as PathDecorator from '@appsignal/plugin-path-decorator';
@@ -34,10 +35,12 @@ if (APPSIGNAL_API_KEY) {
 
 ReactDOM.render(
   <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <BrowserRouter>{appComponent}</BrowserRouter>
-    </ThemeProvider>
+    <ReactErrorBoundary>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <BrowserRouter>{appComponent}</BrowserRouter>
+      </ThemeProvider>
+    </ReactErrorBoundary>
   </React.StrictMode>,
   document.getElementById('root')
 );