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

Feature: basic widget data validation, improved error display
2 years ago · b0fc8098a7
parent 5b7d2eaf07 1215808dd4
commit b0fc8098a7
70 changed files with 259 additions and 123 deletions
--- a/public/locales/en/common.json
+++ b/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",
--- a/src/components/services/item.jsx
+++ b/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"
            )}
          >
--- a/src/components/services/widget/container.jsx
+++ b/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 (
-      <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>
-    );
+    return <Error error={error} />
  }

  let visibleChildren = children;
--- a/src/components/services/widget/error.jsx
+++ b/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>
+  );
+}
--- a/src/components/widgets/unifi_console/unifi_console.jsx
+++ b/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">
--- a/src/pages/api/docker/stats/[...service].js
+++ b/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"},
    });
  }
 }
--- a/src/utils/proxy/handlers/credentialed.js
+++ b/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);
    }
--- a/src/utils/proxy/handlers/generic.js
+++ b/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);
--- a/src/utils/proxy/http.js
+++ b/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];
  }
 }
--- a/src/utils/proxy/use-widget-api.js
+++ b/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 }
 }
--- a/src/utils/proxy/validate-widget-data.js
+++ b/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;
+}
--- a/src/widgets/adguard/component.jsx
+++ b/src/widgets/adguard/component.jsx
@ -12,9 +12,9 @@ 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) {
    return (
      <Container service={service}>
--- a/src/widgets/authentik/component.jsx
+++ b/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) {
--- a/src/widgets/autobrr/component.jsx
+++ b/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) {
--- a/src/widgets/autobrr/widget.js
+++ b/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",
--- a/src/widgets/bazarr/component.jsx
+++ b/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) {
-    return <Container error="widget.api_error" />;
+  if (moviesError || episodesError) {
+    const finalError = moviesError ?? episodesError;
+    return <Container error={finalError} />;
  }

  if (!episodesData || !moviesData) {
--- a/src/widgets/changedetectionio/component.jsx
+++ b/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) {
-    return <Container error="widget.api_error" />;
+  if (error) {
+    return <Container error={error} />;
  }
-
  const totalObserved = Object.keys(data).length;
  let diffsDetected = 0;

--- a/src/widgets/coinmarketcap/component.jsx
+++ b/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) {
--- a/src/widgets/docker/component.jsx
+++ b/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) {
-    return <Container error={t("widget.api_error")} />;
+  if (statsError || statsData?.error || statusError || statusData?.error) {
+    const finalError = statsError ?? statsData?.error ?? statusError ?? statusData?.error;
+    return <Container error={finalError} />;
  }

  if (statusData && statusData.status !== "running") {
--- a/src/widgets/emby/component.jsx
+++ b/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) {
-    return <Container error={t("widget.api_error")} />;
+  if (sessionsError) {
+    return <Container error={sessionsError} />;
  }

  if (!sessionsData) {
--- a/src/widgets/gluetun/component.jsx
+++ b/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) {
--- a/src/widgets/gluetun/widget.js
+++ b/src/widgets/gluetun/widget.js
@ -7,6 +7,11 @@ const widget = {
  mappings: {
    ip: {
      endpoint: "publicip/ip",
+      validate: [
+        "public_ip",
+        "region",
+        "country"
+      ]
    },
  },
 };
--- a/src/widgets/gotify/component.jsx
+++ b/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} />;
  }


--- a/src/widgets/homebridge/component.jsx
+++ b/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) {
-    return <Container error={t("widget.api_error")} />;
+  if (homebridgeError) {
+    return <Container error={homebridgeError} />;
  }

  if (!homebridgeData) {
--- a/src/widgets/jackett/component.jsx
+++ b/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) {
--- a/src/widgets/jellyseerr/component.jsx
+++ b/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) {
--- a/src/widgets/jellyseerr/widget.js
+++ b/src/widgets/jellyseerr/widget.js
@ -7,6 +7,11 @@ const widget = {
  mappings: {
    "request/count": {
      endpoint: "request/count",
+      validate: [
+        "pending",
+        "approved",
+        "available"
+      ]
    },
  },
 };
--- a/src/widgets/lidarr/component.jsx
+++ b/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) {
--- a/src/widgets/mastodon/component.jsx
+++ b/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) {
--- a/src/widgets/navidrome/component.jsx
+++ b/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) {
-    return <Container error={t("widget.api_error")} />;
+  if (navidromeError || navidromeData?.["subsonic-response"]?.error) {
+    return <Container error={navidromeError ?? navidromeData?.["subsonic-response"]?.error} />;
  }

  if (!navidromeData) {
--- a/src/widgets/npm/component.jsx
+++ b/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) {
-    return <Container error={t("widget.api_error")} />;
+  if (infoError) {
+    return <Container error={infoError} />;
  }

  if (!infoData) {
--- a/src/widgets/nzbget/component.jsx
+++ b/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) {
--- a/src/widgets/ombi/component.jsx
+++ b/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) {
--- a/src/widgets/overseerr/component.jsx
+++ b/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) {
--- a/src/widgets/overseerr/widget.js
+++ b/src/widgets/overseerr/widget.js
@ -7,6 +7,11 @@ const widget = {
  mappings: {
    "request/count": {
      endpoint: "request/count",
+      validate: [
+        "pending",
+        "approved",
+        "available",
+      ],
    },
  },
 };
--- a/src/widgets/pihole/component.jsx
+++ b/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) {
--- a/src/widgets/pihole/widget.js
+++ b/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"
+      ]
    },
  },
 };
--- a/src/widgets/plex/component.jsx
+++ b/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) {
--- a/src/widgets/plex/proxy.js
+++ b/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;
  }
--- a/src/widgets/portainer/component.jsx
+++ b/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) {
--- a/src/widgets/prowlarr/component.jsx
+++ b/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) {
--- a/src/widgets/proxmox/component.jsx
+++ b/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) {
--- a/src/widgets/pyload/component.jsx
+++ b/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) {
-    return <Container error={t("widget.api_error")} />;
+  if (pyloadError) {
+    return <Container error={pyloadError} />;
  }

  if (!pyloadData) {
--- a/src/widgets/pyload/proxy.js
+++ b/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' });
--- a/src/widgets/qbittorrent/component.jsx
+++ b/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) {
--- a/src/widgets/radarr/component.jsx
+++ b/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) {
--- a/src/widgets/radarr/widget.js
+++ b/src/widgets/radarr/widget.js
@ -16,6 +16,9 @@ const widget = {
    },
    "queue/status": {
      endpoint: "queue/status",
+      validate: [
+        "totalCount"
+      ]
    },
  },
 };
