add service logs retry

enclave-manager/web/src/components/enclaves/CreateEnclaveButton.tsx

@@ -1,5 +1,5 @@
-import { Button, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";
-import { FiPackage, FiPlus, FiSettings } from "react-icons/fi";
+import { Button, Menu, MenuButton } from "@chakra-ui/react";
+import { FiPlus } from "react-icons/fi";
 import { useNavigate } from "react-router-dom";
 import { KURTOSIS_CREATE_ENCLAVE_URL_ARG } from "../constants";
 
@@ -11,7 +11,8 @@ export const CreateEnclaveButton = () => {
         <MenuButton
           as={Button}
           colorScheme={"kurtosisGreen"}
-          leftIcon={<FiPlus />} size={"md"}
+          leftIcon={<FiPlus />}
+          size={"md"}
           onClick={() => navigate(`#${KURTOSIS_CREATE_ENCLAVE_URL_ARG}`)}
         >
           New Enclave

enclave-manager/web/src/emui/enclaves/enclave/service/logs/ServiceLogs.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 import { useKurtosisClient } from "../../../../../client/enclaveManager/KurtosisClientContext";
 import { LogLineProps } from "../../../../../components/enclaves/logs/LogLine";
 import { LogViewer } from "../../../../../components/enclaves/logs/LogViewer";
-import { isDefined, stringifyError } from "../../../../../utils";
+import { isDefined } from "../../../../../utils";
 import { EnclaveFullInfo } from "../../../types";
 
 const serviceLogLineToLogLineProps = (lines: string[], timestamp?: Timestamp): LogLineProps[] => {
@@ -20,41 +20,61 @@ type ServiceLogsProps = {
   service: ServiceInfo;
 };
 
+// @ts-ignore
+export async function reTryCatch(callback, times: number = 1, isRetry: boolean = false) {
+  try {
+    return await callback(isRetry);
+  } catch (error) {
+    if (times > 0) {
+      console.log("retrying another times ", times);
+      return await reTryCatch(callback, times - 1, true);
+    } else {
+      console.log("retry: giving up and throwing error");
+      throw error;
+    }
+  }
+}
+
 export const ServiceLogs = ({ enclave, service }: ServiceLogsProps) => {
   const kurtosisClient = useKurtosisClient();
   const [logLines, setLogLines] = useState<LogLineProps[]>([]);
 
   useEffect(() => {
-    let cancelled = false;
+    let canceled = false;
     const abortController = new AbortController();
-    (async () => {
-      setLogLines([]);
+    setLogLines([]);
+    const callback = async (isRetry: boolean) => {
+      // TODO: when we have a way to track where we left off, we don't have to clear and re-read everything
+      if(isRetry) setLogLines([]);
       try {
-        for await (const lineGroup of await kurtosisClient.getServiceLogs(abortController, enclave, [service])) {
-          if (cancelled) {
-            return;
-          }
+        console.log("Creating a new logging stream");
+        for await (const lineGroup of await kurtosisClient.getServiceLogs(
+          abortController,
+          enclave,
+          [service],
+        )) {
+          if (canceled) return;
           const lineGroupForService = lineGroup.serviceLogsByServiceUuid[service.serviceUuid];
-          if (!isDefined(lineGroupForService)) {
-            continue;
-          }
+          if (!isDefined(lineGroupForService)) continue;
           const parsedLines = serviceLogLineToLogLineProps(lineGroupForService.line, lineGroupForService.timestamp);
           setLogLines((logLines) => [...logLines, ...parsedLines]);
         }
       } catch (error: any) {
-        if (cancelled) {
+        if (canceled) {
+          console.log("The logging stream was successfully canceled (not a real error)", error);
           return;
         }
-        // TODO: We need a way to show this error
-        alert (`Error: ${stringifyError(error)}`)
+        console.error("An unhandled error occurred while streaming logs", error);
+        throw error;
       }
-    })();
+    };
+    reTryCatch(callback, 10000);
     return () => {
-      cancelled = true;
+      canceled = true;
       abortController.abort();
     };
   }, [enclave, service, kurtosisClient]);
 
-  const logsFileName = `${enclave.name}--${service.name}-logs.txt`
-  return <LogViewer logLines={logLines} logsFileName={logsFileName}/>;
+  const logsFileName = `${enclave.name}--${service.name}-logs.txt`;
+  return <LogViewer logLines={logLines} logsFileName={logsFileName} />;
 };