coder · Parkreiner · Mar 28, 2025 · Mar 7, 2025 · Mar 7, 2025 · Mar 7, 2025
diff --git a/site/package.json b/site/package.json
@@ -164,7 +164,6 @@
 		"@vitejs/plugin-react": "4.3.4",
 		"autoprefixer": "10.4.20",
 		"chromatic": "11.25.2",
-		"eventsourcemock": "2.0.0",
 		"express": "4.21.2",
 		"jest": "29.7.0",
 		"jest-canvas-mock": "2.5.2",

diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/@types/eventsourcemock.d.ts b/site/src/@types/eventsourcemock.d.ts
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -22,9 +22,10 @@
 import globalAxios, { type AxiosInstance, isAxiosError } from "axios";
 import type dayjs from "dayjs";
 import userAgentParser from "ua-parser-js";
+import { OneWayWebSocket } from "utils/OneWayWebSocket";
 import { delay } from "../utils/delay";
-import * as TypesGen from "./typesGenerated";
 import type { PostWorkspaceUsageRequest } from "./typesGenerated";
+import * as TypesGen from "./typesGenerated";
 
 const getMissingParameters = (
 	oldBuildParameters: TypesGen.WorkspaceBuildParameter[],
@@ -103,25 +104,25 @@ const getMissingParameters = (
 /**
  *
  * @param agentId
- * @returns An EventSource that emits agent metadata event objects
- * (ServerSentEvent)
+ * @returns {OneWayWebSocket} A OneWayWebSocket that emits Server-Sent Events.
  */
-export const watchAgentMetadata = (agentId: string): EventSource => {
-	return new EventSource(
-		`${location.protocol}//${location.host}/api/v2/workspaceagents/${agentId}/watch-metadata`,
-		{ withCredentials: true },
-	);
+export const watchAgentMetadata = (
+	agentId: string,
+): OneWayWebSocket<TypesGen.ServerSentEvent> => {
+	return new OneWayWebSocket({
+		apiRoute: `/api/v2/workspaceagents/${agentId}/watch-metadata-ws`,
+	});
 };
 
 /**
- * @returns {EventSource} An EventSource that emits workspace event objects
- * (ServerSentEvent)
+ * @returns {OneWayWebSocket} A OneWayWebSocket that emits Server-Sent Events.
  */
-export const watchWorkspace = (workspaceId: string): EventSource => {
-	return new EventSource(
-		`${location.protocol}//${location.host}/api/v2/workspaces/${workspaceId}/watch`,
-		{ withCredentials: true },
-	);
+export const watchWorkspace = (
+	workspaceId: string,
+): OneWayWebSocket<TypesGen.ServerSentEvent> => {
+	return new OneWayWebSocket({
+		apiRoute: `/api/v2/workspaces/${workspaceId}/watch-ws`,
+	});
 };
 
 export const getURLWithSearchParams = (
@@ -1080,7 +1081,7 @@ class ApiMethods {
 	};
 
 	getWorkspaceByOwnerAndName = async (
-		username = "me",
+		username: string,
 		workspaceName: string,
 		params?: TypesGen.WorkspaceOptions,
 	): Promise<TypesGen.Workspace> => {
@@ -1093,7 +1094,7 @@ class ApiMethods {
 	};
 
 	getWorkspaceBuildByNumber = async (
-		username = "me",
+		username: string,
 		workspaceName: string,
 		buildNumber: number,
 	): Promise<TypesGen.WorkspaceBuild> => {
@@ -1279,7 +1280,7 @@ class ApiMethods {
 	};
 
 	createWorkspace = async (
-		userId = "me",
+		userId: string,
 		workspace: TypesGen.CreateWorkspaceRequest,
 	): Promise<TypesGen.Workspace> => {
 		const response = await this.axios.post<TypesGen.Workspace>(

diff --git a/site/src/modules/resources/AgentMetadata.tsx b/site/src/modules/resources/AgentMetadata.tsx
@@ -3,9 +3,11 @@ import Skeleton from "@mui/material/Skeleton";
 import Tooltip from "@mui/material/Tooltip";
 import { watchAgentMetadata } from "api/api";
 import type {
+	ServerSentEvent,
 	WorkspaceAgent,
 	WorkspaceAgentMetadata,
 } from "api/typesGenerated";
+import { displayError } from "components/GlobalSnackbar/utils";
 import { Stack } from "components/Stack/Stack";
 import dayjs from "dayjs";
 import {
@@ -17,6 +19,7 @@ import {
 	useState,
 } from "react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
+import type { OneWayWebSocket } from "utils/OneWayWebSocket";
 
 type ItemStatus = "stale" | "valid" | "loading";
 
@@ -42,58 +45,90 @@ interface AgentMetadataProps {
 	storybookMetadata?: WorkspaceAgentMetadata[];
 }
 
+const maxSocketErrorRetryCount = 3;
+
 export const AgentMetadata: FC<AgentMetadataProps> = ({
 	agent,
 	storybookMetadata,
 }) => {
-	const [metadata, setMetadata] = useState<
-		WorkspaceAgentMetadata[] | undefined
-	>(undefined);
-
+	const [activeMetadata, setActiveMetadata] = useState(storybookMetadata);
 	useEffect(() => {
+		// This is an unfortunate pitfall with this component's testing setup,
+		// but even though we use the value of storybookMetadata as the initial
+		// value of the activeMetadata, we cannot put activeMetadata itself into
+		// the dependency array. If we did, we would destroy and rebuild each
+		// connection every single time a new message comes in from the socket,
+		// because the socket has to be wired up to the state setter
 		if (storybookMetadata !== undefined) {
-			setMetadata(storybookMetadata);
 			return;
 		}
 
-		let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
-
-		const connect = (): (() => void) => {
-			const source = watchAgentMetadata(agent.id);
+		let timeoutId: number | undefined = undefined;
+		let activeSocket: OneWayWebSocket<ServerSentEvent> | null = null;
+		let retries = 0;
+
+		const createNewConnection = () => {
+			const socket = watchAgentMetadata(agent.id);
+			activeSocket = socket;
+
+			socket.addEventListener("error", () => {
+				setActiveMetadata(undefined);
+				window.clearTimeout(timeoutId);
+
+				// The error event is supposed to fire when an error happens
+				// with the connection itself, which implies that the connection
+				// would auto-close. Couldn't find a definitive answer on MDN,
+				// though, so closing it manually just to be safe
+				socket.close();
+				activeSocket = null;
+
+				retries++;
+				if (retries >= maxSocketErrorRetryCount) {
+					displayError(
+						"Unexpected disconnect while watching Metadata changes. Please try refreshing the page.",
+					);
+					return;
+				}
 
-			source.onerror = (e) => {
-				console.error("received error in watch stream", e);
-				setMetadata(undefined);
-				source.close();
+				displayError(
+					"Unexpected disconnect while watching Metadata changes. Creating new connection...",
+				);
+				timeoutId = window.setTimeout(() => {
+					createNewConnection();
+				}, 3_000);
+			});
 
-				timeout = setTimeout(() => {
-					connect();
-				}, 3000);
-			};
+			socket.addEventListener("message", (e) => {
+				if (e.parseError) {
+					displayError(
+						"Unable to process newest response from server. Please try refreshing the page.",
+					);
+					return;
+				}
 
-			source.addEventListener("data", (e) => {
-				const data = JSON.parse(e.data);
-				setMetadata(data);
-			});
-			return () => {
-				if (timeout !== undefined) {
-					clearTimeout(timeout);
+				const msg = e.parsedMessage;
+				if (msg.type === "data") {
+					setActiveMetadata(msg.data as WorkspaceAgentMetadata[]);
 				}
-				source.close();
-			};
+			});
+		};
+
+		createNewConnection();
+		return () => {
+			window.clearTimeout(timeoutId);
+			activeSocket?.close();
 		};
-		return connect();
 	}, [agent.id, storybookMetadata]);
 
-	if (metadata === undefined) {
+	if (activeMetadata === undefined) {
 		return (
 			<section css={styles.root}>
 				<AgentMetadataSkeleton />
 			</section>
 		);
 	}
 
-	return <AgentMetadataView metadata={metadata} />;
+	return <AgentMetadataView metadata={activeMetadata} />;
 };
 
 export const AgentMetadataSkeleton: FC = () => {

diff --git a/site/src/modules/templates/useWatchVersionLogs.ts b/site/src/modules/templates/useWatchVersionLogs.ts
@@ -1,46 +1,38 @@
 import { watchBuildLogsByTemplateVersionId } from "api/api";
 import type { ProvisionerJobLog, TemplateVersion } from "api/typesGenerated";
+import { useEffectEvent } from "hooks/hookPolyfills";
 import { useEffect, useState } from "react";
 
 export const useWatchVersionLogs = (
 	templateVersion: TemplateVersion | undefined,
 	options?: { onDone: () => Promise<unknown> },
 ) => {
-	const [logs, setLogs] = useState<ProvisionerJobLog[] | undefined>();
+	const [logs, setLogs] = useState<ProvisionerJobLog[]>();
 	const templateVersionId = templateVersion?.id;
-	const templateVersionStatus = templateVersion?.job.status;
+	const [cachedVersionId, setCachedVersionId] = useState(templateVersionId);
+	if (cachedVersionId !== templateVersionId) {
+		setCachedVersionId(templateVersionId);
+		setLogs([]);
+	}
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: consider refactoring
+	const stableOnDone = useEffectEvent(() => options?.onDone());
+	const status = templateVersion?.job.status;
+	const canWatch = status === "running" || status === "pending";
 	useEffect(() => {
-		setLogs(undefined);
-	}, [templateVersionId]);
-
-	useEffect(() => {
-		if (!templateVersionId || !templateVersionStatus) {
-			return;
-		}
-
-		if (
-			templateVersionStatus !== "running" &&
-			templateVersionStatus !== "pending"
-		) {
+		if (!templateVersionId || !canWatch) {
 			return;
 		}
 
 		const socket = watchBuildLogsByTemplateVersionId(templateVersionId, {
-			onMessage: (log) => {
-				setLogs((logs) => (logs ? [...logs, log] : [log]));
-			},
-			onDone: options?.onDone,
-			onError: (error) => {
-				console.error(error);
+			onError: (error) => console.error(error),
+			onDone: stableOnDone,
+			onMessage: (newLog) => {
+				setLogs((current) => [...(current ?? []), newLog]);
 			},
 		});
 
-		return () => {
-			socket.close();
-		};
-	}, [options?.onDone, templateVersionId, templateVersionStatus]);
+		return () => socket.close();
+	}, [stableOnDone, canWatch, templateVersionId]);
 
 	return logs;
 };
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx
@@ -2,7 +2,7 @@ import { screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import * as apiModule from "api/api";
 import type { TemplateVersionParameter, Workspace } from "api/typesGenerated";
-import EventSourceMock from "eventsourcemock";
+import MockServerSocket from "jest-websocket-mock";
 import {
 	DashboardContext,
 	type DashboardProvider,
@@ -84,23 +84,11 @@ const testButton = async (
 
 	const user = userEvent.setup();
 	await user.click(button);
-	expect(actionMock).toBeCalled();
+	expect(actionMock).toHaveBeenCalled();
 };
 
-let originalEventSource: typeof window.EventSource;
-
-beforeAll(() => {
-	originalEventSource = window.EventSource;
-	// mocking out EventSource for SSE
-	window.EventSource = EventSourceMock;
-});
-
-beforeEach(() => {
-	jest.resetAllMocks();
-});
-
-afterAll(() => {
-	window.EventSource = originalEventSource;
+afterEach(() => {
+	MockServerSocket.clean();
 });
 
 describe("WorkspacePage", () => {