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[],
@@ -106,21 +107,21 @@ const getMissingParameters = (
  * @returns An EventSource that emits agent metadata event objects
  * (ServerSentEvent)
  */
-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 => {
+	const protocol = location.protocol === "https:" ? "wss:" : "ws:";
+	return new OneWayWebSocket(
+		`${protocol}//${location.host}/api/v2/workspaceagents/${agentId}/watch-metadata-ws`,
 	);
 };
 
 /**
  * @returns {EventSource} An EventSource that emits workspace event objects
  * (ServerSentEvent)
  */
-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 => {
+	const protocol = location.protocol === "https:" ? "wss:" : "ws:";
+	return new OneWayWebSocket(
+		`${protocol}//${location.host}/api/v2/workspaces/${workspaceId}/watch-ws`,
 	);
 };
 
@@ -1080,25 +1081,27 @@ class ApiMethods {
 	};
 
 	getWorkspaceByOwnerAndName = async (
-		username = "me",
+		username: string | undefined,
 		workspaceName: string,
 		params?: TypesGen.WorkspaceOptions,
 	): Promise<TypesGen.Workspace> => {
+		const user = username || "me";
 		const response = await this.axios.get<TypesGen.Workspace>(
-			`/api/v2/users/${username}/workspace/${workspaceName}`,
+			`/api/v2/users/${user}/workspace/${workspaceName}`,
 			{ params },
 		);
 
 		return response.data;
 	};
 
 	getWorkspaceBuildByNumber = async (
-		username = "me",
+		username
8000
: string | undefined,
 		workspaceName: string,
 		buildNumber: number,
 	): Promise<TypesGen.WorkspaceBuild> => {
+		const name = username || "me";
 		const response = await this.axios.get<TypesGen.WorkspaceBuild>(
-			`/api/v2/users/${username}/workspace/${workspaceName}/builds/${buildNumber}`,
+			`/api/v2/users/${name}/workspace/${workspaceName}/builds/${buildNumber}`,
 		);
 
 		return response.data;
@@ -1279,11 +1282,12 @@ class ApiMethods {
 	};
 
 	createWorkspace = async (
-		userId = "me",
+		userId: string | undefined,
 		workspace: TypesGen.CreateWorkspaceRequest,
 	): Promise<TypesGen.Workspace> => {
+		const id = userId || "me";
 		const response = await this.axios.post<TypesGen.Workspace>(
-			`/api/v2/users/${userId}/workspaces`,
+			`/api/v2/users/${id}/workspaces`,
 			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";
 
@@ -46,43 +49,47 @@ export const AgentMetadata: FC<AgentMetadataProps> = ({
 	agent,
 	storybookMetadata,
 }) => {
-	const [metadata, setMetadata] = useState<
-		WorkspaceAgentMetadata[] | undefined
-	>(undefined);
-
+	const [metadata, setMetadata] = useState<WorkspaceAgentMetadata[]>();
 	useEffect(() => {
 		if (storybookMetadata !== undefined) {
-			setMetadata(storybookMetadata);
 			return;
 		}
 
-		let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
+		let timeoutId: number | undefined = undefined;
+		let latestSocket: OneWayWebSocket | undefined = undefined;
 
-		const connect = (): (() => void) => {
-			const source = watchAgentMetadata(agent.id);
+		const createNewConnection = () => {
+			const socket = watchAgentMetadata(agent.id);
+			latestSocket = socket;
 
-			source.onerror = (e) => {
-				console.error("received error in watch stream", e);
+			socket.addEventListener("error", () => {
+				displayError("Socket closed unexpectedly. Creating new connection...");
 				setMetadata(undefined);
-				source.close();
-
-				timeout = setTimeout(() => {
-					connect();
-				}, 3000);
-			};
-
-			source.addEventListener("data", (e) => {
-				const data = JSON.parse(e.data);
-				setMetadata(data);
+				window.clearTimeout(timeoutId);
+				timeoutId = window.setTimeout(() => {
+					createNewConnection();
+				}, 3_000);
 			});
-			return () => {
-				if (timeout !== undefined) {
-					clearTimeout(timeout);
+
+			socket.addEventListener("message", (e) => {
+				try {
+					const payload = JSON.parse(e.data) as ServerSentEvent;
+					if (payload.type === "data") {
+						setMetadata(payload.data as WorkspaceAgentMetadata[]);
+					}
+				} catch {
+					displayError(
+						"Unable to process newest response from server. Please try refreshing the page.",
+					);
 				}
-				source.close();
-			};
+			});
+		};
+
+		createNewConnection();
+		return () => {
+			window.clearTimeout(timeoutId);
+			latestSocket?.close();
 		};
-		return connect();
 	}, [agent.id, storybookMetadata]);
 
 	if (metadata === undefined) {

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", () => {

diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -5,6 +5,7 @@ import { workspaceBuildsKey } from "api/queries/workspaceBuilds";
 import { workspaceByOwnerAndName } from "api/queries/workspaces";
 import type { Workspace } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { displayError } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
 import { useEffectEvent } from "hooks/hookPolyfills";
@@ -82,20 +83,26 @@ export const WorkspacePage: FC = () => {
 			return;
 		}
 
-		const eventSource = watchWorkspace(workspaceId);
-
-		eventSource.addEventListener("data", async (event) => {
-			const newWorkspaceData = JSON.parse(event.data) as Workspace;
-			await updateWorkspaceData(newWorkspaceData);
+		const socket = watchWorkspace(workspaceId);
+		socket.addEventListener("message", (event) => {
+			try {
+				const sse = JSON.parse(event.data);
+				if (sse.type === "data") {
+					updateWorkspaceData(sse.data as Workspace);
+				}
+			} catch {
+				displayError(
+					"Unable to process latest data from the server. Please try refreshing the page.",
+				);
+			}
 		});
-
-		eventSource.addEventListener("error", (event) => {
-			console.error("Error on getting workspace changes.", event);
+		socket.addEventListener("error", () => {
+			displayError(
+				"Unable to get workspace changes. Connection has been closed.",
+			);
 		});
 
-		return () => {
-			eventSource.close();
-		};
+		return () => socket.close();
 	}, [updateWorkspaceData, workspaceId]);
 
 	// Page statuses