From 92c15bd310cce031447b8a4347f9da0954a098e0 Mon Sep 17 00:00:00 2001
From: Yunus A M <myounis.ar@live.com>
Date: Wed, 1 Nov 2023 01:32:40 +0530
Subject: [PATCH] feat: create base level error boundry component

---
 .../components/ErrorBoundry/ErrorBoundry.tsx  |  44 ++++++
 .../MetricsApplication/Tabs/Overview.tsx      | 143 +++++++++---------
 .../container/ServiceApplication/index.tsx    |   9 +-
 frontend/src/index.tsx                        |  30 ++--
 4 files changed, 140 insertions(+), 86 deletions(-)
 create mode 100644 frontend/src/components/ErrorBoundry/ErrorBoundry.tsx

diff --git a/frontend/src/components/ErrorBoundry/ErrorBoundry.tsx b/frontend/src/components/ErrorBoundry/ErrorBoundry.tsx
new file mode 100644
index 00000000000..318e1c39df7
--- /dev/null
+++ b/frontend/src/components/ErrorBoundry/ErrorBoundry.tsx
@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/ban-types */
+import { Component, ErrorInfo, ReactNode } from 'react';
+
+type ErrorBoundaryProps = {
+	children: ReactNode;
+};
+
+type ErrorBoundaryState = {
+	hasError: boolean;
+};
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+	constructor(props: ErrorBoundaryProps) {
+		super(props);
+		this.state = { hasError: false };
+	}
+
+	componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+		// Handle the error and update the state
+		this.setState({ hasError: true });
+		// You can also log the error to a service like Sentry or report it to the server.
+		console.error(error, errorInfo);
+	}
+
+	render(): JSX.Element {
+		const { hasError } = this.state;
+		const { children } = this.props;
+
+		if (hasError) {
+			// Render a fallback UI when an error occurs
+			return (
+				<div>
+					<h1>Something went wrong</h1>
+					<p>We apologize for the inconvenience.</p>
+				</div>
+			);
+		}
+
+		// Render the children if no error occurred
+		return <> {children} </>;
+	}
+}
+
+export default ErrorBoundary;
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
index d67053e1e0b..3ab9a600135 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
@@ -2,6 +2,7 @@ import getTopLevelOperations, {
 	ServiceDataProps,
 } from 'api/metrics/getTopLevelOperations';
 import { ActiveElement, Chart, ChartData, ChartEvent } from 'chart.js';
