Show offline state instead of spinner when backend is unreachable

Author: eetu

frontend/src/App.tsx

@@ -105,16 +105,21 @@ const App = () => {
   useEffect(() => {
     const syncData = () => {
       fetch(api("/api/hue"))
-        .then((r) => r.json())
+        .then((r) => {
+          if (!r.ok) throw new Error(`HTTP ${r.status}`);
+          return r.json();
+        })
         .then((d: Response) => {
           setData(d);
           setError(false);
         })
         .catch(() => setError(true));
     };
 
+    syncData();
     const es = new EventSource(api("/api/hue/events"));
     es.onopen = syncData;
+    es.onerror = () => setError(true);
     es.onmessage = (e: MessageEvent) => {
       const event = JSON.parse(e.data as string) as HueLiveEvent;
       setData((prev) => (prev ? applyEvent(prev, event) : prev));

frontend/src/api.ts

@@ -3,3 +3,18 @@ const API_BASE = import.meta.env.VITE_API_URL ?? "";
 export const api = (path: string) => `${API_BASE}${path}`;
 
 export const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+export class HttpError extends Error {
+  status: number;
+  constructor(status: number, message?: string) {
+    super(message ?? `HTTP ${status}`);
+    this.name = "HttpError";
+    this.status = status;
+  }
+}
+
+export const jsonFetcher = async (url: string) => {
+  const res = await fetch(url);
+  if (!res.ok) throw new HttpError(res.status);
+  return res.json();
+};

frontend/src/components/Box.tsx

@@ -8,16 +8,9 @@ type BoxProps = {
   className?: string;
   drawer?: React.ReactElement;
   loading?: boolean;
-  error?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-const Box: React.FC<BoxProps> = ({
-  className,
-  children,
-  drawer,
-  loading,
-  error,
-}) => {
+const Box: React.FC<BoxProps> = ({ className, children, drawer, loading }) => {
   const [collapsed, setCollapsed] = useState(true);
   const theme = useTheme();
 
@@ -36,21 +29,6 @@ const Box: React.FC<BoxProps> = ({
     );
   }
 
-  if (error) {
-    return (
-      <div
-        className={className}
-        css={{
-          display: "flex",
-          justifyContent: "center",
-          color: theme.colors.error,
-        }}
-      >
-        <Icon>error</Icon>
-      </div>
-    );
-  }
-
   const expandable = drawer !== undefined;
 
   return (

frontend/src/components/FmiWeatherBox.tsx

@@ -5,7 +5,7 @@ import { type LucideProps } from "lucide-react";
 import { createElement, memo, useState } from "react";
 import useSWR from "swr";
 
-import { api, fetcher } from "../api";
+import { api, jsonFetcher } from "../api";
 import useLocationSettings from "../hooks/useLocationSettings";
 import useScreenshotMode from "../hooks/useScreenshotMode";
 import { PvForecast } from "../types/pv";
@@ -19,6 +19,7 @@ import Arrow from "./Arrow";
 import Box from "./Box";
 import Icon from "./Icon";
 import LocationForm from "./LocationForm";
+import OfflineState from "./OfflineState";
 import RaindropIcon from "./RaindropIcon";
 import WeatherChart from "./WeatherChart";
 
@@ -47,9 +48,10 @@ const WeatherBox: React.FC<WeatherBoxProps> = ({ className }) => {
     ? api(`/api/weather/fmi?lat=${location.lat}&lon=${location.lon}`)
     : null;
 
-  const { data } = useSWR<WeatherData>(weatherUrl, fetcher, {
+  const { data, error } = useSWR<WeatherData>(weatherUrl, jsonFetcher, {
     refreshInterval: 3600000,
     refreshWhenHidden: true,
+    shouldRetryOnError: false,
   });
 
   const { data: pvForecast } = useSWR<PvForecast>(
@@ -88,6 +90,14 @@ const WeatherBox: React.FC<WeatherBoxProps> = ({ className }) => {
     );
   }
 
+  if (error) {
+    return (
+      <Box className={className}>
+        <OfflineState label="säätiedot" />
+      </Box>
+    );
+  }
+
   if (!(data && current && today)) {
     return null;
   }

frontend/src/components/OfflineState.tsx

@@ -0,0 +1,52 @@
+import { useTheme } from "@emotion/react";
+import { formatDistanceToNow } from "date-fns";
+import { fi } from "date-fns/locale/fi";
+import { FC } from "react";
+
+import Icon from "./Icon";
+
+type OfflineStateProps = {
+  label: string;
+  lastSeen?: Date | null;
+};
+
+const OfflineState: FC<OfflineStateProps> = ({ label, lastSeen }) => {
+  const theme = useTheme();
+  return (
+    <div
+      css={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 8,
+        color: theme.colors.text.muted,
+        padding: "0.5em 0",
+      }}
+    >
+      <Icon size={32}>cloud_off</Icon>
+      <div
+        css={{
+          ...theme.typography.label,
+          color: theme.colors.text.muted,
+          letterSpacing: "0.04em",
+          textTransform: "lowercase",
+        }}
+      >
+        {label}
+      </div>
+      {lastSeen && (
+        <div
+          css={{
+            ...theme.typography.caption,
+            color: theme.colors.text.light,
+          }}
+        >
+          päivitetty{" "}
+          {formatDistanceToNow(lastSeen, { locale: fi, addSuffix: true })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default OfflineState;

frontend/src/components/SolisBox.tsx

@@ -2,10 +2,11 @@ import { useTheme } from "@emotion/react";
 import { memo } from "react";
 import useSWR from "swr";
 
-import { api, fetcher } from "../api";
+import { api, HttpError, jsonFetcher } from "../api";
 import { SolisData } from "../types/solis";
 import Box, { DrawerRow } from "./Box";
 import Icon from "./Icon";
+import OfflineState from "./OfflineState";
 
 type SolisBoxProps = {
   className?: string;
@@ -14,13 +15,30 @@ type SolisBoxProps = {
 const SolisBox: React.FC<SolisBoxProps> = ({ className }) => {
   const theme = useTheme();
 
-  const { data, error } = useSWR<SolisData>(api("/api/solis"), fetcher, {
-    refreshInterval: 300_000,
-    refreshWhenHidden: true,
-    shouldRetryOnError: false,
-  });
+  const { data, error } = useSWR<SolisData, HttpError>(
+    api("/api/solis"),
+    jsonFetcher,
+    {
+      refreshInterval: 300_000,
+      refreshWhenHidden: true,
+      shouldRetryOnError: false,
+    },
+  );
+
+  // Not configured: hide entirely.
+  if (error?.status === 503) return null;
+
+  const offline = !!error || data?.status === 2;
+  if (offline) {
+    const lastSeen = data?.updated_at ? new Date(data.updated_at) : null;
+    return (
+      <Box className={className}>
+        <OfflineState label="aurinkopaneelit" lastSeen={lastSeen} />
+      </Box>
+    );
+  }
 
-  if (!data || error) return null;
+  if (!data) return null;
 
   const isAlarm = data.status === 3;
   const displayPower = data.power.toFixed(1);

frontend/src/components/TemperatureBox.tsx

@@ -8,6 +8,7 @@ import { mq } from "../mq";
 import { Sensor } from "../types/hue";
 import Box, { DrawerRow } from "./Box";
 import Icon from "./Icon";
+import OfflineState from "./OfflineState";
 import TrendIndicator from "./TrendIndicator";
 
 type TemperatureBoxProps = {
@@ -43,6 +44,24 @@ const TemperatureBox: React.FC<TemperatureBoxProps> = ({
 
   const sensorWithLowBattery = sensors.find(isBatteryLow);
 
+  if (error) {
+    return (
+      <Box
+        className={classNames(className)}
+        css={{
+          position: "relative",
+          display: "flex",
+          flexDirection: "column",
+          [mq[0]]: {
+            width: "100%",
+          },
+        }}
+      >
+        <OfflineState label={typeof title === "string" ? title : "anturit"} />
+      </Box>
+    );
+  }
+
   return (
     <Box
       className={classNames(className)}
@@ -55,7 +74,6 @@ const TemperatureBox: React.FC<TemperatureBoxProps> = ({
         },
       }}
       loading={sensors.length === 0}
-      error={error}
       drawer={
         <div
           css={{