fix: let workspace pages download partial logs for unhealthy workspaces (coder#13761)

Parkreiner · web-flow · commit 940afa1ab1d2 · 2024-07-03T10:17:54.000-04:00
* fix: get basic fix in for  preventing download logs from blowing up UI

* fix: make sure blob units can't go out of bounds

* fix: make sure timeout is cleared on component unmount

* fix: reduce risk of shared cache state breaking useAgentLogs

* fix: allow partial downloading of logs

* fix: make sure useMemo cache is used properly

* wip: commit current progress on updated logs functionality

* docs: rewrite comment for clarity

* refactor: clean up current code

* fix: update styles for unavailable logs

* fix: resolve linter violations

* fix: update type signature of getErrorDetail

* fix: revert log/enabled logic for useAgentLogs

* fix: remove memoization from DownloadLogsDialog

* fix: update name of timeout state

* refactor: make log web sockets logic more clear

* docs: reword comment for clarity

* fix: commit current style update progress

* fix: finish style updates
diff --git a/site/src/api/errors.ts b/site/src/api/errors.ts
@@ -110,15 +110,18 @@ export const getValidationErrorMessage = (error: unknown): string => {
   return validationErrors.map((error) => error.detail).join("\n");
 };
 
-export const getErrorDetail = (error: unknown): string | undefined | null => {
+export const getErrorDetail = (error: unknown): string | undefined => {
   if (error instanceof Error) {
     return "Please check the developer console for more details.";
   }
+
   if (isApiError(error)) {
     return error.response.data.detail;
   }
+
   if (isApiErrorResponse(error)) {
     return error.detail;
   }
-  return null;
+
+  return undefined;
 };
diff --git a/site/src/modules/resources/AgentLogs/useAgentLogs.ts b/site/src/modules/resources/AgentLogs/useAgentLogs.ts
@@ -15,22 +15,35 @@ export type UseAgentLogsOptions = Readonly<{
   enabled?: boolean;
 }>;
 
+/**
+ * Defines a custom hook that gives you all workspace agent logs for a given
+ * workspace.
+ *
+ * Depending on the status of the workspace, all logs may or may not be
+ * available.
+ */
 export function useAgentLogs(
   options: UseAgentLogsOptions,
 ): readonly WorkspaceAgentLog[] | undefined {
   const { workspaceId, agentId, agentLifeCycleState, enabled = true } = options;
+
   const queryClient = useQueryClient();
   const queryOptions = agentLogs(workspaceId, agentId);
-  const query = useQuery({
-    ...queryOptions,
-    enabled,
-  });
-  const logs = query.data;
+  const { data: logs, isFetched } = useQuery({ ...queryOptions, enabled });
 
+  // Track the ID of the last log received when the initial logs response comes
+  // back. If the logs are not complete, the ID will mark the start point of the
+  // Web sockets response so that the remaining logs can be received over time
   const lastQueriedLogId = useRef(0);
   useEffect(() => {
-    if (logs && lastQueriedLogId.current === 0) {
-      lastQueriedLogId.current = logs[logs.length - 1].id;
+    const isAlreadyTracking = lastQueriedLogId.current !== 0;
+    if (isAlreadyTracking) {
+      return;
+    }
+
+    const lastLog = logs?.at(-1);
+    if (lastLog !== undefined) {
+      lastQueriedLogId.current = lastLog.id;
     }
   }, [logs]);
 
@@ -42,7 +55,7 @@ export function useAgentLogs(
   });
 
   useEffect(() => {
-    if (agentLifeCycleState !== "starting" || !query.isFetched) {
+    if (agentLifeCycleState !== "starting" || !isFetched) {
       return;
     }
 
@@ -69,7 +82,7 @@ export function useAgentLogs(
     return () => {
       socket.close();
     };
-  }, [addLogs, agentId, agentLifeCycleState, query.isFetched]);
+  }, [addLogs, agentId, agentLifeCycleState, isFetched]);
 
   return logs;
 }
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/DownloadLogsDialog.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/DownloadLogsDialog.tsx
