Skip to content

fix: add websocket close handling #17548

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 23, 2025
Merged

fix: add websocket close handling #17548

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
be06960
fix: Add websocket close handling
jaaydenh Apr 23, 2025
5d0e31d
fix: organize imports
jaaydenh Apr 23, 2025
428982a
fix: fix import
jaaydenh Apr 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions site/src/api/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1015,9 +1015,11 @@ class ApiMethods {
{
onMessage,
onError,
onClose,
}: {
onMessage: (response: TypesGen.DynamicParametersResponse) => void;
onError: (error: Error) => void;
onClose: () => void;
},
): WebSocket => {
const socket = createWebSocket(
Expand All @@ -1033,6 +1035,10 @@ class ApiMethods {
socket.close();
});

socket.addEventListener("close", () => {
onClose();
});

return socket;
};

Expand Down
12 changes: 11 additions & 1 deletion site/src/pages/CreateWorkspacePage/CreateWorkspacePageExperimental.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { ApiErrorResponse } from "api/errors";
import { DetailedError } from "api/errors";
import { checkAuthorization } from "api/queries/authCheck";
import {
templateByName,
Expand Down Expand Up @@ -107,6 +108,15 @@ const CreateWorkspacePageExperimental: FC = () => {
onError: (error) => {
setWsError(error);
},
onClose: () => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The assumption is that if the websocket closes while the component is mounted, that this is unexpected and we should inform the user with an error in the UI

// 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.",
),
);
},
},
);

Expand Down Expand Up @@ -141,7 +151,7 @@ const CreateWorkspacePageExperimental: FC = () => {
} = useExternalAuth(realizedVersionId);

const isLoadingFormData =
ws.current?.readyState !== WebSocket.OPEN ||
ws.current?.readyState === WebSocket.CONNECTING ||
templateQuery.isLoading ||
permissionsQuery.isLoading;
const loadFormDataError = templateQuery.error ?? permissionsQuery.error;
Expand Down
40 changes: 40 additions & 0 deletions site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import type { Meta, StoryObj } from "@storybook/react";
import { DetailedError } from "api/errors";
import { chromatic } from "testHelpers/chromatic";
import { MockTemplate, MockUser } from "testHelpers/entities";
import { CreateWorkspacePageViewExperimental } from "./CreateWorkspacePageViewExperimental";

const meta: Meta<typeof CreateWorkspacePageViewExperimental> = {
title: "Pages/CreateWorkspacePageViewExperimental",
parameters: { chromatic },
component: CreateWorkspacePageViewExperimental,
args: {
autofillParameters: [],
diagnostics: [],
defaultName: "",
defaultOwner: MockUser,
externalAuth: [],
externalAuthPollingState: "idle",
hasAllRequiredExternalAuth: true,
mode: "form",
parameters: [],
permissions: {
createWorkspaceForAny: true,
},
presets: [],
sendMessage: () => {},
template: MockTemplate,
},
};

export default meta;
type Story = StoryObj<typeof CreateWorkspacePageViewExperimental>;

export const WebsocketError: Story = {
args: {
error: new DetailedError(
"Websocket connection for dynamic parameters unexpectedly closed.",
"Refresh the page to reset the form.",
),
},
};
Loading