From 5880ddbb14fdf3a2c38b1a0546091d2b640119b5 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 6 Aug 2024 18:56:21 -0400
Subject: [PATCH] Redirect to notfound if monitor does not exist

---
 Client/src/Pages/Monitors/Configure/index.jsx |  4 +
 Client/src/Pages/Monitors/Details/index.jsx   | 82 ++++++++++---------
 2 files changed, 49 insertions(+), 37 deletions(-)

diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index c34be3a2f..12f97ab1e 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -62,6 +62,10 @@ const Configure = () => {
 
   useEffect(() => {
     const data = monitors.find((monitor) => monitor._id === monitorId);
+    if (!data) {
+      console.error("Error fetching monitor of id: " + monitorId);
+      navigate("/not-found");
+    }
     setMonitor({
       ...data,
     });
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 852f602e7..6708cc1f5 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -43,45 +43,53 @@ const DetailsPage = () => {
 
   useEffect(() => {
     const fetchMonitor = async () => {
-      const res = await axiosInstance.get(
-        `/monitors/${monitorId}?sortOrder=asc`,
-        {
-          headers: {
-            Authorization: `Bearer ${authToken}`,
-          },
-        }
-      );
-      setMonitor(res.data.data);
-      const data = {
-        cols: [
-          { id: 1, name: "Status" },
-          { id: 2, name: "Date & Time" },
-          { id: 3, name: "Message" },
-        ],
-        rows: res.data.data.checks.map((check, idx) => {
-          const status = check.status === true ? "up" : "down";
+      try {
+        const res = await axiosInstance.get(
+          `/monitors/${monitorId}?sortOrder=asc`,
+          {
+            headers: {
+              Authorization: `Bearer ${authToken}`,
+            },
+          }
+        );
+        setMonitor(res.data.data);
+        const data = {
+          cols: [
+            { id: 1, name: "Status" },
+            { id: 2, name: "Date & Time" },
+            { id: 3, name: "Message" },
+          ],
+          rows: res.data.data.checks.map((check, idx) => {
+            const status = check.status === true ? "up" : "down";
 
-          return {
-            id: check._id,
-            data: [
-              {
-                id: idx,
-                data: (
-                  <StatusLabel
-                    status={status}
-                    text={status}
-                    customStyles={{ textTransform: "capitalize" }}
-                  />
-                ),
-              },
-              { id: idx + 1, data: new Date(check.createdAt).toLocaleString() },
-              { id: idx + 2, data: check.statusCode },
-            ],
-          };
-        }),
-      };
+            return {
+              id: check._id,
+              data: [
+                {
+                  id: idx,
+                  data: (
+                    <StatusLabel
+                      status={status}
+                      text={status}
+                      customStyles={{ textTransform: "capitalize" }}
+                    />
+                  ),
+                },
+                {
+                  id: idx + 1,
+                  data: new Date(check.createdAt).toLocaleString(),
+                },
+                { id: idx + 2, data: check.statusCode },
+              ],
+            };
+          }),
+        };
 
-      setData(data);
+        setData(data);
+      } catch (error) {
+        console.error("Error fetching monitor of id: " + monitorId);
+        navigate("/not-found");
+      }
     };
     fetchMonitor();
   }, [monitorId, authToken]);