fix(UI-1709): fix timeout with chat in iframe (#1264)

Author: RonenMars

src/hooks/useChatbotIframe.ts

@@ -9,7 +9,7 @@ import { EventListenerName } from "@src/enums";
 import { triggerEvent } from "@src/hooks";
 
 export const useChatbotIframeConnection = (iframeRef: React.RefObject<HTMLIFrameElement>, onConnect?: () => void) => {
-	const { t } = useTranslation("chatbot", { keyPrefix: "iframeComponent" });
+	const { t } = useTranslation("chatbot");
 
 	const [isLoading, setIsLoading] = useState<boolean>(true);
 	const [loadError, setLoadError] = useState<string | null>(null);
@@ -44,8 +44,8 @@ export const useChatbotIframeConnection = (iframeRef: React.RefObject<HTMLIFrame
 
 		const eventErrorDetail = detail || localizedBaseMessage;
 		triggerEvent(EventListenerName.iframeError, {
-			message: tRef.current("connectionError"),
-			error: tRef.current("connectionErrorExtended", { error: eventErrorDetail }),
+			message: tRef.current("iframeComponent.connectionError"),
+			error: tRef.current("iframeComponent.connectionErrorExtended", { error: eventErrorDetail }),
 		});
 	}, []);
 
@@ -65,22 +65,63 @@ export const useChatbotIframeConnection = (iframeRef: React.RefObject<HTMLIFrame
 		let isMounted = true;
 		const currentIframe = iframeRef.current;
 		let timeoutId: number | undefined = undefined;
+		let retryTimeoutId: number | undefined = undefined;
 
 		iframeCommService.setIframe(currentIframe);
 
-		const connectAsync = async () => {
+		const connectionConfig = {
+			maxRetries: 3,
+			retryDelay: 2000,
+		} as const;
+
+		const scheduleRetry = (reason: string, retryCount: number, errorType: string, errorDetail: string): boolean => {
+			if (retryCount < connectionConfig.maxRetries && isMounted) {
+				LoggerService.debug(
+					namespaces.chatbot,
+					t("errors.serverRespondedWithStatus", {
+						reason,
+						retryDelay: connectionConfig.retryDelay,
+						currentAttempt: retryCount + 1,
+						maxAttempts: connectionConfig.maxRetries + 1,
+					})
+				);
+				retryTimeoutId = window.setTimeout(() => {
+					if (isMounted) {
+						connectAsync(retryCount + 1);
+					}
+				}, connectionConfig.retryDelay);
+				return true;
+			}
+
+			isConnectingRef.current = false;
+			handleError(errorType, errorDetail);
+			return false;
+		};
+
+		const connectAsync = async (retryCount = 0) => {
 			try {
 				const response = await fetch(aiChatbotUrl, { method: "HEAD", credentials: "include" });
 				if (!response.ok) {
 					if (isMounted) {
-						handleError("connectionRefused", `Server responded with status ${response.status}`);
+						scheduleRetry(
+							`Server responded with status ${response.status}`,
+							retryCount,
+							"connectionRefused",
+							`Server responded with status ${response.status}`
+						);
 					}
 					return;
 				}
 
 				timeoutId = window.setTimeout(() => {
 					if (isLoadingRef.current && isMounted) {
-						handleError("connectionError", "Timeout waiting for iframe connection");
+						if (timeoutId) clearTimeout(timeoutId);
+						scheduleRetry(
+							"Connection timeout",
+							retryCount,
+							"connectionError",
+							"Timeout waiting for iframe connection"
+						);
 					}
 				}, chatbotIframeConnectionTimeout);
 
@@ -95,15 +136,13 @@ export const useChatbotIframeConnection = (iframeRef: React.RefObject<HTMLIFrame
 						setIsRetryLoading(false);
 					}, 1750);
 					onConnectRef.current?.();
+					isConnectingRef.current = false;
 				}
 			} catch (error) {
 				if (timeoutId) clearTimeout(timeoutId);
 				if (isMounted) {
-					handleError("connectionError", error instanceof Error ? error.message : String(error));
-				}
-			} finally {
-				if (isMounted) {
-					isConnectingRef.current = false;
+					const errorMessage = error instanceof Error ? error.message : String(error);
+					scheduleRetry(`Connection error: ${errorMessage}`, retryCount, "connectionError", errorMessage);
 				}
 			}
 		};
@@ -116,9 +155,12 @@ export const useChatbotIframeConnection = (iframeRef: React.RefObject<HTMLIFrame
 			if (timeoutId) {
 				clearTimeout(timeoutId);
 			}
+			if (retryTimeoutId) {
+				clearTimeout(retryTimeoutId);
+			}
 		};
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [iframeRef, isIframeElementLoaded]);
+	}, [iframeRef, isIframeElementLoaded, t]);
 
 	const handleRetry = useCallback(() => {
 		if (iframeRef.current) {
@@ -135,20 +177,21 @@ export const useChatbotIframeConnection = (iframeRef: React.RefObject<HTMLIFrame
 				url.searchParams.set("retry", Date.now().toString());
 				iframeRef.current.src = url.toString();
 			} catch (error) {
-				LoggerService.error(namespaces.chatbot, `Error setting iframe src: ${error}`);
+				LoggerService.error(namespaces.chatbot, t("errors.errorSettingIframeSrc", { error }));
 			}
 
 			setTimeout(() => {
 				setIsRetryLoading(false);
 			}, 1750);
 		} else {
-			LoggerService.error(namespaces.chatbot, "iframeRef.current is null, cannot retry");
+			LoggerService.error(namespaces.chatbot, t("errors.iframeRefIsNull"));
 			setTimeout(() => {
 				setIsRetryLoading(false);
 			}, 1750);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [iframeRef, aiChatbotUrl]);
+	}, [iframeRef, aiChatbotUrl, t]);
+
 	return {
 		isLoading,
 		loadError,

src/locales/en/chatbot/translation.json

@@ -17,5 +17,10 @@
 		"connectionRefused": "The AI assistant is not available at the moment. Please try again later.",
 		"aiTitle": "AI Assistant",
 		"configTitle": "Status"
+	},
+	"errors": {
+		"serverRespondedWithStatus": "{{reason}}, retrying in {{retryDelay}}ms (attempt {{currentAttempt}}/{{maxAttempts}})",
+		"errorSettingIframeSrc": "Error setting iframe src: {{error}}",
+		"iframeRefIsNull": "iframeRef.current is null, cannot retry"
 	}
 }

