fix(frontend): frontend connects to WebSocket too early (#11493)

This commit is contained in:
Hiep Le 2025-10-26 15:35:55 +07:00 committed by GitHub
parent 7880c39ede
commit f9694858fb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 9 deletions

View File

@ -68,10 +68,15 @@ export function ConversationWebSocketProvider({
const { appendInput, appendOutput } = useCommandStore();
// Build WebSocket URL from props
const wsUrl = useMemo(
() => buildWebSocketUrl(conversationId, conversationUrl),
[conversationId, conversationUrl],
);
// Only build URL if we have both conversationId and conversationUrl
// This prevents connection attempts during task polling phase
const wsUrl = useMemo(() => {
// Don't attempt connection if we're missing required data
if (!conversationId || !conversationUrl) {
return null;
}
return buildWebSocketUrl(conversationId, conversationUrl);
}, [conversationId, conversationUrl]);
// Reset hasConnected flag when conversation changes
useEffect(() => {
@ -185,9 +190,10 @@ export function ConversationWebSocketProvider({
};
}, [handleMessage, setErrorMessage, removeErrorMessage, sessionApiKey]);
// Build a fallback URL to prevent hook from connecting if conversation data isn't ready
const websocketUrl = wsUrl || "ws://localhost/placeholder";
const { socket } = useWebSocket(websocketUrl, websocketOptions);
// Only attempt WebSocket connection when we have a valid URL
// This prevents connection attempts during task polling phase
const websocketUrl = wsUrl;
const { socket } = useWebSocket(websocketUrl || "", websocketOptions);
// V1 send message function via WebSocket
const sendMessage = useCallback(
@ -212,7 +218,7 @@ export function ConversationWebSocketProvider({
);
useEffect(() => {
// Only process socket updates if we have a valid URL
// Only process socket updates if we have a valid URL and socket
if (socket && wsUrl) {
// Update state based on socket readyState
const updateState = () => {

View File

@ -123,7 +123,10 @@ export const useWebSocket = <T = string>(
shouldReconnectRef.current = true;
attemptCountRef.current = 0;
connectWebSocket();
// Only attempt connection if we have a valid URL
if (url && url.trim() !== "") {
connectWebSocket();
}
return () => {
// Disable reconnection on unmount to prevent reconnection attempts