Skip to content

feat: show toast when builder is offline #5096

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 1 commit into from
Apr 5, 2025
Merged

feat: show toast when builder is offline #5096

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions apps/builder/app/builder/features/topbar/sync-status.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
} from "@webstudio-is/design-system";
import { OfflineIcon } from "@webstudio-is/icons";
import { useEffect } from "react";
import { queueStatus } from "~/builder/shared/sync";
import { $queueStatus } from "~/builder/shared/sync";

const $isOnline = atom(false);

Expand All @@ -24,7 +24,7 @@ const subscribeIsOnline = () => {
};

export const SyncStatus = () => {
const statusObject = useStore(queueStatus);
const statusObject = useStore($queueStatus);
const isOnline = useStore($isOnline);
useEffect(subscribeIsOnline, []);

Expand Down
2 changes: 1 addition & 1 deletion apps/builder/app/builder/shared/sync/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { useSyncServer, queueStatus } from "./sync-server";
export { useSyncServer, $queueStatus } from "./sync-server";
24 changes: 14 additions & 10 deletions apps/builder/app/builder/shared/sync/sync-server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export type QueueStatus =
| { status: "failed" }
| { status: "fatal"; error: string };

export const queueStatus = atom<QueueStatus>({ status: "idle" });
export const $queueStatus = atom<QueueStatus>({ status: "idle" });

const getRandomBetween = (a: number, b: number) => {
return Math.random() * (b - a) + a;
Expand All @@ -50,13 +50,13 @@ const pollCommands = async function* () {
while (true) {
const commands = commandQueue.dequeueAll();
if (commands.length > 0) {
queueStatus.set({ status: "running" });
$queueStatus.set({ status: "running" });
yield* commands;
await pause(NEW_ENTRIES_INTERVAL);
// Do not switch on idle state until there is possibility that queue is not empty
continue;
}
queueStatus.set({ status: "idle" });
$queueStatus.set({ status: "idle" });
await pause(NEW_ENTRIES_INTERVAL);
}
};
Expand All @@ -69,16 +69,20 @@ const retry = async function* () {
yield;
failedAttempts += 1;
if (failedAttempts < MAX_RETRY_RECOVERY) {
queueStatus.set({ status: "recovering" });
$queueStatus.set({ status: "recovering" });
await pause(INTERVAL_RECOVERY);
} else {
queueStatus.set({ status: "failed" });
$queueStatus.set({ status: "failed" });

// Clamped exponential backoff with decorrelated jitter
// to prevent clients from sending simultaneous requests after server issues
delay = getRandomBetween(INTERVAL_ERROR, delay * 3);
delay = Math.min(delay, MAX_INTERVAL_ERROR);

toast.error(
`Builder is offline. Retry in ${Math.round(delay / 1000)} seconds.`
);

await pause(delay);
}
}
Expand Down Expand Up @@ -116,7 +120,7 @@ const syncServer = async function () {
}

// stop synchronization and wait til user reload
queueStatus.set({ status: "fatal", error });
$queueStatus.set({ status: "fatal", error });

if (shouldReload === false) {
toast.error(
Expand Down Expand Up @@ -148,7 +152,7 @@ const syncServer = async function () {
duration: Number.POSITIVE_INFINITY,
});

queueStatus.set({ status: "fatal", error });
$queueStatus.set({ status: "fatal", error });

return;
}
Expand Down Expand Up @@ -198,7 +202,7 @@ const syncServer = async function () {
location.reload();
}

queueStatus.set({ status: "fatal", error });
$queueStatus.set({ status: "fatal", error });

if (shouldReload === false) {
toast.error(
Expand All @@ -217,7 +221,7 @@ const syncServer = async function () {
} Synchronization has been paused.`;
// Api error we don't know how to handle, as retries will not help probably
// We should show error and break synchronization
queueStatus.set({ status: "fatal", error });
$queueStatus.set({ status: "fatal", error });

toast.error(error, {
id: "fatal-error",
Expand Down Expand Up @@ -333,7 +337,7 @@ export const useSyncServer = ({ projectId, authPermit }: SyncServerProps) => {

useEffect(() => {
const handler = (event: BeforeUnloadEvent) => {
const { status } = queueStatus.get();
const { status } = $queueStatus.get();
if (status === "idle" || status === "fatal") {
return;
}
Expand Down