Skip to content

Fix websocket reconnecting dialog page refresh#62

Merged
JoshuaAFerguson merged 3 commits into
mainfrom
claude/fix-websocket-reconnect-dialog-01Lez7TsGtGcw4qj4UwD36HT
Nov 17, 2025
Merged

Fix websocket reconnecting dialog page refresh#62
JoshuaAFerguson merged 3 commits into
mainfrom
claude/fix-websocket-reconnect-dialog-01Lez7TsGtGcw4qj4UwD36HT

Conversation

@JoshuaAFerguson

Copy link
Copy Markdown
Member

No description provided.

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.
@JoshuaAFerguson JoshuaAFerguson merged commit 2003899 into main Nov 17, 2025
8 of 23 checks passed
@JoshuaAFerguson JoshuaAFerguson deleted the claude/fix-websocket-reconnect-dialog-01Lez7TsGtGcw4qj4UwD36HT branch November 17, 2025 16:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants