Fix: Improve error handling for Glances widgets when host is unreachable (#3657)

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

src/widgets/glances/components/container.jsx

@@ -1,4 +1,21 @@
-export default function Container({ children, chart = true, className = "" }) {
+import { useContext } from "react";
+
+import Error from "./error";
+
+import { SettingsContext } from "utils/contexts/settings";
+
+export default function Container({ children, widget, error = null, chart = true, className = "" }) {
+  const { settings } = useContext(SettingsContext);
+  const hideErrors = settings.hideErrors || widget?.hideErrors;
+
+  if (error) {
+    if (hideErrors) {
+      return null;
+    }
+
+    return <Error />;
+  }
+
   return (
     <div>
       {children}

src/widgets/glances/metrics/cpu.jsx

@@ -2,7 +2,6 @@ import dynamic from "next/dynamic";
 import { useState, useEffect } from "react";
 import { useTranslation } from "next-i18next";
 
-import Error from "../components/error";
 import Container from "../components/container";
 import Block from "../components/block";
 
@@ -39,11 +38,7 @@ export default function Component({ service }) {
   }, [data, pointsLimit]);
 
   if (error) {
-    return (
-      <Container chart={chart}>
-        <Error error={error} />
-      </Container>
-    );
+    return <Container error={error} widget={widget} />;
   }
 
   if (!data) {

src/widgets/glances/metrics/disk.jsx

@@ -2,7 +2,6 @@ import dynamic from "next/dynamic";
 import { useState, useEffect } from "react";
 import { useTranslation } from "next-i18next";
 
-import Error from "../components/error";
 import Container from "../components/container";
 import Block from "../components/block";
 
@@ -35,7 +34,7 @@ export default function Component({ service }) {
     }));
 
   useEffect(() => {
-    if (data) {
+    if (data && !data.error) {
       const diskData = data.find((item) => item.disk_name === diskName);
 
       setDataPoints((prevDataPoints) => {
@@ -52,12 +51,9 @@ export default function Component({ service }) {
     setRatePoints(calculateRates(dataPoints));
   }, [dataPoints]);
 
-  if (error) {
-    return (
-      <Container chart={chart}>
-        <Error error={error} />
-      </Container>
-    );
+  if (error || (data && data.error)) {
+    const finalError = error || data.error;
+    return <Container error={finalError} widget={widget} />;
   }
 
   if (!data) {

src/widgets/glances/metrics/fs.jsx

@@ -1,6 +1,5 @@
 import { useTranslation } from "next-i18next";
 
-import Error from "../components/error";
 import Container from "../components/container";
 import Block from "../components/block";
 
@@ -20,11 +19,7 @@ export default function Component({ service }) {
   });
 
   if (error) {
-    return (
-      <Container chart={chart}>
-        <Error error={error} />
-      </Container>
-    );
+    return <Container error={error} widget={widget} />;
   }
 
   if (!data) {

src/widgets/glances/metrics/gpu.jsx

@@ -2,7 +2,6 @@ import dynamic from "next/dynamic";
 import { useState, useEffect } from "react";
 import { useTranslation } from "next-i18next";
 
-import Error from "../components/error";
 import Container from "../components/container";
 import Block from "../components/block";
 
@@ -26,7 +25,7 @@ export default function Component({ service }) {
   });
 
   useEffect(() => {
-    if (data) {
+    if (data && !data.error) {
       // eslint-disable-next-line eqeqeq
       const gpuData = data.find((item) => item[item.key] == gpuName);
 
@@ -42,12 +41,9 @@ export default function Component({ service }) {
     }
   }, [data, gpuName, pointsLimit]);
 
-  if (error) {
-    return (
-      <Container chart={chart}>
-        <Error error={error} />
-      </Container>
-    );
+  if (error || (data && data.error)) {
+    const finalError = error || data.error;
+    return <Container error={finalError} widget={widget} />;
   }
 
   if (!data) {

src/widgets/glances/metrics/info.jsx

@@ -1,6 +1,5 @@
 import { useTranslation } from "next-i18next";
 
-import Error from "../components/error";
 import Container from "../components/container";
 import Block from "../components/block";
 
@@ -84,20 +83,13 @@ export default function Component({ service }) {
     refreshInterval: defaultSystemInterval,
   });
 
-  if (quicklookError) {
-    return (
-      <Container chart={chart}>
-        <Error error={quicklookError} />
-      </Container>
-    );
+  if (quicklookError || (quicklookData && quicklookData.error)) {
+    const qlError = quicklookError || quicklookData.error;
+    return <Container error={qlError} widget={widget} />;
   }
 
   if (systemError) {
-    return (
-      <Container chart={chart}>
-        <Error error={systemError} />
-      </Container>
-    );
+    return <Container error={systemError} service={service} />;
   }
 
   const dataCharts = [];

src/widgets/glances/metrics/memory.jsx

@@ -2,7 +2,6 @@ import dynamic from "next/dynamic";
 import { useState, useEffect } from "react";
 import { useTranslation } from "next-i18next";
 
-import Error from "../components/error";
 import Container from "../components/container";
 import Block from "../components/block";
 
@@ -38,11 +37,7 @@ export default function Component({ service }) {
   }, [data, pointsLimit]);
 
   if (error) {
-    return (
-      <Container chart={chart}>
-        <Error error={error} />
-      </Container>
-    );
+    return <Container error={error} widget={widget} />;
   }
 
   if (!data) {

src/widgets/glances/metrics/net.jsx

@@ -2,7 +2,6 @@ import dynamic from "next/dynamic";
 import { useState, useEffect } from "react";
 import { useTranslation } from "next-i18next";
 
-import Error from "../components/error";
 import Container from "../components/container";
 import Block from "../components/block";
 
@@ -31,7 +30,7 @@ export default function Component({ service }) {
   });
 
   useEffect(() => {
-    if (data) {
+    if (data && !data.error) {
       const interfaceData = data.find((item) => item[item.key] === interfaceName);
 
       if (interfaceData) {
@@ -52,12 +51,9 @@ export default function Component({ service }) {
     }
   }, [data, interfaceName, pointsLimit, rxKey, txKey]);
 
-  if (error) {
-    return (
-      <Container chart={chart}>
-        <Error error={error} />
-      </Container>
-    );
+  if (error || (data && data.error)) {
+    const finalError = error || data.error;
+    return <Container error={finalError} widget={widget} />;
   }
 
   if (!data) {

src/widgets/glances/metrics/process.jsx

@@ -1,6 +1,5 @@
 import { useTranslation } from "next-i18next";
 
-import Error from "../components/error";
 import Container from "../components/container";
 import Block from "../components/block";
 
@@ -31,11 +30,7 @@ export default function Component({ service }) {
   });
 
   if (error) {
-    return (
-      <Container chart={chart}>
-        <Error error={error} />
-      </Container>
-    );
+    return <Container service={service} widget={widget} />;
   }
 
   if (!data) {

src/widgets/glances/metrics/sensor.jsx

@@ -2,7 +2,6 @@ import dynamic from "next/dynamic";
 import { useState, useEffect } from "react";
 import { useTranslation } from "next-i18next";
 
-import Error from "../components/error";
 import Container from "../components/container";
 import Block from "../components/block";
 
@@ -26,24 +25,25 @@ export default function Component({ service }) {
   });
 
   useEffect(() => {
-    if (data) {
+    if (data && !data.error) {
       const sensorData = data.find((item) => item.label === sensorName);
-      setDataPoints((prevDataPoints) => {
-        const newDataPoints = [...prevDataPoints, { value: sensorData.value }];
-        if (newDataPoints.length > pointsLimit) {
-          newDataPoints.shift();
-        }
-        return newDataPoints;
-      });
+      if (sensorData) {
+        setDataPoints((prevDataPoints) => {
+          const newDataPoints = [...prevDataPoints, { value: sensorData.value }];
+          if (newDataPoints.length > pointsLimit) {
+            newDataPoints.shift();
+          }
+          return newDataPoints;
+        });
+      } else {
+        data.error = true;
+      }
     }
   }, [data, sensorName, pointsLimit]);
 
-  if (error) {
-    return (
-      <Container chart={chart}>
-        <Error error={error} />
-      </Container>
-    );
+  if (error || (data && data.error)) {
+    const finalError = error || data.error;
+    return <Container error={finalError} widget={widget} />;
   }
 
   if (!data) {