fix: improve WebSocket error handling in CreateWorkspacePageExperimental (#17647)

jaaydenh · web-flow · commit e718c3ab2f22 · 2025-05-01T19:02:34.000-04:00
Refactor WebSocket error handling to ensure that errors are only set
when the current socket ref matches the active one. This prevents
unnecessary error messages when the WebSocket connection closes
unexpectedly

This solves the problem of showing error messages because of React
Strict mode rendering the page twice and opening 2 websocket
connections.
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.",
+							),
+						);
+					}
 				},
 			},
 		);
