Merge pull request #1061 from writer/codex/refactor-error-handling-to-include-retry-mechanism

feat: retry core initialization on WebSocket connection failure

Author: mmikita95

src/ui/src/constants/retry.ts

@@ -0,0 +1,3 @@
+export const RECONNECT_DELAY_MS = 5000;
+export const MAX_RETRIES = 5;
+

src/ui/src/core/index.ts

@@ -32,6 +32,7 @@ import { loadExtensions } from "./loadExtensions";
 import { bigIntReplacer } from "./serializer";
 import { useLogger } from "@/composables/useLogger";
 import { readBlobAsArrayBufferJson } from "@/utils/blob";
+import { RECONNECT_DELAY_MS } from "@/constants/retry";
 import {
 	createFileToSourceFiles,
 	deleteFileToSourceFiles,
@@ -40,7 +41,6 @@ import {
 	moveFileToSourceFiles,
 } from "./sourceFiles";
 
-const RECONNECT_DELAY_MS = 5000;
 const KEEP_ALIVE_DELAY_MS = 60000;
 
 export function generateCore() {
@@ -109,31 +109,24 @@ export function generateCore() {
 
 		let initData: any = null;
 		let response: Response | null = null;
-		const maxRetries = 5;
-		for (let attempt = 0; attempt < maxRetries; attempt++) {
-			try {
-				response = await fetch("./api/init", {
-					method: "post",
-					cache: "no-store",
-					headers: {
-						"Content-Type": "application/json",
-					},
-					body: JSON.stringify({
-						proposedSessionId: sessionId,
-					}),
-				});
+		try {
+			response = await fetch("./api/init", {
+				method: "post",
+				cache: "no-store",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					proposedSessionId: sessionId,
+				}),
+			});
 
-				const bodyText = await response.text();
-				initData = JSON.parse(bodyText);
-				break;
-			} catch {
-				if (attempt >= maxRetries - 1) {
-					throw new Error(
-						`Failed to acquire initialization data. Server responded with ${response?.status ?? "no response"} status.`,
-					);
-				}
-				await new Promise((r) => setTimeout(r, RECONNECT_DELAY_MS * (attempt + 1)));
-			}
+			const bodyText = await response.text();
+			initData = JSON.parse(bodyText);
+		} catch {
+			throw new Error(
+				`Failed to acquire initialization data. Server responded with ${response?.status ?? "no response"} status.`,
+			);
 		}
 
 		if (response.status > 400) {

src/ui/src/main.ts

@@ -11,6 +11,7 @@ import { useCollaborationManager } from "./composables/useCollaborationManager.j
 import { useNotesManager } from "./core/useNotesManager.js";
 import { CollaborationManager } from "./writerTypes.js";
 import { useSecretsManager } from "./core/useSecretsManager.js";
+import { RECONNECT_DELAY_MS, MAX_RETRIES } from "@/constants/retry";
 
 const wf = generateCore();
 
@@ -83,17 +84,54 @@ async function enableCollaboration(collaborationManager: CollaborationManager) {
 	});
 }
 
+async function initialise() {
+	for (let attempt = 0; attempt < MAX_RETRIES; attempt++) {
+		try {
+			await load();
+			return;
+		} catch (reason) {
+			if (attempt < MAX_RETRIES - 1) {
+				logger.warn(
+					`Core initialization failed (attempt ${attempt + 1}/${MAX_RETRIES}). Retrying...`,
+					reason,
+				);
+				const loaderEl = document.getElementById("loading_L1");
+				if (loaderEl && !document.getElementById("loading_message") && attempt >= 2) {
+					const message = document.createElement("div");
+					message.id = "loading_message";
+					message.textContent =
+						"We're getting things ready.\nHang tight while we connect...";
+					message.style.cssText =
+						"position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin-top:120px;text-align:center;font-family: 'Poppins','Helvetica Neue','Lucida Grande',sans-serif;color:#666;font-size:14px;line-height:1.4;max-width:400px;padding:0 20px;z-index:1000;white-space:pre-line;opacity:0;transition:opacity 0.5s ease-in;";
+					document.body.appendChild(message);
+					// Trigger fade-in animation
+					setTimeout(() => {
+						message.style.opacity = "1";
+					}, 50);
+				}
+				await new Promise((r) =>
+					setTimeout(r, RECONNECT_DELAY_MS * (attempt + 1)),
+				);
+				continue;
+			}
+			throw reason;
+		}
+	}
+}
+
 logger.log("Initialising core...");
-load()
+initialise()
 	.then(async () => {
 		logger.log("Core initialised.");
 	})
 	.catch((reason) => {
 		logger.error("Core initialisation failed.", reason);
+		
 		const errorDiv = document.createElement("div");
 		errorDiv.className = "error-message";
 		errorDiv.setAttribute("role", "alert");
-		errorDiv.style.cssText = "padding: 20px; color: #d32f2f; background: #ffebee; border: 1px solid #e57373; border-radius: 4px; margin: 20px; font-family: \"Poppins\", \"Helvetica Neue\", \"Lucida Grande\", sans-serif;";
+		errorDiv.style.cssText =
+			'padding: 20px; color: #d32f2f; background: #ffebee; border: 1px solid #e57373; border-radius: 4px; margin: 20px; font-family: "Poppins", "Helvetica Neue", "Lucida Grande", sans-serif;';
 
 		const message = document.createElement("div");
 		message.textContent =
@@ -107,7 +145,8 @@ load()
 
 		const reloadButton = document.createElement("button");
 		reloadButton.textContent = "Reload page";
-		reloadButton.className = "WdsButton WdsButton--small WdsButton--tertiary";
+		reloadButton.className =
+			"WdsButton WdsButton--small WdsButton--tertiary";
 		reloadButton.style.cssText =
 			"margin-top: 16px; font-size: .875rem; font-weight: 600; border-radius: 300px; padding: 4px 16px; height: 32px; background: var(--wdsColorWhite); color: var(--wdsColorBlack); border-color: var(--wdsColorGray2); border-width: 1px; border-style: solid; box-shadow: var(--buttonShadow); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; outline: none; position: relative; overflow: hidden; max-width: 100%; width: fit-content;";
 		reloadButton.onclick = () => window.location.reload();
@@ -118,5 +157,10 @@ load()
 
 		const loadingSpinner = document.getElementById("loading_L1");
 		loadingSpinner?.remove();
+		// Remove loading message if it exists
+		const loadingMessage = document.getElementById("loading_message");
+		if (loadingMessage) {
+			loadingMessage.remove();
+		}
 		document.body.appendChild(errorDiv);
 	});