add a network error view for Uptime details

Client/src/Pages/Uptime/Details/Hooks/useCertificateFetch.jsx

@@ -11,7 +11,7 @@ const useCertificateFetch = ({
 	uiTimezone,
 }) => {
 	const [certificateExpiry, setCertificateExpiry] = useState(undefined);
-	const [certificateIsLoading, setCertificateIsLoading] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
 
 	useEffect(() => {
 		const fetchCertificate = async () => {
@@ -20,7 +20,7 @@ const useCertificateFetch = ({
 			}
 
 			try {
-				setCertificateIsLoading(true);
+				setIsLoading(true);
 				const res = await networkService.getCertificateExpiry({
 					authToken: authToken,
 					monitorId: monitorId,
@@ -35,12 +35,12 @@ const useCertificateFetch = ({
 				setCertificateExpiry("N/A");
 				logger.error(error);
 			} finally {
-				setCertificateIsLoading(false);
+				setIsLoading(false);
 			}
 		};
 		fetchCertificate();
 	}, [authToken, monitorId, certificateDateFormat, uiTimezone, monitor]);
-	return { certificateExpiry, certificateIsLoading };
+	return [certificateExpiry, isLoading];
 };
 
 export default useCertificateFetch;

Client/src/Pages/Uptime/Details/Hooks/useChecksFetch.jsx

@@ -1,8 +1,7 @@
 import { useState } from "react";
 import { useEffect } from "react";
-import { logger } from "../../../../Utils/Logger";
 import { networkService } from "../../../../main";
-
+import { createToast } from "../../../../Utils/toastUtils";
 export const useChecksFetch = ({
 	authToken,
 	monitorId,
@@ -12,12 +11,13 @@ export const useChecksFetch = ({
 }) => {
 	const [checks, setChecks] = useState(undefined);
 	const [checksCount, setChecksCount] = useState(undefined);
-	const [checksAreLoading, setChecksAreLoading] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
+	const [networkError, setNetworkError] = useState(false);
 
 	useEffect(() => {
 		const fetchChecks = async () => {
 			try {
-				setChecksAreLoading(true);
+				setIsLoading(true);
 				const res = await networkService.getChecksByMonitor({
 					authToken: authToken,
 					monitorId: monitorId,
@@ -31,15 +31,16 @@ export const useChecksFetch = ({
 				setChecks(res.data.data.checks);
 				setChecksCount(res.data.data.checksCount);
 			} catch (error) {
-				logger.error(error);
+				setNetworkError(true);
+				createToast({ body: error.message });
 			} finally {
-				setChecksAreLoading(false);
+				setIsLoading(false);
 			}
 		};
 		fetchChecks();
 	}, [authToken, monitorId, dateRange, page, rowsPerPage]);
 
-	return { checks, checksCount, checksAreLoading };
+	return [checks, checksCount, isLoading, networkError];
 };
 
 export default useChecksFetch;

Client/src/Pages/Uptime/Details/Hooks/useMonitorFetch.jsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
 import { networkService } from "../../../../main";
-import { logger } from "../../../../Utils/Logger";
 import { useNavigate } from "react-router-dom";
+import { createToast } from "../../../../Utils/toastUtils";
 
 export const useMonitorFetch = ({ authToken, monitorId, dateRange }) => {
-	const [monitorIsLoading, setMonitorsIsLoading] = useState(true);
+	const [networkError, setNetworkError] = useState(false);
+	const [isLoading, setIsLoading] = useState(true);
 	const [monitor, setMonitor] = useState(undefined);
 	const navigate = useNavigate();
 
@@ -19,15 +20,15 @@ export const useMonitorFetch = ({ authToken, monitorId, dateRange }) => {
 				});
 				setMonitor(res?.data?.data ?? {});
 			} catch (error) {
-				logger.error(error);
-				navigate("/not-found", { replace: true });
+				setNetworkError(true);
+				createToast({ body: error.message });
 			} finally {
-				setMonitorsIsLoading(false);
+				setIsLoading(false);
 			}
 		};
 		fetchMonitors();
 	}, [authToken, dateRange, monitorId, navigate]);
-	return { monitor, monitorIsLoading };
+	return [monitor, isLoading, networkError];
 };
 
 export default useMonitorFetch;

Client/src/Pages/Uptime/Details/index.jsx

@@ -47,13 +47,13 @@ const UptimeDetails = () => {
 	const theme = useTheme();
 	const isAdmin = useIsAdmin();
 
-	const { monitor, monitorIsLoading } = useMonitorFetch({
+	const [monitor, monitorIsLoading, monitorNetworkError] = useMonitorFetch({
 		authToken,
 		monitorId,
 		dateRange,
 	});
 
-	const { certificateExpiry, certificateIsLoading } = useCertificateFetch({
+	const [certificateExpiry, certificateIsLoading] = useCertificateFetch({
 		monitor,
 		authToken,
 		monitorId,
@@ -61,7 +61,7 @@ const UptimeDetails = () => {
 		uiTimezone,
 	});
 
-	const { checks, checksCount, checksAreLoading } = useChecksFetch({
+	const [checks, checksCount, checksAreLoading, checksNetworkError] = useChecksFetch({
 		authToken,
 		monitorId,
 		dateRange,
@@ -78,6 +78,21 @@ const UptimeDetails = () => {
 		setRowsPerPage(event.target.value);
 	};
 
+	if (monitorNetworkError || checksNetworkError) {
+		return (
+			<GenericFallback>
+				<Typography
+					variant="h1"
+					marginY={theme.spacing(4)}
+					color={theme.palette.primary.contrastTextTertiary}
+				>
+					Network error
+				</Typography>
+				<Typography>Please check your connection</Typography>
+			</GenericFallback>
+		);
+	}
+
 	// Empty view, displayed when loading is complete and there are no checks
 	if (!monitorIsLoading && !checksAreLoading && checksCount === 0) {
 		return (