Merge pull request #502 from benphelps/widget-data-validation

Feature: basic widget data validation, improved error display

public/locales/en/common.json

@@ -13,7 +13,11 @@
     "widget": {
         "missing_type": "Missing Widget Type: {{type}}",
         "api_error": "API Error",
-        "status": "Status"
+        "information": "Information",
+        "status": "Status",
+        "url": "URL",
+        "raw_error": "Raw Error",
+        "response_data": "Response Data"
     },
     "weather": {
         "current": "Current Location",

src/components/services/item.jsx

@@ -85,7 +85,7 @@ export default function Item({ service }) {
         {service.container && service.server && (
           <div
             className={classNames(
-              statsOpen && !statsClosing ? "max-h-[55px] opacity-100" : " max-h-[0] opacity-0",
+              statsOpen && !statsClosing ? "max-h-[110px] opacity-100" : " max-h-[0] opacity-0",
               "w-full overflow-hidden transition-all duration-300 ease-in-out"
             )}
           >

src/components/services/widget/container.jsx

@@ -1,10 +1,8 @@
+import Error from "./error";
+
 export default function Container({ error = false, children, service }) {
   if (error) {
-    return (
+    return <Error error={error} />
-      <div className="bg-theme-200/50 dark:bg-theme-900/20 rounded m-1 flex-1 flex flex-col items-center justify-center p-1">
-        <div className="font-thin text-sm">{error}</div>
-      </div>
-    );
   }
 
   let visibleChildren = children;

src/components/services/widget/error.jsx

@@ -0,0 +1,50 @@
+import { useTranslation } from "react-i18next";
+import { IoAlertCircle } from "react-icons/io5";
+
+function displayError(error) {
+  return JSON.stringify(error[1] ? error[1] : error, null, 4);
+}
+
+function displayData(data) {
+  return (data.type === 'Buffer') ? Buffer.from(data).toString() : JSON.stringify(data, 4);
+}
+
+export default function Error({ error }) {
+  const { t } = useTranslation();
+
+  if (error?.data?.error) {
+    error = error.data.error; // eslint-disable-line no-param-reassign
+  }
+
+  return (
+    <details className="px-1 pb-1">
+      <summary className="block text-center mt-1 mb-0 mx-auto p-3 rounded bg-rose-900/80 hover:bg-rose-900/95 text-theme-900 cursor-pointer">
+        <div className="flex items-center justify-center text-xs font-bold">
+          <IoAlertCircle className="mr-1 w-5 h-5"/>{t("widget.api_error")} {error.message && t("widget.information")}
+        </div>
+      </summary>
+      <div className="bg-white dark:bg-theme-200/50 mt-2 rounded text-rose-900 text-xs font-mono whitespace-pre-wrap break-all">
+        <ul className="p-4">
+          {error.message && <li>
+            <span className="text-black">{t("widget.api_error")}:</span> {error.message}
+          </li>}
+          {error.url && <li className="mt-2">
+            <span className="text-black">{t("widget.url")}:</span> {error.url}
+          </li>}
+          {error.rawError && <li className="mt-2">
+            <span className="text-black">{t("widget.raw_error")}:</span>
+            <div className="ml-2">
+              {displayError(error.rawError)}
+            </div>
+          </li>}
+          {error.data && <li className="mt-2">
+            <span className="text-black">{t("widget.response_data")}:</span>
+            <div className="ml-2">
+              {displayData(error.data)}
+            </div>
+          </li>}
+        </ul>
+      </div>
+    </details>
+  );
+}

src/components/widgets/unifi_console/unifi_console.jsx

@@ -12,7 +12,7 @@ export default function Widget({ options }) {
   options.type = "unifi_console";
   const { data: statsData, error: statsError } = useWidgetAPI(options, "stat/sites", { index: options.index });
 
-  if (statsError || statsData?.error) {
+  if (statsError) {
     return (
       <div className="flex flex-col justify-center first:ml-0 ml-4">
         <div className="flex flex-row items-center justify-end">

src/pages/api/docker/stats/[...service].js

@@ -46,7 +46,7 @@ export default async function handler(req, res) {
     });
   } catch {
     res.status(500).send({
-      error: "unknown error",
+      error: {message: "Unknown error"},
     });
   }
 }

src/utils/proxy/handlers/credentialed.js

@@ -1,5 +1,6 @@
 import getServiceWidget from "utils/config/service-helpers";
 import { formatApiCall } from "utils/proxy/api-helpers";
+import validateWidgetData from "utils/proxy/validate-widget-data";
 import { httpProxy } from "utils/proxy/http";
 import createLogger from "utils/logger";
 import widgets from "widgets/widgets";
@@ -54,6 +55,10 @@ export default async function credentialedProxyHandler(req, res) {
         logger.debug("HTTP Error %d calling %s//%s%s...", status, url.protocol, url.hostname, url.pathname);
       }
 
+      if (!validateWidgetData(widget, endpoint, data)) {
+        return res.status(500).json({error: {message: "Invalid data", url, data}});
+      }
+
       if (contentType) res.setHeader("Content-Type", contentType);
       return res.status(status).send(data);
     }

src/utils/proxy/handlers/generic.js

@@ -1,5 +1,6 @@
 import getServiceWidget from "utils/config/service-helpers";
 import { formatApiCall } from "utils/proxy/api-helpers";
+import validateWidgetData from "utils/proxy/validate-widget-data";
 import { httpProxy } from "utils/proxy/http";
 import createLogger from "utils/logger";
 import widgets from "widgets/widgets";
@@ -32,6 +33,11 @@ export default async function genericProxyHandler(req, res, map) {
       });
 
       let resultData = data;
+      
+      if (!validateWidgetData(widget, endpoint, resultData)) {
+        return res.status(status).json({error: {message: "Invalid data", url, data: resultData}});
+      }
+
       if (status === 200 && map) {
         resultData = map(data);
       }
@@ -44,6 +50,7 @@ export default async function genericProxyHandler(req, res, map) {
 
       if (status >= 400) {
         logger.debug("HTTP Error %d calling %s//%s%s...", status, url.protocol, url.hostname, url.pathname);
+        return res.status(status).json({error: {message: "HTTP Error", url, data}});
       }
 
       return res.status(status).send(resultData);

src/utils/proxy/http.js

@@ -98,6 +98,6 @@ export async function httpProxy(url, params = {}) {
   catch (err) {
     logger.error("Error calling %s//%s%s...", url.protocol, url.hostname, url.pathname);
     logger.error(err);
-    return [500, "application/json", { error: "Unexpected error" }, null];
+    return [500, "application/json", { error: {message: err?.message ?? "Unknown error", url, rawError: err} }, null];
   }
 }

src/utils/proxy/use-widget-api.js

@@ -3,5 +3,11 @@ import useSWR from "swr";
 import { formatProxyUrl } from "./api-helpers";
 
 export default function useWidgetAPI(widget, ...options) {
-  return useSWR(formatProxyUrl(widget, ...options));
+  const config = {};
+  if (options?.refreshInterval) {
+    config.refreshInterval = options.refreshInterval;
+  }
+  const { data, error } = useSWR(formatProxyUrl(widget, ...options), config);
+  // make the data error the top-level error
+  return { data, error: data?.error ?? error }
 }

src/utils/proxy/validate-widget-data.js

@@ -0,0 +1,22 @@
+import widgets from "widgets/widgets";
+
+export default function validateWidgetData(widget, endpoint, data) {
+    let valid = true;
+    let dataParsed;
+    try {
+        dataParsed = JSON.parse(data);
+    } catch (e) {
+        valid = false;
+    }
+
+    if (dataParsed) {
+        const validate = widgets[widget.type]?.mappings?.[endpoint]?.validate;
+        validate.forEach(key => {
+            if (dataParsed[key] === undefined) {
+                valid = false;
+            }
+        });
+    }
+    
+    return valid;
+}

src/widgets/adguard/component.jsx

@@ -12,7 +12,7 @@ export default function Component({ service }) {
   const { data: adguardData, error: adguardError } = useWidgetAPI(widget, "stats");
 
   if (adguardError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={adguardError} />;
   }
   
   if (!adguardData) {

src/widgets/authentik/component.jsx

@@ -14,7 +14,8 @@ export default function Component({ service }) {
   const { data: failedLoginsData, error: failedLoginsError } = useWidgetAPI(widget, "login_failed");
 
   if (usersError || loginsError || failedLoginsError) {
-    return <Container error={t("widget.api_error")} />;
+    const finalError = usersError ?? loginsError ?? failedLoginsError;
+    return <Container error={finalError} />;
   }
 
   if (!usersData || !loginsData || !failedLoginsData) {

src/widgets/autobrr/component.jsx

@@ -14,7 +14,8 @@ export default function Component({ service }) {
   const { data: indexersData, error: indexersError } = useWidgetAPI(widget, "indexers");
 
   if (statsError || filtersError || indexersError) {
-    return <Container error={t("widget.api_error")} />;
+    const finalError = statsError ?? filtersError ?? indexersError;
+    return <Container error={finalError} />;
   }
 
   if (!statsData || !filtersData || !indexersData) {

src/widgets/autobrr/widget.js

@@ -7,6 +7,10 @@ const widget = {
   mappings: {
     stats: {
       endpoint: "release/stats",
+      validate: [
+        "push_approved_count",
+        "push_rejected_count"
+      ]
     },
     filters: {
       endpoint: "filters",

src/widgets/bazarr/component.jsx

@@ -12,8 +12,9 @@ export default function Component({ service }) {
   const { data: episodesData, error: episodesError } = useWidgetAPI(widget, "episodes");
   const { data: moviesData, error: moviesError } = useWidgetAPI(widget, "movies");
 
-  if (episodesError || moviesError) {
+  if (moviesError || episodesError) {
-    return <Container error="widget.api_error" />;
+    const finalError = moviesError ?? episodesError;
+    return <Container error={finalError} />;
   }
 
   if (!episodesData || !moviesData) {

src/widgets/changedetectionio/component.jsx

@@ -9,12 +9,11 @@ export default function Component({ service }) {
 
   const { widget } = service;
 
-  const { data } = useWidgetAPI(widget, "info");
+  const { data, error } = useWidgetAPI(widget, "info");
 
-  if (!data) {
+  if (error) {
-    return <Container error="widget.api_error" />;
+    return <Container error={error} />;
   }
-
   const totalObserved = Object.keys(data).length;
   let diffsDetected = 0;
 

src/widgets/coinmarketcap/component.jsx

@@ -37,7 +37,7 @@ export default function Component({ service }) {
   }
 
   if (statsError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={statsError} />;
   }
 
   if (!statsData || !dateRange) {

src/widgets/docker/component.jsx

@@ -17,8 +17,9 @@ export default function Component({ service }) {
 
   const { data: statsData, error: statsError } = useSWR(`/api/docker/stats/${widget.container}/${widget.server || ""}`);
 
-  if (statsError || statusError) {
+  if (statsError || statsData?.error || statusError || statusData?.error) {
-    return <Container error={t("widget.api_error")} />;
+    const finalError = statsError ?? statsData?.error ?? statusError ?? statusData?.error;
+    return <Container error={finalError} />;
   }
 
   if (statusData && statusData.status !== "running") {

src/widgets/emby/component.jsx

@@ -1,10 +1,10 @@
-import useSWR from "swr";
 import { useTranslation } from "next-i18next";
 import { BsVolumeMuteFill, BsFillPlayFill, BsPauseFill, BsCpu, BsFillCpuFill } from "react-icons/bs";
 import { MdOutlineSmartDisplay } from "react-icons/md";
 
 import Container from "components/services/widget/container";
-import { formatProxyUrl, formatProxyUrlWithSegments } from "utils/proxy/api-helpers";
+import { formatProxyUrlWithSegments } from "utils/proxy/api-helpers";
+import useWidgetAPI from "utils/proxy/use-widget-api";
 
 function ticksToTime(ticks) {
   const milliseconds = ticks / 10000;
@@ -157,7 +157,7 @@ export default function Component({ service }) {
     data: sessionsData,
     error: sessionsError,
     mutate: sessionMutate,
-  } = useSWR(formatProxyUrl(widget, "Sessions"), {
+  } = useWidgetAPI(widget, "Sessions", {
     refreshInterval: 5000,
   });
 
@@ -171,8 +171,8 @@ export default function Component({ service }) {
     });
   }
 
-  if (sessionsError || sessionsData?.error) {
+  if (sessionsError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={sessionsError} />;
   }
 
   if (!sessionsData) {

src/widgets/gluetun/component.jsx

@@ -1,18 +1,14 @@
-import { useTranslation } from "next-i18next";
-
 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
 export default function Component({ service }) {
-  const { t } = useTranslation();
-
   const { widget } = service;
 
   const { data: gluetunData, error: gluetunError } = useWidgetAPI(widget, "ip");
 
   if (gluetunError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={gluetunError} />;
   }
 
   if (!gluetunData) {

src/widgets/gluetun/widget.js

@@ -7,6 +7,11 @@ const widget = {
   mappings: {
     ip: {
       endpoint: "publicip/ip",
+      validate: [
+        "public_ip",
+        "region",
+        "country"
+      ]
     },
   },
 };

src/widgets/gotify/component.jsx

@@ -1,12 +1,8 @@
-import { useTranslation } from "next-i18next";
-
 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
 export default function Component({ service }) {
-  const { t } = useTranslation();
-
   const { widget } = service;
 
   const { data: appsData, error: appsError } = useWidgetAPI(widget, "application");
@@ -14,7 +10,8 @@ export default function Component({ service }) {
   const { data: clientsData, error: clientsError } = useWidgetAPI(widget, "client");
 
   if (appsError || messagesError || clientsError) {
-    return <Container error={t("widget.api_error")} />;
+    const finalError = appsError ?? messagesError ?? clientsError;
+    return <Container error={finalError} />;
   }
 
 

src/widgets/homebridge/component.jsx

@@ -11,8 +11,8 @@ export default function Component({ service }) {
 
   const { data: homebridgeData, error: homebridgeError } = useWidgetAPI(widget, "info");
 
-  if (homebridgeError || homebridgeData?.error) {
+  if (homebridgeError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={homebridgeError} />;
   }
 
   if (!homebridgeData) {

src/widgets/jackett/component.jsx

@@ -12,7 +12,7 @@ export default function Component({ service }) {
   const { data: indexersData, error: indexersError } = useWidgetAPI(widget, "indexers");
 
   if (indexersError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={indexersError} />;
   }
 
   if (!indexersData) {

src/widgets/jellyseerr/component.jsx

@@ -1,18 +1,14 @@
-import { useTranslation } from "next-i18next";
-
 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
 export default function Component({ service }) {
-  const { t } = useTranslation();
-
   const { widget } = service;
 
   const { data: statsData, error: statsError } = useWidgetAPI(widget, "request/count");
 
   if (statsError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={statsError} />;
   }
 
   if (!statsData) {

src/widgets/jellyseerr/widget.js

@@ -7,6 +7,11 @@ const widget = {
   mappings: {
     "request/count": {
       endpoint: "request/count",
+      validate: [
+        "pending",
+        "approved",
+        "available"
+      ]
     },
   },
 };

src/widgets/lidarr/component.jsx

@@ -14,7 +14,8 @@ export default function Component({ service }) {
   const { data: queueData, error: queueError } = useWidgetAPI(widget, "queue/status");
 
   if (albumsError || wantedError || queueError) {
-    return <Container error={t("widget.api_error")} />;
+    const finalError = albumsError ?? wantedError ?? queueError;
+    return <Container error={finalError} />;
   }
 
   if (!albumsData || !wantedData || !queueData) {

src/widgets/mastodon/component.jsx

@@ -12,7 +12,7 @@ export default function Component({ service }) {
   const { data: statsData, error: statsError } = useWidgetAPI(widget, "instance");
 
   if (statsError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={statsError} />;
   }
 
   if (!statsData) {

src/widgets/navidrome/component.jsx

@@ -26,8 +26,8 @@ export default function Component({ service }) {
 
   const { data: navidromeData, error: navidromeError } = useWidgetAPI(widget, "getNowPlaying");
 
-  if (navidromeError || navidromeData?.error || navidromeData?.["subsonic-response"]?.error) {
+  if (navidromeError || navidromeData?.["subsonic-response"]?.error) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={navidromeError ?? navidromeData?.["subsonic-response"]?.error} />;
   }
 
   if (!navidromeData) {

src/widgets/npm/component.jsx

@@ -1,18 +1,14 @@
-import { useTranslation } from "next-i18next";
-
 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
 export default function Component({ service }) {
-  const { t } = useTranslation();
-
   const { widget } = service;
 
   const { data: infoData, error: infoError } = useWidgetAPI(widget, "nginx/proxy-hosts");
 
-  if (infoError || infoData?.error) {
+  if (infoError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={infoError} />;
   }
 
   if (!infoData) {

src/widgets/nzbget/component.jsx

@@ -12,7 +12,7 @@ export default function Component({ service }) {
   const { data: statusData, error: statusError } = useWidgetAPI(widget, "status");
 
   if (statusError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={statusError} />;
   }
 
   if (!statusData) {

src/widgets/ombi/component.jsx

@@ -1,18 +1,14 @@
-import { useTranslation } from "next-i18next";
-
 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
 export default function Component({ service }) {
-  const { t } = useTranslation();
-
   const { widget } = service;
 
   const { data: statsData, error: statsError } = useWidgetAPI(widget, "Request/count");
 
   if (statsError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={statsError} />;
   }
 
   if (!statsData) {

src/widgets/overseerr/component.jsx

@@ -1,18 +1,14 @@
-import { useTranslation } from "next-i18next";
-
 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
 export default function Component({ service }) {
-  const { t } = useTranslation();
-
   const { widget } = service;
 
   const { data: statsData, error: statsError } = useWidgetAPI(widget, "request/count");
 
   if (statsError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={statsError} />;
   }
 
   if (!statsData) {

src/widgets/overseerr/widget.js

@@ -7,6 +7,11 @@ const widget = {
   mappings: {
     "request/count": {
       endpoint: "request/count",
+      validate: [
+        "pending",
+        "approved",
+        "available",
+      ],
     },
   },
 };

src/widgets/pihole/component.jsx

@@ -12,7 +12,7 @@ export default function Component({ service }) {
   const { data: piholeData, error: piholeError } = useWidgetAPI(widget, "api.php");
 
   if (piholeError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={piholeError} />;
   }
 
   if (!piholeData) {

src/widgets/pihole/widget.js

@@ -7,6 +7,11 @@ const widget = {
   mappings: {
     "api.php": {
       endpoint: "api.php",
+      validate: [
+        "dns_queries_today",
+        "ads_blocked_today",
+        "domains_being_blocked"
+      ]
     },
   },
 };

src/widgets/plex/component.jsx

@@ -1,21 +1,20 @@
-import useSWR from "swr";
 import { useTranslation } from "next-i18next";
 
 import Block from "components/services/widget/block";
 import Container from "components/services/widget/container";
-import { formatProxyUrl } from "utils/proxy/api-helpers";
+import useWidgetAPI from "utils/proxy/use-widget-api";
 
 export default function Component({ service }) {
   const { t } = useTranslation();
 
   const { widget } = service;
 
-  const { data: plexData, error: plexAPIError } = useSWR(formatProxyUrl(widget, "unified"), {
+  const { data: plexData, error: plexAPIError } = useWidgetAPI(widget, "unified", {
     refreshInterval: 5000,
   });
 
   if (plexAPIError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={plexAPIError} />;
   }
 
   if (!plexData) {

src/widgets/plex/proxy.js

@@ -44,7 +44,7 @@ async function fetchFromPlexAPI(endpoint, widget) {
 
   if (status !== 200) {
     logger.error("HTTP %d communicating with Plex. Data: %s", status, data.toString());
-    return [status, data.toString()];
+    return [status, data];
   }
 
   try {
@@ -65,6 +65,11 @@ export default async function plexProxyHandler(req, res) {
   logger.debug("Getting streams from Plex API");
   let streams;
   let [status, apiData] = await fetchFromPlexAPI("/status/sessions", widget);
+
+  if (status !== 200) {
+    return res.status(status).json({error: {message: "HTTP error communicating with Plex API", data: Buffer.from(apiData).toString()}});
+  }
+
   if (apiData && apiData.MediaContainer) {
     streams = apiData.MediaContainer._attributes.size;
   }

src/widgets/portainer/component.jsx

@@ -14,7 +14,7 @@ export default function Component({ service }) {
   });
 
   if (containersError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={containersError} />;
   }
 
   if (!containersData) {

src/widgets/prowlarr/component.jsx

@@ -1,19 +1,16 @@
-import { useTranslation } from "next-i18next";
-
 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
 export default function Component({ service }) {
-  const { t } = useTranslation();
-
   const { widget } = service;
 
   const { data: indexersData, error: indexersError } = useWidgetAPI(widget, "indexer");
   const { data: grabsData, error: grabsError } = useWidgetAPI(widget, "indexerstats");
 
   if (indexersError || grabsError) {
-    return <Container error={t("widget.api_error")} />;
+    const finalError = indexersError ?? grabsError;
+    return <Container error={finalError} />;
   }
 
   if (!indexersData || !grabsData) {

src/widgets/proxmox/component.jsx

@@ -16,7 +16,7 @@ export default function Component({ service }) {
   const { data: clusterData, error: clusterError } = useWidgetAPI(widget, "cluster/resources");
 
   if (clusterError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={clusterError} />;
   }
 
   if (!clusterData || !clusterData.data) {

src/widgets/pyload/component.jsx

@@ -9,8 +9,8 @@ export default function Component({ service }) {
   const { widget } = service;
   const { data: pyloadData, error: pyloadError } = useWidgetAPI(widget, "status");
 
-  if (pyloadError || pyloadData?.error) {
+  if (pyloadError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={pyloadError} />;
   }
 
   if (!pyloadData) {

src/widgets/pyload/proxy.js

@@ -84,9 +84,9 @@ export default async function pyloadProxyHandler(req, res) {
 
         if (data?.error || status !== 200) {
           try {
-            return res.status(status).send(Buffer.from(data).toString());
+            return res.status(status).send({error: {message: "HTTP error communicating with Plex API", data: Buffer.from(data).toString()}});
           } catch (e) {
-            return res.status(status).send(data);
+            return res.status(status).send({error: {message: "HTTP error communicating with Plex API", data}});
           }
         }
 
@@ -95,7 +95,7 @@ export default async function pyloadProxyHandler(req, res) {
     }
   } catch (e) {
     logger.error(e);
-    return res.status(500).send(e.toString());
+    return res.status(500).send({error: {message: `Error communicating with Plex API: ${e.toString()}`}});
   }
 
   return res.status(400).json({ error: 'Invalid proxy service type' });

src/widgets/qbittorrent/component.jsx

@@ -12,7 +12,7 @@ export default function Component({ service }) {
   const { data: torrentData, error: torrentError } = useWidgetAPI(widget, "torrents/info");
 
   if (torrentError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={torrentError} />;
   }
 
   if (!torrentData) {

src/widgets/radarr/component.jsx

@@ -1,19 +1,16 @@
-import { useTranslation } from "next-i18next";
-
 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
 export default function Component({ service }) {
-  const { t } = useTranslation();
-
   const { widget } = service;
 
   const { data: moviesData, error: moviesError } = useWidgetAPI(widget, "movie");
   const { data: queuedData, error: queuedError } = useWidgetAPI(widget, "queue/status");
 
   if (moviesError || queuedError) {
-    return <Container error={t("widget.api_error")} />;
+    const finalError = moviesError ?? queuedError;
+    return <Container error={finalError} />;
   }
 
   if (!moviesData || !queuedData) {

src/widgets/radarr/widget.js

@@ -16,6 +16,9 @@ const widget = {
     },
     "queue/status": {
       endpoint: "queue/status",
+      validate: [
+        "totalCount"
+      ]
     },
   },
 };

src/widgets/readarr/component.jsx

@@ -14,7 +14,8 @@ export default function Component({ service }) {
   const { data: queueData, error: queueError } = useWidgetAPI(widget, "queue/status");
 
   if (booksError || wantedError || queueError) {
-    return <Container error={t("widget.api_error")} />;
+    const finalError = booksError ?? wantedError ?? queueError;
+    return <Container error={finalError} />;
   }
 
   if (!booksData || !wantedData || !queueData) {

src/widgets/rutorrent/component.jsx

@@ -12,7 +12,7 @@ export default function Component({ service }) {
   const { data: statusData, error: statusError } = useWidgetAPI(widget);
 
   if (statusError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={statusError} />;
   }
 
   if (!statusData) {

src/widgets/sabnzbd/component.jsx

@@ -22,7 +22,7 @@ export default function Component({ service }) {
   const { data: queueData, error: queueError } = useWidgetAPI(widget, "queue");
 
   if (queueError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={queueError} />;
   }
 
   if (!queueData) {

src/widgets/sabnzbd/widget.js

@@ -7,6 +7,9 @@ const widget = {
   mappings: {
     queue: {
       endpoint: "queue",
+      validate: [
+        "queue"
+      ]
     },
   },
 };

src/widgets/sonarr/component.jsx

@@ -1,12 +1,8 @@
-import { useTranslation } from "next-i18next";
-
 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
 export default function Component({ service }) {
-  const { t } = useTranslation();
-
   const { widget } = service;
 
   const { data: wantedData, error: wantedError } = useWidgetAPI(widget, "wanted/missing");
@@ -14,7 +10,8 @@ export default function Component({ service }) {
   const { data: seriesData, error: seriesError } = useWidgetAPI(widget, "series");
 
   if (wantedError || queuedError || seriesError) {
-    return <Container error={t("widget.api_error")} />;
+    const finalError = wantedError ?? queuedError ?? seriesError;
+    return <Container error={finalError} />;
   }
 
   if (!wantedData || !queuedData || !seriesData) {

src/widgets/sonarr/widget.js

@@ -11,12 +11,21 @@ const widget = {
       map: (data) => ({
         total: asJson(data).length,
       }),
+      validate: [
+        "total"
+      ]
     },
     queue: {
       endpoint: "queue",
+      validate: [
+        "totalRecords"
+      ]
     },
     "wanted/missing": {
       endpoint: "wanted/missing",
+      validate: [
+        "totalRecords"
+      ]
     },
   },
 };

src/widgets/speedtest/component.jsx

@@ -11,8 +11,8 @@ export default function Component({ service }) {
 
   const { data: speedtestData, error: speedtestError } = useWidgetAPI(widget, "speedtest/latest");
 
-  if (speedtestError || (speedtestData && !speedtestData.data)) {
+  if (speedtestError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={speedtestError} />;
   }
 
   if (!speedtestData) {

src/widgets/speedtest/widget.js

@@ -7,6 +7,9 @@ const widget = {
   mappings: {
     "speedtest/latest": {
       endpoint: "speedtest/latest",
+      validate: [
+        "data"
+      ]
     },
   },
 };

src/widgets/strelaysrv/component.jsx

@@ -12,7 +12,7 @@ export default function Component({ service }) {
   const { data: statsData, error: statsError } = useWidgetAPI(widget, "status");
 
   if (statsError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={statsError} />;
   }
 
   if (!statsData) {

src/widgets/strelaysrv/widget.js

@@ -7,6 +7,11 @@ const widget = {
   mappings: {
     status: {
       endpoint: "status",
+      validate: [
+        "numActiveSessions",
+        "numConnections",
+        "bytesProxied"
+      ]
     },
   },
 };

src/widgets/tautulli/component.jsx

@@ -1,11 +1,10 @@
 /* eslint-disable camelcase */
-import useSWR from "swr";
 import { useTranslation } from "next-i18next";
 import { BsFillPlayFill, BsPauseFill, BsCpu, BsFillCpuFill } from "react-icons/bs";
 import { MdOutlineSmartDisplay, MdSmartDisplay } from "react-icons/md";
 
 import Container from "components/services/widget/container";
-import { formatProxyUrl } from "utils/proxy/api-helpers";
+import useWidgetAPI from "utils/proxy/use-widget-api";
 
 function millisecondsToTime(milliseconds) {
   const seconds = Math.floor((milliseconds / 1000) % 60);
@@ -119,12 +118,12 @@ export default function Component({ service }) {
 
   const { widget } = service;
 
-  const { data: activityData, error: activityError } = useSWR(formatProxyUrl(widget, "get_activity"), {
+  const { data: activityData, error: activityError } = useWidgetAPI(widget, "get_activity", {
     refreshInterval: 5000,
   });
 
   if (activityError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={activityError} />;
   }
 
   if (!activityData) {

src/widgets/traefik/component.jsx

@@ -1,18 +1,14 @@
-import { useTranslation } from "next-i18next";
-
 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
 export default function Component({ service }) {
-  const { t } = useTranslation();
-
   const { widget } = service;
 
   const { data: traefikData, error: traefikError } = useWidgetAPI(widget, "overview");
 
   if (traefikError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={traefikError} />;
   }
 
   if (!traefikData) {

src/widgets/traefik/widget.js

@@ -7,6 +7,9 @@ const widget = {
   mappings: {
     overview: {
       endpoint: "overview",
+      validate: [
+        "http"
+      ]
     },
   },
 };

src/widgets/transmission/component.jsx

@@ -12,7 +12,7 @@ export default function Component({ service }) {
   const { data: torrentData, error: torrentError } = useWidgetAPI(widget);
 
   if (torrentError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={torrentError} />;
   }
 
   if (!torrentData) {

src/widgets/transmission/proxy.js

@@ -68,6 +68,7 @@ export default async function transmissionProxyHandler(req, res) {
 
   if (status !== 200) {
     logger.error("Error getting data from Transmission: %d.  Data: %s", status, data);
+    return res.status(500).send({error: {message:"Error getting data from Transmission", url, data}});
   }
 
   if (contentType) res.setHeader("Content-Type", contentType);

src/widgets/truenas/component.jsx

@@ -42,7 +42,8 @@ export default function Component({ service }) {
   const { data: statusData, error: statusError } = useWidgetAPI(widget, "status");
 
   if (alertError || statusError) {
-    return <Container error={t("widget.api_error")} />;
+    const finalError = alertError ?? statusError;
+    return <Container error={finalError} />;
   }
 
   if (!alertData || !statusData) {

src/widgets/truenas/widget.js

@@ -14,6 +14,10 @@ const widget = {
     },
     status: {
       endpoint: "system/info",
+      validate: [
+        "loadavg",
+        "uptime_seconds"
+      ]
     },
   },
 };

src/widgets/tubearchivist/component.jsx

@@ -15,7 +15,8 @@ export default function Component({ service }) {
   const { data: playlistsData, error: playlistsError } = useWidgetAPI(widget, "playlists");
 
   if (downloadsError || videosError || channelsError || playlistsError) {
-    return <Container error={t("widget.api_error")} />;
+    const finalError = downloadsError ?? videosError ?? channelsError ?? playlistsError;
+    return <Container error={finalError} />;
   }
 
   if (!downloadsData || !videosData || !channelsData || !playlistsData) {

src/widgets/tubearchivist/widget.js

@@ -7,15 +7,27 @@ const widget = {
   mappings: {
     downloads: {
       endpoint: "download",
+      validate: [
+        "paginate",
+      ]
     },
     videos: {
       endpoint: "video",
+      validate: [
+        "paginate",
+      ]
     },
     channels: {
       endpoint: "channel",
+      validate: [
+        "paginate",
+      ]
     },
     playlists: {
       endpoint: "playlist",
+      validate: [
+        "paginate",
+      ]
     },
   },
 };

src/widgets/unifi/component.jsx

@@ -11,8 +11,8 @@ export default function Component({ service }) {
 
     const { data: statsData, error: statsError } = useWidgetAPI(widget, "stat/sites");
 
-    if (statsError || statsData?.error) {
+    if (statsError) {
-        return <Container error={t("widget.api_error")} />;
+        return <Container error={statsError} />;
     }
 
     const defaultSite = statsData?.data?.find(s => s.name === "default");

src/widgets/unifi/proxy.js

@@ -74,7 +74,7 @@ export default async function unifiProxyHandler(req, res) {
     // don't make two requests each time data from Unifi is required
     [status, contentType, data, responseHeaders] = await httpProxy(widget.url);
     prefix = "";
-    if (responseHeaders["x-csrf-token"]) {
+    if (responseHeaders?.["x-csrf-token"]) {
       prefix = udmpPrefix;
     }
     cache.put(prefixCacheKey, prefix);
@@ -88,13 +88,14 @@ export default async function unifiProxyHandler(req, res) {
   setCookieHeader(url, params);
 
   [status, contentType, data, responseHeaders] = await httpProxy(url, params);
+  
   if (status === 401) {
     logger.debug("Unifi isn't logged in or rejected the reqeust, attempting login.");  
     [status, contentType, data, responseHeaders] = await login(widget);
 
     if (status !== 200) {
       logger.error("HTTP %d logging in to Unifi. Data: %s", status, data);
-      return res.status(status).end(data);
+      return res.status(status).json({error: {message: `HTTP Error ${status}`, url, data}});
     }
 
     const json = JSON.parse(data.toString());
@@ -112,6 +113,7 @@ export default async function unifiProxyHandler(req, res) {
 
   if (status !== 200) {
     logger.error("HTTP %d getting data from Unifi endpoint %s. Data: %s", status, url.href, data);
+    return res.status(status).json({error: {message: `HTTP Error ${status}`, url, data}});
   }
 
   if (contentType) res.setHeader("Content-Type", contentType);

src/widgets/watchtower/component.jsx

@@ -12,8 +12,8 @@ export default function Component({ service }) {
 
   const { data: watchData, error: watchError } = useWidgetAPI(widget, "watchtower");
 
-  if (watchError || !watchData) {
+  if (watchError) {
-    return <Container error={t("widget.api_error")} />;
+    return <Container error={watchError} />;
   }
 
   if (!watchData) {

src/widgets/watchtower/proxy.js

@@ -33,15 +33,16 @@ export default async function watchtowerProxyHandler(req, res) {
 
   if (status !== 200 || !data) {
     logger.error("Error getting data from WatchTower: %d.  Data: %s", status, data);
+    return res.status(status).json({error: {message: `HTTP Error ${status}`, url, data}});
   }
 
-  const cleanData = data.toString().split("\n").filter(s => s.startsWith("watchtower"))
+  const cleanData = data.toString().split("\n").filter(s => s.startsWith("watchtower"));
   const jsonRes = {}
   
   cleanData.map(e => e.split(" ")).forEach(strArray => { 
     const [key, value] = strArray
     jsonRes[key] = value
-  }) 
+  });
 
   if (contentType) res.setHeader("Content-Type", contentType);
   return res.status(status).send(jsonRes);