From cf075040e85a05eae0ea56f3a0e5227d3f192a76 Mon Sep 17 00:00:00 2001 From: Thomas Camlong Date: Sat, 4 Jul 2026 09:09:53 +0200 Subject: [PATCH] fix: use SuperJSON for cache persistence and add null guards to all widgets SuperJSON preserves Date/Map/Set types through the Redis cache round-trip, fixing RangeError crashes from date formatting. Added defensive null/undefined guards across all widget components to handle useQuery loading states and potential cache shape mismatches. --- .../[locale]/boards/(content)/_creator.tsx | 3 +- .../src/archive-team-warrior/component.tsx | 5 ++- .../src/audio-stats/audio-stats-content.tsx | 4 +- .../widgets/src/beszel-alerts/component.tsx | 4 +- .../src/beszel-system-stats/component.tsx | 2 +- .../widgets/src/beszel-system-stats/index.ts | 2 +- packages/widgets/src/beszel/_shared/chart.tsx | 2 +- packages/widgets/src/beszel/_shared/hooks.ts | 4 +- packages/widgets/src/calendar/component.tsx | 2 +- .../widgets/src/coolify/instance-card.tsx | 38 ++++++++---------- .../src/coolify/single-instance-layout.tsx | 16 ++++---- packages/widgets/src/downloads/component.tsx | 6 +-- .../cluster/cluster-health.tsx | 39 +++++++++++-------- .../src/health-monitoring/system-health.tsx | 6 +-- .../widgets/src/indexer-manager/component.tsx | 2 +- .../widgets/src/media-releases/component.tsx | 6 +-- .../src/media-requests/stats/component.tsx | 20 +++++----- .../widgets/src/media-server/component.tsx | 2 +- .../media-transcoding/panels/queue.panel.tsx | 4 +- .../panels/workers.panel.tsx | 2 +- .../network-status/component.tsx | 10 ++--- .../widgets/src/notifications/component.tsx | 4 +- .../src/speedtest-tracker/component.tsx | 4 +- .../src/speedtest-tracker/recent-results.tsx | 8 ++-- packages/widgets/src/stocks/component.tsx | 5 ++- packages/widgets/src/timetable/component.tsx | 2 +- packages/widgets/src/tracearr/component.tsx | 25 ++++++------ packages/widgets/src/umami/umami-content.tsx | 6 +-- .../src/umami/umami-events-content.tsx | 4 +- packages/widgets/src/ups/component.tsx | 2 +- .../widgets/src/uptime-kuma/component.tsx | 2 +- 31 files changed, 124 insertions(+), 117 deletions(-) diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx index aff5e395c..dbd6d157f 100644 --- a/apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx +++ b/apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx @@ -7,6 +7,7 @@ import "~/styles/gridstack.scss"; import { dehydrate, HydrationBoundary } from "@tanstack/react-query"; import type { PersistedClient } from "@tanstack/react-query-persist-client"; +import SuperJSON from "superjson"; import { getQueryClient } from "@homarr/api/server"; import { IntegrationProvider } from "@homarr/auth/client"; import { auth } from "@homarr/auth/next"; @@ -121,7 +122,7 @@ async function QueryCacheHydration({ userId, boardId }: { userId: string; boardI const serialized = await getQueryCacheAsync(userId, boardId); if (!serialized) return null; - const persisted = JSON.parse(serialized) as PersistedClient; + const persisted = SuperJSON.parse(serialized); if (!persisted?.clientState?.queries?.length) return null; return ; diff --git a/packages/widgets/src/archive-team-warrior/component.tsx b/packages/widgets/src/archive-team-warrior/component.tsx index 032858c2f..d1a456228 100644 --- a/packages/widgets/src/archive-team-warrior/component.tsx +++ b/packages/widgets/src/archive-team-warrior/component.tsx @@ -6,6 +6,7 @@ import { clientApi } from "@homarr/api/client"; import { humanFileSize } from "@homarr/common"; import { getIconUrl } from "@homarr/definitions"; +import { WidgetEmptyState } from "../common/empty-state"; import type { WidgetComponentProps } from "../definition"; export default function ArchiveTeamWarriorWidget({ @@ -28,7 +29,9 @@ const ArchiveTeamWarriorWidgetContent = ({ integrationId: string; options: WidgetComponentProps<"archiveTeamWarrior">["options"]; }) => { - const [data] = clientApi.widget.archiveTeamWarrior.getStatus.useSuspenseQuery({ integrationId }); + const { data } = clientApi.widget.archiveTeamWarrior.getStatus.useQuery({ integrationId }); + + if (!data) return ; const status = data.status; const projectName = status.project?.title ?? status.selectedProject ?? "No project selected"; diff --git a/packages/widgets/src/audio-stats/audio-stats-content.tsx b/packages/widgets/src/audio-stats/audio-stats-content.tsx index 3b17223b8..d270f1524 100644 --- a/packages/widgets/src/audio-stats/audio-stats-content.tsx +++ b/packages/widgets/src/audio-stats/audio-stats-content.tsx @@ -46,7 +46,7 @@ export function AudioStatsContent({ backend, stats, options, width }: AudioStats }; const navidromeStats = navidromeStatsByBackend[backend]; const showNowPlayingSection = - navidromeStats !== null && Boolean(options.showNowPlaying) && navidromeStats.nowPlaying.length > 0; + navidromeStats !== null && Boolean(options.showNowPlaying) && (navidromeStats.nowPlaying ?? []).length > 0; const nowPlayingLimitByListVisibility = { true: options.maxNowPlayingItems ?? 3, @@ -54,7 +54,7 @@ export function AudioStatsContent({ backend, stats, options, width }: AudioStats } as const; const nowPlayingTracks = - navidromeStats?.nowPlaying.slice( + (navidromeStats?.nowPlaying ?? []).slice( 0, nowPlayingLimitByListVisibility[ String(options.showNowPlayingList) as keyof typeof nowPlayingLimitByListVisibility diff --git a/packages/widgets/src/beszel-alerts/component.tsx b/packages/widgets/src/beszel-alerts/component.tsx index 3f934423d..0004e64f6 100644 --- a/packages/widgets/src/beszel-alerts/component.tsx +++ b/packages/widgets/src/beszel-alerts/component.tsx @@ -54,12 +54,12 @@ export default function BeszelAlertsWidget({ }, [results]); const alerts = useMemo( - () => results.flatMap((r) => r.alerts.map((a) => ({ ...a, _key: `${r.integrationId}:${a.id}` }))), + () => results.flatMap((r) => (r.alerts ?? []).map((a) => ({ ...a, _key: `${r.integrationId}:${a.id}` }))), [results], ); const history = useMemo(() => { - const all = results.flatMap((r) => r.history.map((h) => ({ ...h, _key: `${r.integrationId}:${h.id}` }))); + const all = results.flatMap((r) => (r.history ?? []).map((h) => ({ ...h, _key: `${r.integrationId}:${h.id}` }))); return all .toSorted((a, b) => new Date(b.created).getTime() - new Date(a.created).getTime()) .slice(0, options.maxHistoryItems); diff --git a/packages/widgets/src/beszel-system-stats/component.tsx b/packages/widgets/src/beszel-system-stats/component.tsx index c82196639..d3322c6dc 100644 --- a/packages/widgets/src/beszel-system-stats/component.tsx +++ b/packages/widgets/src/beszel-system-stats/component.tsx @@ -70,7 +70,7 @@ export default function BeszelSystemStatsWidget({ } = clientApi.widget.beszel.getSystems.useQuery({ integrationIds }); const systems = useMemo( - () => systemsResult.flatMap((r) => r.systems.map((s) => ({ value: s.id, label: s.name }))), + () => systemsResult.flatMap((r) => (r.systems ?? []).map((s) => ({ value: s.id, label: s.name }))), [systemsResult], ); diff --git a/packages/widgets/src/beszel-system-stats/index.ts b/packages/widgets/src/beszel-system-stats/index.ts index a184963e7..de6ebc491 100644 --- a/packages/widgets/src/beszel-system-stats/index.ts +++ b/packages/widgets/src/beszel-system-stats/index.ts @@ -29,7 +29,7 @@ export const { definition, componentLoader } = createWidgetDefinition("beszelSys isPending, isError, } = clientApi.widget.beszel.getSystems.useQuery({ integrationIds }, { enabled: integrationIds.length > 0 }); - const selectData = data.flatMap((r) => r.systems.map((s) => ({ value: s.id, label: s.name }))); + const selectData = data.flatMap((r) => (r.systems ?? []).map((s) => ({ value: s.id, label: s.name }))); return { data: selectData, isPending, isError }; }, }), diff --git a/packages/widgets/src/beszel/_shared/chart.tsx b/packages/widgets/src/beszel/_shared/chart.tsx index 8d8a5e319..5cb43a9b1 100644 --- a/packages/widgets/src/beszel/_shared/chart.tsx +++ b/packages/widgets/src/beszel/_shared/chart.tsx @@ -187,7 +187,7 @@ export const useDockerChartData = ( const { fmt, ordered } = prepareRecords(containerStats, timePeriod); const mapped = ordered.map((record) => { const point: Record = { time: fmt(record.created), rawTime: record.created }; - const byName = new Map(record.stats.map((c) => [c.n, c])); + const byName = new Map((record.stats ?? []).map((c) => [c.n, c])); for (const name of containerNames) { point[name] = extract(byName.get(name)); } diff --git a/packages/widgets/src/beszel/_shared/hooks.ts b/packages/widgets/src/beszel/_shared/hooks.ts index b00e6f857..527d0056d 100644 --- a/packages/widgets/src/beszel/_shared/hooks.ts +++ b/packages/widgets/src/beszel/_shared/hooks.ts @@ -13,8 +13,8 @@ export const useBeszelFilteredSystems = ( const allSystems = useMemo( () => results - .flatMap((r) => r.systems.map((s) => ({ ...s, _key: `${r.integrationId}:${s.id}` }))) - .toSorted((a, b) => a.name.localeCompare(b.name)), + .flatMap((r) => (r.systems ?? []).map((s) => ({ ...s, _key: `${r.integrationId}:${s.id}` }))) + .toSorted((a, b) => (a.name ?? "").localeCompare(b.name ?? "")), [results], ); diff --git a/packages/widgets/src/calendar/component.tsx b/packages/widgets/src/calendar/component.tsx index b00cd1af0..5e597150f 100644 --- a/packages/widgets/src/calendar/component.tsx +++ b/packages/widgets/src/calendar/component.tsx @@ -137,7 +137,7 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar .filter( (event) => event.metadata?.type !== "radarr" || options.releaseType.includes(event.metadata.releaseType), ) - .toSorted((eventA, eventB) => eventA.startDate.getTime() - eventB.startDate.getTime()); + .toSorted((eventA, eventB) => new Date(eventA.startDate).getTime() - new Date(eventB.startDate).getTime()); return ( s.is_reachable !== false).length; - const runningApps = instance.instanceInfo.applications.filter( - (a) => parseStatus(a.status ?? "") === "running", - ).length; - const runningServices = instance.instanceInfo.services.filter( - (s) => parseStatus(s.status ?? "") === "running", - ).length; + const onlineServers = servers.filter((s) => s.is_reachable !== false).length; + const runningApps = applications.filter((a) => parseStatus(a.status ?? "") === "running").length; + const runningServices = services.filter((s) => parseStatus(s.status ?? "") === "running").length; return ( @@ -65,26 +61,26 @@ export function InstanceCard({ instance, options, isTiny, widgetKey }: InstanceC {options.showServers && ( - - {onlineServers}/{instance.instanceInfo.servers.length} + + {onlineServers}/{servers.length} )} {options.showApplications && ( - {runningApps}/{instance.instanceInfo.applications.length} + {runningApps}/{applications.length} )} {options.showServices && ( - {runningServices}/{instance.instanceInfo.services.length} + {runningServices}/{services.length} )} @@ -93,7 +89,7 @@ export function InstanceCard({ instance, options, isTiny, widgetKey }: InstanceC {options.showServers && ( )} {options.showApplications && ( - + )} {options.showServices && ( - + )} diff --git a/packages/widgets/src/coolify/single-instance-layout.tsx b/packages/widgets/src/coolify/single-instance-layout.tsx index ae44b998f..0ac0dbadd 100644 --- a/packages/widgets/src/coolify/single-instance-layout.tsx +++ b/packages/widgets/src/coolify/single-instance-layout.tsx @@ -31,11 +31,11 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey }: S defaultValue: ["applications"], }); - const serverResourceCounts = buildServerResourceCounts( - instance.instanceInfo.servers, - instance.instanceInfo.applications, - instance.instanceInfo.services, - ); + const servers = instance.instanceInfo.servers ?? []; + const applications = instance.instanceInfo.applications ?? []; + const services = instance.instanceInfo.services ?? []; + + const serverResourceCounts = buildServerResourceCounts(servers, applications, services); const baseUrl = instance.integrationUrl.replace(/\/+$/, ""); const displayUrl = baseUrl.replace(/^https?:\/\//, ""); @@ -59,7 +59,7 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey }: S {options.showServers && ( )} {options.showApplications && ( - + )} {options.showServices && ( - + )} diff --git a/packages/widgets/src/downloads/component.tsx b/packages/widgets/src/downloads/component.tsx index 0edfb9ba5..954776f2d 100644 --- a/packages/widgets/src/downloads/component.tsx +++ b/packages/widgets/src/downloads/component.tsx @@ -104,7 +104,7 @@ export default function DownloadClientsWidget({ const [quickFilters, setQuickFilters] = useState({ integrationKinds: [], statuses: [] }); const availableStatuses = useMemo(() => { //Redefine list of available statuses from current items - const statuses = Array.from(new Set(currentItems.flatMap(({ data }) => data.items.map(({ state }) => state)))); + const statuses = Array.from(new Set(currentItems.flatMap(({ data }) => (data.items ?? []).map(({ state }) => state)))); //Reset user filters accordingly to remove unavailable statuses setQuickFilters(({ integrationKinds: names, statuses: prevStatuses }) => { return { integrationKinds: names, statuses: prevStatuses.filter((status) => statuses.includes(status)) }; @@ -127,7 +127,7 @@ export default function DownloadClientsWidget({ //Construct normalized items list .flatMap((pair) => //Apply user white/black list - pair.data.items + (pair.data.items ?? []) .filter( ({ category }) => options.filterIsWhitelist === @@ -202,7 +202,7 @@ export default function DownloadClientsWidget({ const interact = integrationsWithInteractions.includes(integration.id); const isTorrent = getIntegrationKindsByCategory("torrent").some((kind) => kind === integration.kind); /** Derived from current items */ - const { totalUp, totalDown } = data.items + const { totalUp, totalDown } = (data.items ?? []) .filter( ({ category }) => !options.applyFilterToRatio || diff --git a/packages/widgets/src/health-monitoring/cluster/cluster-health.tsx b/packages/widgets/src/health-monitoring/cluster/cluster-health.tsx index 1ac7922d5..a62d647f8 100644 --- a/packages/widgets/src/health-monitoring/cluster/cluster-health.tsx +++ b/packages/widgets/src/health-monitoring/cluster/cluster-health.tsx @@ -41,19 +41,24 @@ export const ClusterHealthMonitoring = ({ if (!healthData) return ; - const activeNodes = healthData.nodes.reduce(running, 0); - const activeVMs = healthData.vms.reduce(running, 0); - const activeLXCs = healthData.lxcs.reduce(running, 0); - const activeStorage = healthData.storages.reduce(running, 0); + const nodes = healthData.nodes ?? []; + const vms = healthData.vms ?? []; + const lxcs = healthData.lxcs ?? []; + const storages = healthData.storages ?? []; - const usedMem = healthData.nodes.reduce((sum, item) => (item.isRunning ? item.memory.used + sum : sum), 0); - const maxMem = healthData.nodes.reduce((sum, item) => (item.isRunning ? item.memory.total + sum : sum), 0); - const maxCpu = healthData.nodes.reduce((sum, item) => (item.isRunning ? item.cpu.cores + sum : sum), 0); - const usedCpu = healthData.nodes.reduce( + const activeNodes = nodes.reduce(running, 0); + const activeVMs = vms.reduce(running, 0); + const activeLXCs = lxcs.reduce(running, 0); + const activeStorage = storages.reduce(running, 0); + + const usedMem = nodes.reduce((sum, item) => (item.isRunning ? item.memory.used + sum : sum), 0); + const maxMem = nodes.reduce((sum, item) => (item.isRunning ? item.memory.total + sum : sum), 0); + const maxCpu = nodes.reduce((sum, item) => (item.isRunning ? item.cpu.cores + sum : sum), 0); + const usedCpu = nodes.reduce( (sum, item) => (item.isRunning ? item.cpu.utilization * item.cpu.cores + sum : sum), 0, ); - const uptime = healthData.nodes.reduce((sum, { uptime }) => (sum > uptime ? sum : uptime), 0); + const uptime = nodes.reduce((sum, { uptime }) => (sum > uptime ? sum : uptime), 0); const cpuPercent = maxCpu ? (usedCpu / maxCpu) * 100 : 0; const memPercent = maxMem ? (usedMem / maxMem) * 100 : 0; @@ -89,12 +94,12 @@ export const ClusterHealthMonitoring = ({ icon={IconServer} badge={addBadgeColor({ activeCount: activeNodes, - totalCount: healthData.nodes.length, + totalCount: nodes.length, sectionIndicatorRequirement: options.sectionIndicatorRequirement, })} isTiny={isTiny} > - + )} @@ -105,12 +110,12 @@ export const ClusterHealthMonitoring = ({ icon={IconDeviceLaptop} badge={addBadgeColor({ activeCount: activeVMs, - totalCount: healthData.vms.length, + totalCount: vms.length, sectionIndicatorRequirement: options.sectionIndicatorRequirement, })} isTiny={isTiny} > - + )} @@ -121,12 +126,12 @@ export const ClusterHealthMonitoring = ({ icon={IconCube} badge={addBadgeColor({ activeCount: activeLXCs, - totalCount: healthData.lxcs.length, + totalCount: lxcs.length, sectionIndicatorRequirement: options.sectionIndicatorRequirement, })} isTiny={isTiny} > - + )} @@ -137,12 +142,12 @@ export const ClusterHealthMonitoring = ({ icon={IconDatabase} badge={addBadgeColor({ activeCount: activeStorage, - totalCount: healthData.storages.length, + totalCount: storages.length, sectionIndicatorRequirement: options.sectionIndicatorRequirement, })} isTiny={isTiny} > - + )} diff --git a/packages/widgets/src/health-monitoring/system-health.tsx b/packages/widgets/src/health-monitoring/system-health.tsx index 8b77b1d2f..c2666e747 100644 --- a/packages/widgets/src/health-monitoring/system-health.tsx +++ b/packages/widgets/src/health-monitoring/system-health.tsx @@ -65,7 +65,7 @@ export const SystemHealthMonitoring = ({ return ( {healthData.map(({ integrationId, integrationName, healthInfo }) => { - const disksData = matchFileSystemAndSmart(healthInfo.fileSystem, healthInfo.smart); + const disksData = matchFileSystemAndSmart(healthInfo.fileSystem ?? [], healthInfo.smart ?? []); const memoryUsage = formatMemoryUsage(healthInfo.memAvailableInBytes, healthInfo.memUsedInBytes); return ( )} {options.gpu && - healthInfo.gpu.map((gpu) => ( + (healthInfo.gpu ?? []).map((gpu) => ( ))} @@ -301,5 +301,5 @@ export const matchFileSystemAndSmart = (fileSystems: FileSystem[], smartData: Sm overallStatus: smartDisk?.overallStatus ?? "", }; }) - .toSorted((fileSystemA, fileSystemB) => fileSystemA.deviceName.localeCompare(fileSystemB.deviceName)); + .toSorted((fileSystemA, fileSystemB) => (fileSystemA.deviceName ?? "").localeCompare(fileSystemB.deviceName ?? "")); }; diff --git a/packages/widgets/src/indexer-manager/component.tsx b/packages/widgets/src/indexer-manager/component.tsx index 4e3fb7c7e..550457c73 100644 --- a/packages/widgets/src/indexer-manager/component.tsx +++ b/packages/widgets/src/indexer-manager/component.tsx @@ -65,7 +65,7 @@ export default function IndexerManagerWidget({ {indexersData.map(({ integrationId, indexers }) => ( - {indexers.map((indexer) => ( + {(indexers ?? []).map((indexer) => ( { top={0} left={0} style={{ - backgroundImage: `url(${item.imageUrls.backdrop})`, + backgroundImage: `url(${item.imageUrls?.backdrop})`, borderRadius: 8, backgroundRepeat: "no-repeat", backgroundSize: "cover", @@ -91,7 +91,7 @@ const Item = ({ item, options }: ItemProps) => { )} - {options.layout === "poster" && {item.title}} + {options.layout === "poster" && {item.title}} @@ -130,7 +130,7 @@ const Item = ({ item, options }: ItemProps) => { )} - {item.tags.length > 0 && ( + {(item.tags ?? []).length > 0 && ( ; - if (requestStats.users.length === 0 && requestStats.stats.length === 0) throw new NoIntegrationDataError(); + if ((requestStats.users ?? []).length === 0 && (requestStats.stats ?? []).length === 0) throw new NoIntegrationDataError(); const data = [ { name: "approved", icon: IconThumbUp, - number: requestStats.stats.reduce((count, { approved }) => count + approved, 0), + number: (requestStats.stats ?? []).reduce((count, { approved }) => count + approved, 0), }, { name: "pending", icon: IconHourglass, - number: requestStats.stats.reduce((count, { pending }) => count + pending, 0), + number: (requestStats.stats ?? []).reduce((count, { pending }) => count + pending, 0), }, { name: "processing", icon: IconLoaderQuarter, - number: requestStats.stats.reduce((count, { processing }) => count + processing, 0), + number: (requestStats.stats ?? []).reduce((count, { processing }) => count + processing, 0), }, { name: "declined", icon: IconThumbDown, - number: requestStats.stats.reduce((count, { declined }) => count + declined, 0), + number: (requestStats.stats ?? []).reduce((count, { declined }) => count + declined, 0), }, { name: "available", icon: IconPlayerPlay, - number: requestStats.stats.reduce((count, { available }) => count + available, 0), + number: (requestStats.stats ?? []).reduce((count, { available }) => count + available, 0), }, { name: "tv", icon: IconDeviceTv, - number: requestStats.stats.reduce((count, { tv }) => count + tv, 0), + number: (requestStats.stats ?? []).reduce((count, { tv }) => count + tv, 0), }, { name: "movie", icon: IconMovie, - number: requestStats.stats.reduce((count, { movie }) => count + movie, 0), + number: (requestStats.stats ?? []).reduce((count, { movie }) => count + movie, 0), }, { name: "total", icon: IconReceipt, - number: requestStats.stats.reduce((count, { total }) => count + total, 0), + number: (requestStats.stats ?? []).reduce((count, { total }) => count + total, 0), }, ] satisfies { name: keyof RequestStats; icon: Icon; number: number }[]; @@ -132,7 +132,7 @@ export default function MediaServerWidget({ {t("titles.users.main")} ({t("titles.users.requests")}) - {requestStats.users.slice(0, 10).map((user) => ( + {(requestStats.users ?? []).slice(0, 10).map((user) => ( currentStreams.flatMap((pair) => - pair.sessions.map((session) => ({ + (pair.sessions ?? []).map((session) => ({ ...session, integrationKind: pair.integrationKind, integrationName: integrationDefs[pair.integrationKind].name, diff --git a/packages/widgets/src/media-transcoding/panels/queue.panel.tsx b/packages/widgets/src/media-transcoding/panels/queue.panel.tsx index 99e8e9e2a..6de205232 100644 --- a/packages/widgets/src/media-transcoding/panels/queue.panel.tsx +++ b/packages/widgets/src/media-transcoding/panels/queue.panel.tsx @@ -27,7 +27,7 @@ export function QueuePanel(props: QueuePanelProps) { const t = useI18n("widget.mediaTranscoding.panel.queue"); - if (queue.array.length === 0) { + if ((queue.array ?? []).length === 0) { return (
{t("empty")} @@ -53,7 +53,7 @@ export function QueuePanel(props: QueuePanelProps) { - {queue.array.map((item) => ( + {(queue.array ?? []).map((item) => ( diff --git a/packages/widgets/src/media-transcoding/panels/workers.panel.tsx b/packages/widgets/src/media-transcoding/panels/workers.panel.tsx index 3dbf968b7..4794cc8d9 100644 --- a/packages/widgets/src/media-transcoding/panels/workers.panel.tsx +++ b/packages/widgets/src/media-transcoding/panels/workers.panel.tsx @@ -26,7 +26,7 @@ interface WorkersPanelProps { export function WorkersPanel(props: WorkersPanelProps) { const t = useI18n("widget.mediaTranscoding.panel.workers"); - if (props.workers.length === 0) { + if ((props.workers ?? []).length === 0) { return (
{t("empty")} diff --git a/packages/widgets/src/network-controller/network-status/component.tsx b/packages/widgets/src/network-controller/network-status/component.tsx index c4e892dba..7701a7152 100644 --- a/packages/widgets/src/network-controller/network-status/component.tsx +++ b/packages/widgets/src/network-controller/network-status/component.tsx @@ -25,19 +25,19 @@ export default function NetworkControllerNetworkStatusWidget({ integrationIds, }); - const data = useMemo(() => summaries.flatMap(({ summary }) => summary), [summaries]); + const data = useMemo(() => summaries.flatMap(({ summary }) => (summary ? [summary] : [])), [summaries]); return ( {options.content === "wifi" ? ( sum + summary.wifi.guests, 0)} - countUsers={data.reduce((sum, summary) => sum + summary.wifi.users, 0)} + countGuests={data.reduce((sum, summary) => sum + (summary.wifi?.guests ?? 0), 0)} + countUsers={data.reduce((sum, summary) => sum + (summary.wifi?.users ?? 0), 0)} /> ) : ( sum + summary.lan.guests, 0)} - countUsers={data.reduce((sum, summary) => sum + summary.lan.users, 0)} + countGuests={data.reduce((sum, summary) => sum + (summary.lan?.guests ?? 0), 0)} + countUsers={data.reduce((sum, summary) => sum + (summary.lan?.users ?? 0), 0)} /> )} diff --git a/packages/widgets/src/notifications/component.tsx b/packages/widgets/src/notifications/component.tsx index 3b7cc5ba7..b0b4b06be 100644 --- a/packages/widgets/src/notifications/component.tsx +++ b/packages/widgets/src/notifications/component.tsx @@ -24,8 +24,8 @@ export default function NotificationsWidget({ options, integrationIds }: WidgetC const sortedNotifications = useMemo( () => notificationIntegrations - .flatMap((integration) => integration.data) - .sort((entryA, entryB) => entryB.time.getTime() - entryA.time.getTime()), + .flatMap((integration) => integration.data ?? []) + .sort((a, b) => (b.time?.getTime?.() ?? 0) - (a.time?.getTime?.() ?? 0)), [notificationIntegrations], ); diff --git a/packages/widgets/src/speedtest-tracker/component.tsx b/packages/widgets/src/speedtest-tracker/component.tsx index 4b2b83dbb..76c8f3886 100644 --- a/packages/widgets/src/speedtest-tracker/component.tsx +++ b/packages/widgets/src/speedtest-tracker/component.tsx @@ -24,7 +24,7 @@ export default function SpeedtestTrackerWidget({ options, integrationIds }: Widg (acc, item) => ({ latestResult: item.dashboard.latestResult ?? acc.latestResult, stats: mergeStats(acc.stats, item.dashboard.stats), - recentResults: [...acc.recentResults, ...item.dashboard.recentResults], + recentResults: [...acc.recentResults, ...(item.dashboard.recentResults ?? [])], }), { latestResult: null, stats: null, recentResults: [] }, ), @@ -32,7 +32,7 @@ export default function SpeedtestTrackerWidget({ options, integrationIds }: Widg ); const twelveHoursAgo = Date.now() - 12 * 60 * 60 * 1000; - const recentFiltered = combined.recentResults.filter((result) => result.created_at.getTime() > twelveHoursAgo); + const recentFiltered = combined.recentResults.filter((result) => new Date(result.created_at).getTime() > twelveHoursAgo); const hasStatSection = (options.showLatestResult && combined.latestResult !== null) || (options.showStats && combined.stats !== null); diff --git a/packages/widgets/src/speedtest-tracker/recent-results.tsx b/packages/widgets/src/speedtest-tracker/recent-results.tsx index 5d2328563..50e53c048 100644 --- a/packages/widgets/src/speedtest-tracker/recent-results.tsx +++ b/packages/widgets/src/speedtest-tracker/recent-results.tsx @@ -161,10 +161,10 @@ function SpeedHistoryChart({ results, height }: { results: SpeedtestTrackerResul const data = useMemo( () => [...results] - .sort((resultA, resultB) => resultA.created_at.getTime() - resultB.created_at.getTime()) + .sort((resultA, resultB) => new Date(resultA.created_at).getTime() - new Date(resultB.created_at).getTime()) .filter((result) => (result.download_bits ?? 0) > 0) .map((result) => ({ - ts: result.created_at.getTime(), + ts: new Date(result.created_at).getTime(), Download: parseFloat(((result.download_bits ?? 0) / 1_000_000).toFixed(2)), Upload: result.upload_bits != null && result.upload_bits > 0 @@ -273,12 +273,12 @@ function PingHistoryChart({ results, height }: { results: SpeedtestTrackerResult const data = useMemo( () => [...results] - .sort((resultA, resultB) => resultA.created_at.getTime() - resultB.created_at.getTime()) + .sort((resultA, resultB) => new Date(resultA.created_at).getTime() - new Date(resultB.created_at).getTime()) .map((result) => result.ping === null ? null : { - ts: result.created_at.getTime(), + ts: new Date(result.created_at).getTime(), Ping: result.ping, }, ) diff --git a/packages/widgets/src/stocks/component.tsx b/packages/widgets/src/stocks/component.tsx index 918851ce8..0b06e3200 100644 --- a/packages/widgets/src/stocks/component.tsx +++ b/packages/widgets/src/stocks/component.tsx @@ -35,8 +35,9 @@ export default function StockPriceWidget({ options, width, height }: WidgetCompo calculateChangePercentage(data.priceHistory.at(-1) ?? 0, data.previousClose), ); - const stockValuesMin = Math.min(...data.priceHistory); - const stockGraphValues = data.priceHistory.map((value) => value - stockValuesMin + 50); + const priceHistory = data.priceHistory ?? []; + const stockValuesMin = priceHistory.length > 0 ? Math.min(...priceHistory) : 0; + const stockGraphValues = priceHistory.map((value) => value - stockValuesMin + 50); const trendColor = stockValuesChange > 0 ? "green.7" : stockValuesChange < 0 ? "red.7" : "gray.6"; return ( diff --git a/packages/widgets/src/timetable/component.tsx b/packages/widgets/src/timetable/component.tsx index 47751a751..49c64f613 100644 --- a/packages/widgets/src/timetable/component.tsx +++ b/packages/widgets/src/timetable/component.tsx @@ -34,7 +34,7 @@ const TimetableWidgetInner = ({ station, baseUrl }: TimetableWidgetInnerProps) = {t("title", { station: station.label })} {(timetable?.entries ?? []).map((entry) => ( - + {entry.line && ( dataPoints).reduce((sum, { y }) => sum + y, 0) + ? multiEventSeries.flatMap(({ dataPoints }) => dataPoints ?? []).reduce((sum, { y }) => sum + y, 0) : undefined; const firstResult = results[0]; @@ -73,13 +73,13 @@ export function UmamiContent({ const { visitorStats } = firstResult; - const chartData = visitorStats.dataPoints.map((point: UmamiVisitorStats["dataPoints"][number]) => ({ + const chartData = (visitorStats.dataPoints ?? []).map((point: UmamiVisitorStats["dataPoints"][number]) => ({ label: formatXLabel(point.timestamp, timeFrame), visitors: point.visitors, ...(point.events !== undefined ? { events: point.events } : {}), })); - const hasEventSeries = visitorStats.dataPoints.some(({ events }) => events !== undefined); + const hasEventSeries = (visitorStats.dataPoints ?? []).some(({ events }) => events !== undefined); const series = [ { name: "visitors", color: "blue.5" }, ...(hasEventSeries ? [{ name: "events", color: "orange.5" }] : []), diff --git a/packages/widgets/src/umami/umami-events-content.tsx b/packages/widgets/src/umami/umami-events-content.tsx index ef91df422..a88ff7c85 100644 --- a/packages/widgets/src/umami/umami-events-content.tsx +++ b/packages/widgets/src/umami/umami-events-content.tsx @@ -45,14 +45,14 @@ export function UmamiEventsContent({ // Collect all unique timestamps across all series const allTimestamps = Array.from( - new Set(series.flatMap(({ dataPoints }) => dataPoints.map(({ x: xPoint }) => xPoint))), + new Set(series.flatMap(({ dataPoints }) => (dataPoints ?? []).map(({ x: xPoint }) => xPoint))), ).toSorted(); // Build per-event lookup by timestamp string const byEvent = new Map( series.map((serie: UmamiEventSeries) => [ serie.eventName, - new Map(serie.dataPoints.map((point) => [point.x, point.y])), + new Map((serie.dataPoints ?? []).map((point) => [point.x, point.y])), ]), ); diff --git a/packages/widgets/src/ups/component.tsx b/packages/widgets/src/ups/component.tsx index 2cb95abbb..e4d9a9435 100644 --- a/packages/widgets/src/ups/component.tsx +++ b/packages/widgets/src/ups/component.tsx @@ -44,7 +44,7 @@ function UpsContent({ integrationIds, options, width }: UpsContentProps) { if (!data) return ; const devices = data.flatMap((instance) => - instance.summaries.map((summary) => ({ key: `${instance.integrationId}:${summary.id}`, summary })), + (instance.summaries ?? []).map((summary) => ({ key: `${instance.integrationId}:${summary.id}`, summary })), ); if (devices.length === 0) { diff --git a/packages/widgets/src/uptime-kuma/component.tsx b/packages/widgets/src/uptime-kuma/component.tsx index 5719f2f13..a1feace3b 100644 --- a/packages/widgets/src/uptime-kuma/component.tsx +++ b/packages/widgets/src/uptime-kuma/component.tsx @@ -112,7 +112,7 @@ function UptimeKumaContent({ integrationIds, options, width }: UptimeKumaContent downCount: acc.downCount + item.dashboard.downCount, pausedCount: acc.pausedCount + item.dashboard.pausedCount, averageUptimePercent: acc.averageUptimePercent + item.dashboard.averageUptimePercent, - monitors: [...acc.monitors, ...item.dashboard.monitors], + monitors: [...acc.monitors, ...(item.dashboard.monitors ?? [])], }), emptyDashboard, );