+import ErrorBoundary from 'components/ErrorBoundry/ErrorBoundry';
 import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -190,51 +191,25 @@ function Application(): JSX.Element {
 	};
 
 	return (
-		<>
-			<Row gutter={24}>
-				<Col span={12}>
-					<ServiceOverview
-						onDragSelect={onDragSelect}
-						handleGraphClick={handleGraphClick}
-						selectedTimeStamp={selectedTimeStamp}
-						selectedTraceTags={selectedTraceTags}
-						topLevelOperationsRoute={topLevelOperationsRoute}
-						topLevelOperationsLoading={topLevelOperationsLoading}
-					/>
-				</Col>
+		<ErrorBoundary>
+			<>
+				<Row gutter={24}>
+					<Col span={12}>
+						<ServiceOverview
+							onDragSelect={onDragSelect}
+							handleGraphClick={handleGraphClick}
+							selectedTimeStamp={selectedTimeStamp}
+							selectedTraceTags={selectedTraceTags}
+							topLevelOperationsRoute={topLevelOperationsRoute}
+							topLevelOperationsLoading={topLevelOperationsLoading}
+						/>
+					</Col>
 
-				<Col span={12}>
-					<Button
-						type="default"
-						size="small"
-						id="Rate_button"
-						onClick={onViewTracePopupClick({
-							servicename,
-							selectedTraceTags,
-							timestamp: selectedTimeStamp,
-						})}
-					>
-						View Traces
-					</Button>
-					<TopLevelOperation
-						handleGraphClick={handleGraphClick}
-						onDragSelect={onDragSelect}
-						topLevelOperationsError={topLevelOperationsError}
-						topLevelOperationsLoading={topLevelOperationsLoading}
-						topLevelOperationsIsError={topLevelOperationsIsError}
-						name="operations_per_sec"
-						widget={operationPerSecWidget}
-						opName="Rate"
-					/>
-				</Col>
-			</Row>
-			<Row gutter={24}>
-				<Col span={12}>
-					<ColApDexContainer>
+					<Col span={12}>
 						<Button
 							type="default"
 							size="small"
-							id="ApDex_button"
+							id="Rate_button"
 							onClick={onViewTracePopupClick({
 								servicename,
 								selectedTraceTags,
@@ -243,43 +218,71 @@ function Application(): JSX.Element {
 						>
 							View Traces
 						</Button>
-						<ApDex
-							handleGraphClick={handleGraphClick}
-							onDragSelect={onDragSelect}
-							topLevelOperationsRoute={topLevelOperationsRoute}
-							tagFilterItems={tagFilterItems}
-						/>
-					</ColApDexContainer>
-					<ColErrorContainer>
-						<Button
-							type="default"
-							size="small"
-							id="Error_button"
-							onClick={onErrorTrackHandler(selectedTimeStamp)}
-						>
-							View Traces
-						</Button>
-
 						<TopLevelOperation
 							handleGraphClick={handleGraphClick}
 							onDragSelect={onDragSelect}
 							topLevelOperationsError={topLevelOperationsError}
 							topLevelOperationsLoading={topLevelOperationsLoading}
 							topLevelOperationsIsError={topLevelOperationsIsError}
-							name="error_percentage_%"
-							widget={errorPercentageWidget}
-							opName="Error"
+							name="operations_per_sec"
+							widget={operationPerSecWidget}
+							opName="Rate"
 						/>
-					</ColErrorContainer>
-				</Col>
+					</Col>
+				</Row>
+				<Row gutter={24}>
+					<Col span={12}>
+						<ColApDexContainer>
+							<Button
+								type="default"
+								size="small"
+								id="ApDex_button"
+								onClick={onViewTracePopupClick({
+									servicename,
+									selectedTraceTags,
+									timestamp: selectedTimeStamp,
+								})}
+							>
+								View Traces
+							</Button>
+							<ApDex
+								handleGraphClick={handleGraphClick}
+								onDragSelect={onDragSelect}
+								topLevelOperationsRoute={topLevelOperationsRoute}
+								tagFilterItems={tagFilterItems}
+							/>
+						</ColApDexContainer>
+						<ColErrorContainer>
+							<Button
+								type="default"
+								size="small"
+								id="Error_button"
+								onClick={onErrorTrackHandler(selectedTimeStamp)}
+							>
+								View Traces
+							</Button>
+
+							<TopLevelOperation
+								handleGraphClick={handleGraphClick}
+								onDragSelect={onDragSelect}
+								topLevelOperationsError={topLevelOperationsError}
+								topLevelOperationsLoading={topLevelOperationsLoading}
+								topLevelOperationsIsError={topLevelOperationsIsError}
+								name="error_percentage_%"
+								widget={errorPercentageWidget}
+								opName="Error"
+							/>
+						</ColErrorContainer>
+					</Col>
 
-				<Col span={12}>
-					<Card>
-						{isSpanMetricEnabled ? <TopOperationMetrics /> : <TopOperation />}
-					</Card>
-				</Col>
-			</Row>
-		</>
+					<Col span={12}>
+						<Card>
+							{isSpanMetricEnabled ? <TopOperationMetrics /> : <TopOperation />}
+						</Card>
+					</Col>
+				</Row>
+			</>
+		</ErrorBoundary>
 	);
 }
 
diff --git a/frontend/src/container/ServiceApplication/index.tsx b/frontend/src/container/ServiceApplication/index.tsx
index 5cfce03ee2b..c5b8bfc1468 100644
--- a/frontend/src/container/ServiceApplication/index.tsx
+++ b/frontend/src/container/ServiceApplication/index.tsx
@@ -1,3 +1,4 @@
+import ErrorBoundary from 'components/ErrorBoundry/ErrorBoundry';
 import { FeatureKeys } from 'constants/features';
 import useFeatureFlag from 'hooks/useFeatureFlag';
 
@@ -10,9 +11,11 @@ function Services(): JSX.Element {
 		?.active;
 
 	return (
-		<Container>
-			{isSpanMetricEnabled ? <ServiceMetrics /> : <ServiceTraces />}
-		</Container>
+		<ErrorBoundary>
+			<Container>
+				{isSpanMetricEnabled ? <ServiceMetrics /> : <ServiceTraces />}
+			</Container>
+		</ErrorBoundary>
 	);
 }
 
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 712fb4cc582..bdad4411261 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,6 +1,7 @@
 import './ReactI18';
 
 import AppRoutes from 'AppRoutes';
+import ErrorBoundary from 'components/ErrorBoundry/ErrorBoundry';
 import GlobalStyles from 'globalStyles';
 import { ThemeProvider } from 'hooks/useDarkMode';
 import { createRoot } from 'react-dom/client';
@@ -24,18 +25,21 @@ if (container) {
 	const root = createRoot(container);
 
 	root.render(
-		<HelmetProvider>
-			<ThemeProvider>
-				<QueryClientProvider client={queryClient}>
-					<Provider store={store}>
-						<GlobalStyles />
-						<AppRoutes />
-					</Provider>
-					{process.env.NODE_ENV === 'development' && (
-						<ReactQueryDevtools initialIsOpen />
-					)}
-				</QueryClientProvider>
-			</ThemeProvider>
-		</HelmetProvider>,
+		<ErrorBoundary>
+			<HelmetProvider>
+				<ThemeProvider>
+					<QueryClientProvider client={queryClient}>
+						<Provider store={store}>
+							<GlobalStyles />
+							<AppRoutes />
+						</Provider>
+						{process.env.NODE_ENV === 'development' && (
+							<ReactQueryDevtools initialIsOpen />
+						)}
+					</QueryClientProvider>
+				</ThemeProvider>
+			</HelmetProvider>
+			,
+		</ErrorBoundary>,
 	);
 }