Commitef6e6e4

authored

fix: add websocket close handling (#17548)

resolves#17508 Display an error in the UI that the websocket closed if the user isstill interacting with the dynamic parameters form<img width="795" alt="Screenshot 2025-04-23 at 17 57 25"src="https://github.com/user-attachments/assets/15362ddb-fe01-462e-8537-a48302c5c621"/>

1 parent3567d45 commitef6e6e4Copy full SHA for ef6e6e4

File tree

+57

-2

lines changed

+57

-2

lines changed

Lines changed: 6 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -1015,9 +1015,11 @@ class ApiMethods {`
`1015`	`1015`	`{`
`1016`	`1016`	`onMessage,`
`1017`	`1017`	`onError,`
	`1018`	`+onClose,`
`1018`	`1019`	`}:{`
`1019`	`1020`	`onMessage:(response:TypesGen.DynamicParametersResponse)=>void;`
`1020`	`1021`	`onError:(error:Error)=>void;`
	`1022`	`+onClose:()=>void;`
`1021`	`1023`	`},`
`1022`	`1024`	`):WebSocket=>{`
`1023`	`1025`	`constsocket=createWebSocket(`
`@@ -1033,6 +1035,10 @@ class ApiMethods {`
`1033`	`1035`	`socket.close();`
`1034`	`1036`	`});`
`1035`	`1037`
	`1038`	`+socket.addEventListener("close",()=>{`
	`1039`	`+onClose();`
	`1040`	`+});`
	`1041`	`+`
`1036`	`1042`	`returnsocket;`
`1037`	`1043`	`};`
`1038`	`1044`

Lines changed: 11 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-importtype{ApiErrorResponse}from"api/errors";`
	`1`	`+import{typeApiErrorResponse,DetailedError}from"api/errors";`
`2`	`2`	`import{checkAuthorization}from"api/queries/authCheck";`
`3`	`3`	`import{`
`4`	`4`	`templateByName,`
`@@ -107,6 +107,15 @@ const CreateWorkspacePageExperimental: FC = () => {`
`107`	`107`	`onError:(error)=>{`
`108`	`108`	`setWsError(error);`
`109`	`109`	`},`
	`110`	`+onClose:()=>{`
	`111`	`+// There is no reason for the websocket to close while a user is on the page`
	`112`	`+setWsError(`
	`113`	`+newDetailedError(`
	`114`	`+"Websocket connection for dynamic parameters unexpectedly closed.",`
	`115`	`+"Refresh the page to reset the form.",`
	`116`	`+),`
	`117`	`+);`
	`118`	`+},`
`110`	`119`	`},`
`111`	`120`	`);`
`112`	`121`
`@@ -141,7 +150,7 @@ const CreateWorkspacePageExperimental: FC = () => {`
`141`	`150`	`}=useExternalAuth(realizedVersionId);`
`142`	`151`
`143`	`152`	`constisLoadingFormData=`
`144`		`-ws.current?.readyState!==WebSocket.OPEN\|\|`
	`153`	`+ws.current?.readyState===WebSocket.CONNECTING\|\|`
`145`	`154`	`templateQuery.isLoading\|\|`
`146`	`155`	`permissionsQuery.isLoading;`
`147`	`156`	`constloadFormDataError=templateQuery.error??permissionsQuery.error;`

Lines changed: 40 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,40 @@`
	`1`	`+importtype{Meta,StoryObj}from"@storybook/react";`
	`2`	`+import{DetailedError}from"api/errors";`
	`3`	`+import{chromatic}from"testHelpers/chromatic";`
	`4`	`+import{MockTemplate,MockUser}from"testHelpers/entities";`
	`5`	`+import{CreateWorkspacePageViewExperimental}from"./CreateWorkspacePageViewExperimental";`
	`6`	`+`
	`7`	`+constmeta:Meta<typeofCreateWorkspacePageViewExperimental>={`
	`8`	`+title:"Pages/CreateWorkspacePageViewExperimental",`
	`9`	`+parameters:{ chromatic},`
	`10`	`+component:CreateWorkspacePageViewExperimental,`
	`11`	`+args:{`
	`12`	`+autofillParameters:[],`
	`13`	`+diagnostics:[],`
	`14`	`+defaultName:"",`
	`15`	`+defaultOwner:MockUser,`
	`16`	`+externalAuth:[],`
	`17`	`+externalAuthPollingState:"idle",`
	`18`	`+hasAllRequiredExternalAuth:true,`
	`19`	`+mode:"form",`
	`20`	`+parameters:[],`
	`21`	`+permissions:{`
	`22`	`+createWorkspaceForAny:true,`
	`23`	`+},`
	`24`	`+presets:[],`
	`25`	`+sendMessage:()=>{},`
	`26`	`+template:MockTemplate,`
	`27`	`+},`
	`28`	`+};`
	`29`	`+`
	`30`	`+exportdefaultmeta;`
	`31`	`+typeStory=StoryObj<typeofCreateWorkspacePageViewExperimental>;`
	`32`	`+`
	`33`	`+exportconstWebsocketError:Story={`
	`34`	`+args:{`
	`35`	`+error:newDetailedError(`
	`36`	`+"Websocket connection for dynamic parameters unexpectedly closed.",`
	`37`	`+"Refresh the page to reset the form.",`
	`38`	`+),`
	`39`	`+},`
	`40`	`+};`

Comments

(0)