Fix websocket reconnecting dialog page refresh#62
Merged
JoshuaAFerguson merged 3 commits intoNov 17, 2025
Merged
Conversation
The WebSocket reconnection dialog was causing an infinite reconnection loop that made the UI unusable. This was happening because: 1. WebSocket callback functions were being recreated on every render 2. When callbacks changed, the WebSocket hooks saw them as new dependencies 3. This triggered WebSocket disconnection and reconnection 4. State updates from reconnection triggered component re-renders 5. Back to step 1, creating an infinite loop Fixed by: - Using useRef to store WebSocket callbacks in both useWebSocket and useEnterpriseWebSocket hooks - Updating refs when callbacks change instead of recreating connections - Wrapping callbacks in useCallback in Dashboard, SessionViewer, and SharedSessions pages (defense in depth) - Removing callback dependencies from WebSocket connect() functions This ensures that callback changes don't trigger reconnection, breaking the loop and making the UI stable again. Fixes reconnection issues from PRs #60 and #61.
… mode When the WebSocket backend is unavailable, the connect() function in useEnterpriseWebSocket was being recreated on every reconnection attempt because reconnectAttempts was in its dependency array. This caused a reconnection loop that made the UI unusable. The issue: 1. WebSocket closes and schedules reconnection 2. setReconnectAttempts() updates state 3. connect() function is recreated (reconnectAttempts in dependencies) 4. New WebSocket connection created with old closure values 5. Loop continues, making UI unresponsive Fixed by: - Added reconnectAttemptsRef to track attempts without triggering recreations - Updated onopen handler to reset the ref - Updated onclose handler to check ref instead of state variable - Removed reconnectAttempts from connect() dependency array This matches the pattern already used in useWebSocket.ts and ensures the UI remains usable even when WebSocket is in degraded mode, as reconnection attempts happen in the background without disrupting the UI.
The UI was unusable in degraded WebSocket mode because the mount effects had connect/close functions in their dependency arrays, causing infinite reconnection loops: The problem: 1. useEffect runs and calls connect() on mount 2. connect() is in the dependency array 3. When connect() changes (due to its own dependencies), effect reruns 4. New WebSocket connection created while old one is still reconnecting 5. Loop continues infinitely, making UI completely unusable In useWebSocket.ts: - Removed connect and close from mount effect dependencies - Added empty dependency array with eslint-disable comment - Effect now only runs on mount/unmount as intended In useEnterpriseWebSocket.ts: - Fixed visibility change effect that had connect in dependencies - Stored isConnected in ref to avoid effect recreation - Visibility listener now set up once on mount, not on every state change - Removed connect and isConnected from visibility effect dependencies Result: - WebSocket connects once on mount - Reconnection attempts happen in background via setTimeout - After max attempts (10), reconnection stops completely - UI remains fully usable even when WebSocket backend is unavailable - No more "Reconnecting in 1s..." loop blocking the interface This fixes the degraded mode issue where users couldn't interact with the UI while WebSocket was attempting to reconnect.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.