--- a/src/widgets/readarr/component.jsx
+++ b/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) {
--- a/src/widgets/rutorrent/component.jsx
+++ b/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) {
--- a/src/widgets/sabnzbd/component.jsx
+++ b/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) {
--- a/src/widgets/sabnzbd/widget.js
+++ b/src/widgets/sabnzbd/widget.js
@ -7,6 +7,9 @@ const widget = {
  mappings: {
    queue: {
      endpoint: "queue",
+      validate: [
+        "queue"
+      ]
    },
  },
 };
--- a/src/widgets/sonarr/component.jsx
+++ b/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) {
--- a/src/widgets/sonarr/widget.js
+++ b/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"
+      ]
    },
  },
 };
--- a/src/widgets/speedtest/component.jsx
+++ b/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)) {
-    return <Container error={t("widget.api_error")} />;
+  if (speedtestError) {
+    return <Container error={speedtestError} />;
  }

  if (!speedtestData) {
--- a/src/widgets/speedtest/widget.js
+++ b/src/widgets/speedtest/widget.js
@ -7,6 +7,9 @@ const widget = {
  mappings: {
    "speedtest/latest": {
      endpoint: "speedtest/latest",
+      validate: [
+        "data"
+      ]
    },
  },
 };
--- a/src/widgets/strelaysrv/component.jsx
+++ b/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) {
--- a/src/widgets/strelaysrv/widget.js
+++ b/src/widgets/strelaysrv/widget.js
@ -7,6 +7,11 @@ const widget = {
  mappings: {
    status: {
      endpoint: "status",
+      validate: [
+        "numActiveSessions",
+        "numConnections",
+        "bytesProxied"
+      ]
    },
  },
 };
--- a/src/widgets/tautulli/component.jsx
+++ b/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) {
--- a/src/widgets/traefik/component.jsx
+++ b/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) {
--- a/src/widgets/traefik/widget.js
+++ b/src/widgets/traefik/widget.js
@ -7,6 +7,9 @@ const widget = {
  mappings: {
    overview: {
      endpoint: "overview",
+      validate: [
+        "http"
+      ]
    },
  },
 };
--- a/src/widgets/transmission/component.jsx
+++ b/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) {
--- a/src/widgets/transmission/proxy.js
+++ b/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);
--- a/src/widgets/truenas/component.jsx
+++ b/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) {
--- a/src/widgets/truenas/widget.js
+++ b/src/widgets/truenas/widget.js
@ -14,6 +14,10 @@ const widget = {
    },
    status: {
      endpoint: "system/info",
+      validate: [
+        "loadavg",
+        "uptime_seconds"
+      ]
    },
  },
 };
--- a/src/widgets/tubearchivist/component.jsx
+++ b/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) {
--- a/src/widgets/tubearchivist/widget.js
+++ b/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",
+      ]
    },
  },
 };
--- a/src/widgets/unifi/component.jsx
+++ b/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) {
-        return <Container error={t("widget.api_error")} />;
+    if (statsError) {
+        return <Container error={statsError} />;
    }

    const defaultSite = statsData?.data?.find(s => s.name === "default");
--- a/src/widgets/unifi/proxy.js
+++ b/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);
--- a/src/widgets/watchtower/component.jsx
+++ b/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) {
-    return <Container error={t("widget.api_error")} />;
+  if (watchError) {
+    return <Container error={watchError} />;
  }

  if (!watchData) {
--- a/src/widgets/watchtower/proxy.js
+++ b/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);