Optimize websocket reconnect toast rerenders

Cursor Agent committed 5 months ago

Commit 92d5c511 parent 85d15171 file · +89 −33Browse files

Unified · Split

apps/web/src/components/WebSocketConnectionSurface.tsx+89−33

-import { type ReactNode, useEffect, useEffectEvent, useRef, useState } from "react";
+import { type ReactNode, type RefObject, useEffect, useEffectEvent, useRef } from "react";
 import { type SlowRpcAckRequest, useSlowRpcAckRequests } from "../rpc/requestLatencyState";
 import {
   return connectionTimeFormatter.format(new Date(isoDate));
 }
-function formatRetryCountdown(nextRetryAt: string, nowMs: number): string {
-  const remainingMs = Math.max(0, new Date(nextRetryAt).getTime() - nowMs);
-  return `${Math.max(1, Math.ceil(remainingMs / 1000))}s`;
-}
 function describeOfflineToast(): string {
   return "WebSocket disconnected. Waiting for network.";
 }
   return "Retries exhausted trying to reconnect";
 }
+function describeReconnectToast(status: WsConnectionStatus): string {
+  const attemptLabel = formatReconnectAttemptLabel(status);
+  if (status.nextRetryAt === null) {
+    return `Reconnecting... ${attemptLabel}`;
+  }
+  return `Next reconnect attempt is scheduled for ${
+    formatConnectionMoment(status.nextRetryAt) ?? status.nextRetryAt
+  }. ${attemptLabel}`;
+}
 function getConnectionDisplayName(status: WsConnectionStatus): string {
   return status.connectionLabel?.trim() || "T3 Server";
 }
   );
 }