src/locales/en/services/translation.json

@@ -118,14 +118,42 @@
 	"errorRemovingUserToOrganization": "Removing user from organization failed",
 	"errorRemovingUserToOrganizationExtended": "Removing user from organization failed, organization ID: {{organizationId}}, error: {{error}}",
 	"errorUpdatingUserToOrganizationExtended": "Updating user to organization failed, organization ID: {{organizationId}}, error: {{error}}",
-	"iframeComm": {
-		"iframeReferenceNotSet": "Iframe reference not set",
-		"noConnectionAttemptInProgress": "No connection attempt in progress",
-		"iframeContentWindowNotAvailable": "Iframe contentWindow is not available",
-		"requestTimeoutForResource": "Request timeout for resource: {{resource}}",
-		"invalidMessageReceivedOrSourceMismatch": "Invalid message received or source mismatch: {{message}}",
-		"errorProcessingIncomingMessage": "Error processing incoming message: {{error}}",
-		"errorImportingStoreForFileContentHandling": "Error importing store for file content handling: {{error}}",
-		"errorImportingStoreForDiagramDisplayHandling": "Error importing store for diagram display handling: {{error}}"
+	"debug": {
+		"iframeComm": {
+			"settingIframeReference": "Setting iframe reference",
+			"destroyingService": "Destroying service - cleaning up all resources",
+			"resettingService": "Resetting service for navigation",
+			"initiatingHandshake": "Initiating handshake with iframe",
+			"handshakeMessageSent": "Handshake message sent",
+			"alreadyConnected": "Already connected, returning",
+			"noConnectionPromiseExists": "No connection promise exists, trying to initiate handshake",
+			"waitingForConnection": "Waiting for connection promise to resolve",
+			"messageQueueFull": "Message queue full ({{maxQueueSize}}), dropping oldest messages",
+			"postingMessageToChatbot": "Posting message to chatbot at origin {{origin}}: {{message}}",
+			"duplicateRequestForResource": "Duplicate request for resource {{resource}}, waiting for existing request",
+			"invalidOrigin": "Invalid origin: {{origin}}, expected: {{expectedOrigin}}",
+			"invalidMessageFormat": "Invalid message format",
+			"failedToSendEvent": "Failed to send event {{eventName}} to chatbot iframe: {{error}}. This is expected if chatbot is not open.",
+			"iframeRemovedFromDOM": "Iframe removed from DOM - resetting service"
+		}
+	},
+	"errors": {
+		"iframeComm": {
+			"failedToSendHandshakeMessage": "Failed to send handshake message: {{error}}",
+			"queueProcessingExceeded": "Queue processing exceeded max attempts ({{maxAttempts}}), clearing queue",
+			"errorProcessingIncomingMessage": "Error processing incoming message: {{error}}",
+			"errorImportingStoreForVarUpdatedHandling": "Error importing store for var updated handling: {{error}}",
+			"failedToDownloadFile": "Failed to download file {{filename}}: {{error}}",
+			"failedToDownloadChatFile": "Failed to download chat file {{filename}}: {{error}}",
+			"iframeReferenceNotSet": "Iframe reference not set",
+			"noConnectionAttemptInProgress": "No connection attempt in progress",
+			"iframeContentWindowNotAvailable": "Iframe contentWindow is not available",
+			"requestTimeoutForResource": "Request timeout for resource: {{resource}}",
+			"invalidMessageReceivedOrSourceMismatch": "Invalid message received or source mismatch: {{message}}",
+			"errorImportingStoreForFileContentHandling": "Error importing store for file content handling: {{error}}",
+			"errorImportingStoreForDiagramDisplayHandling": "Error importing store for diagram display handling: {{error}}",
+			"serviceDestroyedDuringNavigation": "Service destroyed during navigation",
+			"serviceResetDuringNavigation": "Service reset during navigation"
+		}
 	}
 }