openclaw - 💡(How to fix) Fix [Feature]: Control UI should auto-reconnect after gateway restart [1 participants]

When the gateway restarts (either planned or due to a crash like #55346), the control UI's WebSocket connection drops. The user is immediately redirected to the login page, followed by a 502 error while the gateway is still booting. After a few seconds they can refresh and log back in, but this is disruptive — especially when restarts are frequent.

Fix Plan

To implement a WebSocket reconnect mechanism with backoff, follow these steps:

• Modify the control UI's WebSocket connection establishment code to include a reconnect function with exponential backoff.
• Use the existing session/token to reconnect automatically when the gateway is back online.

Example Code

// WebSocket connection with reconnect
const wsUrl = 'ws://127.0.0.1:18789';
let ws;
let reconnectTimeout;
let reconnectAttempts = 0;
const maxReconnectAttempts = 5;
const reconnectBackoff = 500; // initial backoff in milliseconds

function establishConnection() {
  ws = new WebSocket(wsUrl);
  ws.onclose = () => {
    reconnect();
  };
  ws.onmessage = (event) => {
    // handle incoming messages
  };
  ws.onerror = (event) => {
    // handle errors
  };
}

function reconnect() {
  reconnectAttempts++;
  if (reconnectAttempts <= maxReconnectAttempts) {
    reconnectTimeout = setTimeout(() => {
      establishConnection();
    }, reconnectBackoff * reconnectAttempts);
  } else {
    // handle max reconnect attempts exceeded
  }
}

establishConnection();

Verification

To verify the fix, restart the gateway and observe the control UI's behavior. The UI should detect the WebSocket disconnection, wait, and retry the connection with backoff. Once the gateway is back online, the UI should automatically reconnect using the existing session/token and resume where the user left off.

Extra Tips

• Ensure the reconnect backoff values are adjusted according to the typical gateway restart duration (5-10 seconds in this case).
• Consider implementing a maximum reconnect attempts limit to prevent infinite reconnect loops.
• Monitor the control UI's behavior and adjust the reconnect mechanism as needed to ensure a seamless user experience.