-export function WebSocketConnectionCoordinator() {
+interface WebSocketConnectionRefs {
-  const status = useWsConnectionStatus();
+  readonly lastForcedReconnectAtRef: RefObject<number>;
-  const [nowMs, setNowMs] = useState(() => Date.now());
+  readonly previousDisconnectedAtRef: RefObject<string | null>;
+  readonly previousUiStateRef: RefObject<WsConnectionUiState>;
+  readonly toastIdRef: RefObject<ReturnType<typeof toastManager.add> | null>;
+  readonly toastResetTimerRef: RefObject<number | null>;
+}
+function useWebSocketConnectionRefs(status: WsConnectionStatus): WebSocketConnectionRefs {
   const lastForcedReconnectAtRef = useRef(0);
   const toastIdRef = useRef<ReturnType<typeof toastManager.add> | null>(null);
   const toastResetTimerRef = useRef<number | null>(null);
-  const previousUiStateRef = useRef<WsConnectionUiState>(getWsConnectionUiState(status));
+  const previousUiStateRef = useRef<WsConnectionUiState | null>(null);
   const previousDisconnectedAtRef = useRef<string | null>(status.disconnectedAt);
+  if (previousUiStateRef.current === null) {
+    previousUiStateRef.current = getWsConnectionUiState(status);
+  }
+  return {
+    lastForcedReconnectAtRef,
+    previousDisconnectedAtRef,
+    previousUiStateRef: previousUiStateRef as RefObject<WsConnectionUiState>,
+    toastIdRef,
+    toastResetTimerRef,
+  };
+}
+function useWebSocketReconnectActions(
+  lastForcedReconnectAtRef: RefObject<number>,
+  toastResetTimerRef: RefObject<number | null>,
+) {
   const runReconnect = useEffectEvent((showFailureToast: boolean) => {
     if (toastResetTimerRef.current !== null) {
       window.clearTimeout(toastResetTimerRef.current);
     runReconnect(false);
   });
+  return {
+    runReconnect,
+    syncBrowserOnlineStatus,
+    triggerAutoReconnect,
+    triggerManualReconnect,
+  };
+}
+function useWebSocketAutoReconnectEvents(
+  syncBrowserOnlineStatus: () => void,
+  triggerAutoReconnect: (trigger: WsAutoReconnectTrigger) => void,
+) {
   useEffect(() => {
     const handleOnline = () => {
       triggerAutoReconnect("online");
       window.removeEventListener("focus", handleFocus);
     };
   }, []);
+}
-  useEffect(() => {
+function useStalledReconnectGuard(
-    if (status.reconnectPhase !== "waiting" || status.nextRetryAt === null) {
+  status: WsConnectionStatus,
-      return;
+  runReconnect: (showFailureToast: boolean) => void,
-    }
+) {
-    setNowMs(Date.now());
-    const intervalId = window.setInterval(() => {
-      setNowMs(Date.now());
-    }, 1_000);
-    return () => {
-      window.clearInterval(intervalId);
-    };
-  }, [status.nextRetryAt, status.reconnectPhase]);
   useEffect(() => {
     if (
       status.reconnectPhase !== "waiting" ||
     status.reconnectAttemptCount,
     status.reconnectPhase,
   ]);
+}
+function useWebSocketConnectionToast(
+  status: WsConnectionStatus,
+  triggerManualReconnect: () => void,
+  refs: WebSocketConnectionRefs,
+) {
+  const { previousDisconnectedAtRef, previousUiStateRef, toastIdRef, toastResetTimerRef } = refs;
   useEffect(() => {
     const uiState = getWsConnectionUiState(status);
     const previousUiState = previousUiStateRef.current;
               data: {
                 hideCopyButton: true,
               },
-              description:
+              description: describeReconnectToast(status),
-                status.nextRetryAt === null
-                  ? `Reconnecting... ${formatReconnectAttemptLabel(status)}`
-                  : `Reconnecting in ${formatRetryCountdown(status.nextRetryAt, nowMs)}... ${formatReconnectAttemptLabel(status)}`,
               timeout: 0,
               title: buildReconnectTitle(status),
               type: "loading",
     previousUiStateRef.current = uiState;
     previousDisconnectedAtRef.current = status.disconnectedAt;
-  }, [nowMs, status]);
+  }, [status]);
+}
+function useToastResetTimerCleanup(toastResetTimerRef: RefObject<number | null>) {
   useEffect(() => {
     return () => {
       if (toastResetTimerRef.current !== null) {
       }
     };
   }, []);
+}
+export function WebSocketConnectionCoordinator() {
+  const status = useWsConnectionStatus();
+  const refs = useWebSocketConnectionRefs(status);
+  const { runReconnect, syncBrowserOnlineStatus, triggerAutoReconnect, triggerManualReconnect } =
+    useWebSocketReconnectActions(refs.lastForcedReconnectAtRef, refs.toastResetTimerRef);
+  useWebSocketAutoReconnectEvents(syncBrowserOnlineStatus, triggerAutoReconnect);
+  useStalledReconnectGuard(status, runReconnect);
+  useWebSocketConnectionToast(status, triggerManualReconnect, refs);
+  useToastResetTimerCleanup(refs.toastResetTimerRef);
   return null;
 }
-export function SlowRpcAckToastCoordinator() {
+function useSlowRpcAckToast(
-  const slowRequests = useSlowRpcAckRequests();
+  status: WsConnectionStatus,
-  const status = useWsConnectionStatus();
+  slowRequests: ReadonlyArray<SlowRpcAckRequest>,
+) {
   const toastIdRef = useRef<ReturnType<typeof toastManager.add> | null>(null);
   useEffect(() => {
       toastIdRef.current = toastManager.add(nextToast);
     }
   }, [slowRequests, status]);
+}
+export function SlowRpcAckToastCoordinator() {
+  const slowRequests = useSlowRpcAckRequests();
+  const status = useWsConnectionStatus();
+  useSlowRpcAckToast(status, slowRequests);
   return null;
 }

Optimize websocket reconnect toast rerenders

Keyboard shortcuts

General

Issues and pull requests

Issues, pull requests and Inbox

Repository code