From 838c7726cea96e7436e00e3f1f10fc8fa26e530f Mon Sep 17 00:00:00 2001
From: mdshamoon <mohdshamoon841@gmail.com>
Date: Wed, 5 Jan 2022 18:05:49 +0530
Subject: [PATCH] added error boundary component

---
 .../errorboundary/ErrorBoundary.tsx           | 52 +++++++++++++++++++
 src/index.tsx                                 | 11 ++--
 2 files changed, 59 insertions(+), 4 deletions(-)
 create mode 100644 src/components/errorboundary/ErrorBoundary.tsx

diff --git a/src/components/errorboundary/ErrorBoundary.tsx b/src/components/errorboundary/ErrorBoundary.tsx
new file mode 100644
index 000000000..7f8b35163
--- /dev/null
+++ b/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;
diff --git a/src/index.tsx b/src/index.tsx
index a608c57ba..7a892e311 100644
--- a/src/index.tsx
+++ b/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')
 );