fix: prevent stale persisted query cache from blocking widget data (#6273)

apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx

@@ -79,14 +79,16 @@ export const createBoardContentPage = <TParams extends Record<string, unknown>>(
       const userId = session?.user.id ?? "anonymous";
 
       return (
-        <HydrationBoundary state={dehydrate(queryClient)}>
-          <IntegrationProvider integrations={integrations}>
-            <Suspense>
-              <QueryCacheHydration userId={userId} boardId={board.id} />
-            </Suspense>
-            <DynamicClientBoard />
-          </IntegrationProvider>
-        </HydrationBoundary>
+        <>
+          <Suspense>
+            <QueryCacheHydration userId={userId} boardId={board.id} />
+          </Suspense>
+          <HydrationBoundary state={dehydrate(queryClient)}>
+            <IntegrationProvider integrations={integrations}>
+              <DynamicClientBoard />
+            </IntegrationProvider>
+          </HydrationBoundary>
+        </>
       );
     },
     generateMetadataAsync: async ({ params }: { params: Promise<TParams> }): Promise<Metadata> => {

packages/api/src/router/widgets/beszel.ts

@@ -11,11 +11,14 @@ import {
   beszelSystemsRequestHandler,
 } from "@homarr/request-handler/beszel";
 
+import { settleIntegrationQueries } from "../../settle-integrations";
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 const logger = createLogger({ module: "beszelRouter" });
 
+const errorMessage = (error: unknown) => (error instanceof Error ? error.message : String(error));
+
 export const beszelRouter = createTRPCRouter({
   getSystems: publicProcedure
     .meta({
@@ -29,8 +32,9 @@ export const beszelRouter = createTRPCRouter({
     .query(async ({ ctx }) => {
       const integrationIds = ctx.integrations.map((i) => i.id);
       logger.debug("getSystems called", { userId: ctx.session?.user?.id, integrationIds });
-      const settled = await Promise.allSettled(
-        ctx.integrations.map(async (integration) => {
+      const results = await settleIntegrationQueries(
+        ctx.integrations,
+        async (integration) => {
           const innerHandler = beszelSystemsRequestHandler.handler(integration, {});
           const { data, timestamp } = await innerHandler.getDataAsync();
           return {
@@ -40,25 +44,18 @@ export const beszelRouter = createTRPCRouter({
             systems: data,
             updatedAt: timestamp,
           };
-        }),
+        },
+        {
+          fallback: (integration, error) => ({
+            integrationId: integration.id,
+            integrationName: integration.name,
+            integrationUrl: integration.url,
+            systems: [],
+            updatedAt: new Date(0),
+            error: errorMessage(error),
+          }),
+        },
       );
-      const results = settled.map((result, index) => {
-        if (result.status === "fulfilled") return result.value;
-        const integration = ctx.integrations[index];
-        logger.warn("getSystems integration failed", {
-          userId: ctx.session?.user?.id,
-          integrationId: integration?.id,
-          error: result.reason,
-        });
-        return {
-          integrationId: integration?.id ?? "unknown",
-          integrationName: integration?.name ?? "unknown",
-          integrationUrl: integration?.url ?? "",
-          systems: [],
-          updatedAt: new Date(0),
-          error: result.reason instanceof Error ? result.reason.message : String(result.reason),
-        };
-      });
       logger.debug("getSystems completed", {
         userId: ctx.session?.user?.id,
         integrationIds,
@@ -91,8 +88,9 @@ export const beszelRouter = createTRPCRouter({
         includeHistory: input.includeHistory,
         maxHistoryItems: input.maxHistoryItems,
       });
-      const settled = await Promise.allSettled(
-        ctx.integrations.map(async (integration) => {
+      const results = await settleIntegrationQueries(
+        ctx.integrations,
+        async (integration) => {
           const alertsHandler = beszelAlertsRequestHandler.handler(integration, {
             includeHistory: input.includeHistory,
             maxHistoryItems: input.maxHistoryItems,
@@ -118,26 +116,19 @@ export const beszelRouter = createTRPCRouter({
             systemNameMap,
             updatedAt: alertsResult.timestamp,
           };
-        }),
+        },
+        {
+          fallback: (integration, error) => ({
+            integrationId: integration.id,
+            integrationName: integration.name,
+            alerts: [],
+            history: [],
+            systemNameMap: {},
+            updatedAt: new Date(0),
+            error: errorMessage(error),
+          }),
+        },
       );
-      const results = settled.map((result, index) => {
-        if (result.status === "fulfilled") return result.value;
-        const integration = ctx.integrations[index];
-        logger.warn("getAlerts integration failed", {
-          userId: ctx.session?.user?.id,
-          integrationId: integration?.id,
-          error: result.reason,
-        });
-        return {
-          integrationId: integration?.id ?? "unknown",
-          integrationName: integration?.name ?? "unknown",
-          alerts: [],
-          history: [],
-          systemNameMap: {},
-          updatedAt: new Date(0),
-          error: result.reason instanceof Error ? result.reason.message : String(result.reason),
-        };
-      });
       logger.debug("getAlerts completed", {
         userId: ctx.session?.user?.id,
         integrationIds,
@@ -200,7 +191,7 @@ export const beszelRouter = createTRPCRouter({
           systemStats: [],
           containerStats: [],
           updatedAt: new Date(0),
-          error: error instanceof Error ? error.message : String(error),
+          error: errorMessage(error),
         };
       }
     }),

packages/api/src/settle-integrations.ts

@@ -9,9 +9,14 @@ interface IntegrationLike {
   kind: string;
 }
 
+interface Options<TIntegration extends IntegrationLike, TResult> {
+  fallback?: (integration: TIntegration, error: unknown) => TResult;
+}
+
 export async function settleIntegrationQueries<TIntegration extends IntegrationLike, TResult>(
   integrations: TIntegration[],
   fn: (integration: TIntegration) => Promise<TResult>,
+  options?: Options<TIntegration, TResult>,
 ): Promise<TResult[]> {
   const settled = await Promise.allSettled(integrations.map(async (integration) => fn(integration)));
   return settled.flatMap((result, index) => {
@@ -24,6 +29,7 @@ export async function settleIntegrationQueries<TIntegration extends IntegrationL
         { cause: result.reason },
       ),
     );
+    if (options?.fallback && integration) return [options.fallback(integration, result.reason)];
     return [];
   });
 }

packages/widgets/src/ups/component.tsx

@@ -10,7 +10,6 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
-import { NoIntegrationDataError } from "../errors/no-data-integration";
 import { NoIntegrationSelectedError } from "../errors/no-integration-selected";
 
 const statusColors: Record<UpsStatus, string> = {
@@ -48,7 +47,7 @@ function UpsContent({ integrationIds, options, width }: UpsContentProps) {
   );
 
   if (devices.length === 0) {
-    throw new NoIntegrationDataError();
+    return <WidgetEmptyState />;
   }
 
   // Pick a layout from the available width so the widget stays useful at any size. The surrounding