feat: add error page for docker tools page (#1655)

apps/nextjs/src/app/[locale]/manage/tools/docker/error.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import Link from "next/link";
+import { Anchor, Center, Stack, Text } from "@mantine/core";
+import { IconShipOff } from "@tabler/icons-react";
+
+import { useI18n } from "@homarr/translation/client";
+
+export default function DockerErrorPage() {
+  const t = useI18n();
+
+  return (
+    <Center>
+      <Stack align="center">
+        <IconShipOff size={48} stroke={1.5} />
+        <Stack align="center" gap="xs">
+          <Text size="lg" fw={500}>
+            {t("docker.error.internalServerError")}
+          </Text>
+          <Anchor size="sm" component={Link} href="/manage/tools/logs">
+            {t("common.action.checkLogs")}
+          </Anchor>
+        </Stack>
+      </Stack>
+    </Center>
+  );
+}

packages/api/src/router/docker/docker-router.ts

@@ -5,6 +5,7 @@ import type { Container } from "dockerode";
 import { db, like, or } from "@homarr/db";
 import { icons } from "@homarr/db/schema/sqlite";
 import type { DockerContainerState } from "@homarr/definitions";
+import { logger } from "@homarr/log";
 import { createCacheChannel } from "@homarr/redis";
 import { z } from "@homarr/validation";
 
@@ -17,7 +18,8 @@ const dockerCache = createCacheChannel<{
 
 export const dockerRouter = createTRPCRouter({
   getContainers: permissionRequiredProcedure.requiresPermission("admin").query(async () => {
-    const { timestamp, data } = await dockerCache.consumeAsync(async () => {
+    const result = await dockerCache
+      .consumeAsync(async () => {
         const dockerInstances = DockerSingleton.getInstance();
         const containers = await Promise.all(
           // Return all the containers of all the instances into only one item
@@ -52,8 +54,25 @@ export const dockerRouter = createTRPCRouter({
               })?.url ?? null,
           })),
         };
+      })
+      .catch((error) => {
+        logger.error(error);
+        return {
+          isError: true,
+          error: error as unknown,
+        };
       });
 
+    if ("isError" in result) {
+      throw new TRPCError({
+        code: "INTERNAL_SERVER_ERROR",
+        message: "An error occurred while fetching the containers",
+        cause: result.error,
+      });
+    }
+
+    const { data, timestamp } = result;
+
     return {
       containers: sanitizeContainers(data.containers),
       timestamp,

packages/translation/src/lang/en.json

@@ -678,6 +678,7 @@
       "previous": "Previous",
       "next": "Next",
       "checkoutDocs": "Check out the documentation",
+      "checkLogs": "Check logs for more details",
       "tryAgain": "Try again",
       "loading": "Loading"
     },
@@ -1309,9 +1310,6 @@
         "description": "Click <here></here> to create a new app"
       },
       "error": {
-        "action": {
-          "logs": "Check logs for more details"
-        },
         "noIntegration": "No integration selected",
         "noData": "No integration data available"
       },
@@ -2305,6 +2303,9 @@
           }
         }
       }
+    },
+    "error": {
+      "internalServerError": "Failed to fetch Docker containers"
     }
   },
   "permission": {

packages/widgets/src/errors/base-component.tsx

@@ -23,7 +23,7 @@ export const BaseWidgetError = (props: BaseWidgetErrorProps) => {
         <Text ta="center">{translateIfNecessary(t, props.message)}</Text>
         {props.showLogsLink && (
           <Anchor component={Link} href="/manage/tools/logs" target="_blank" ta="center" size="sm">
-            {t("widget.common.error.action.logs")}
+            {t("common.action.checkLogs")}
           </Anchor>
         )}
       </Stack>