diff --git a/Client/src/Pages/PageSpeed/Monitors/Hooks/useMonitorsFetch.jsx b/Client/src/Pages/PageSpeed/Monitors/Hooks/useMonitorsFetch.jsx
index 06d423acc..72bfbfc35 100644
--- a/Client/src/Pages/PageSpeed/Monitors/Hooks/useMonitorsFetch.jsx
+++ b/Client/src/Pages/PageSpeed/Monitors/Hooks/useMonitorsFetch.jsx
@@ -6,6 +6,7 @@ const useMonitorsFetch = ({ authToken, teamId }) => {
const [isLoading, setIsLoading] = useState(true);
const [monitors, setMonitors] = useState([]);
const [summary, setSummary] = useState({});
+ const [networkError, setNetworkError] = useState(false);
useEffect(() => {
const fetchMonitors = async () => {
@@ -27,6 +28,7 @@ const useMonitorsFetch = ({ authToken, teamId }) => {
setSummary(res.data.data.summary);
}
} catch (error) {
+ setNetworkError(true);
createToast({
body: error.message,
});
@@ -37,7 +39,7 @@ const useMonitorsFetch = ({ authToken, teamId }) => {
fetchMonitors();
}, [authToken, teamId]);
- return { isLoading, monitors, summary };
+ return { isLoading, monitors, summary, networkError };
};
export default useMonitorsFetch;
diff --git a/Client/src/Pages/PageSpeed/Monitors/index.jsx b/Client/src/Pages/PageSpeed/Monitors/index.jsx
index e921bc15a..a0c24d48e 100644
--- a/Client/src/Pages/PageSpeed/Monitors/index.jsx
+++ b/Client/src/Pages/PageSpeed/Monitors/index.jsx
@@ -11,6 +11,7 @@ import { useTheme } from "@emotion/react";
import { useSelector } from "react-redux";
import { useIsAdmin } from "../../../Hooks/useIsAdmin";
import useMonitorsFetch from "./Hooks/useMonitorsFetch";
+import NetworkErrorFallback from "../../../Components/NetworkErrorFallback";
// Constants
const BREADCRUMBS = [{ name: `pagespeed`, path: "/pagespeed" }];
@@ -20,11 +21,15 @@ const PageSpeed = () => {
const isAdmin = useIsAdmin();
const { user, authToken } = useSelector((state) => state.auth);
- const { isLoading, monitors, summary } = useMonitorsFetch({
+ const { isLoading, monitors, summary, networkError } = useMonitorsFetch({
authToken: authToken,
teamId: user.teamId,
});
+ if (networkError === true) {
+ return ;
+ }
+
if (!isLoading && monitors?.length === 0) {
return (
{
}, []);
const teamId = user.teamId;
- const { monitorsAreLoading, monitors, filteredMonitors, monitorsSummary } =
- useMonitorsFetch({
- authToken,
- teamId,
- limit: 25,
- page: page,
- rowsPerPage: rowsPerPage,
- filter: search,
- field: sort?.field,
- order: sort?.order,
- triggerUpdate: monitorUpdateTrigger,
- });
+ const {
+ monitorsAreLoading,
+ monitors,
+ filteredMonitors,
+ monitorsSummary,
+ networkError,
+ } = useMonitorsFetch({
+ authToken,
+ teamId,
+ limit: 25,
+ page: page,
+ rowsPerPage: rowsPerPage,
+ filter: search,
+ field: sort?.field,
+ order: sort?.order,
+ triggerUpdate: monitorUpdateTrigger,
+ });
const totalMonitors = monitorsSummary?.totalMonitors ?? 0;
- if (!isLoading && !monitorsAreLoading && monitors?.length === 0) {
+
+ if (networkError) return ;
+
+ if (!isLoading && !monitorsAreLoading && totalMonitors === 0) {
return (