fix: improve WebSocket error handling in CreateWorkspacePageExperimental

jaaydenh · jaaydenh · commit f65fd574c477 · 2025-05-01T17:52:47.000Z
Refactor WebSocket error handling to ensure that errors are only set when the current socket matches the active one. This prevents unnecessary error messages when the WebSocket connection closes unexpectedly
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
@@ -95,26 +95,27 @@ const CreateWorkspacePageExperimental: FC = () => {
 
 	// Initialize the WebSocket connection when there is a valid template version ID
 	useEffect(() => {
-		if (!realizedVersionId) {
-			return;
-		}
+		if (!realizedVersionId) return;
 
 		const socket = API.templateVersionDynamicParameters(
 			owner.id,
 			realizedVersionId,
 			{
 				onMessage,
 				onError: (error) => {
-					setWsError(error);
+					if (ws.current === socket) {
+						setWsError(error);
+					}
 				},
 				onClose: () => {
-					// There is no reason for the websocket to close while a user is on the page
-					setWsError(
-						new DetailedError(
-							"Websocket connection for dynamic parameters unexpectedly closed.",
-							"Refresh the page to reset the form.",
-						),
-					);
+					if (ws.current === socket) {
+						setWsError(
+							new DetailedError(
+								"Websocket connection for dynamic parameters unexpectedly closed.",
+								"Refresh the page to reset the form.",
+							),
+						);
+					}
 				},
 			},
 		);
