${snippet}
Loading…
'; try { const revisions = await adapter.loadHistory(accessToken); list.innerHTML = revisions.length ? revisions.map((r, i) => { const snippet = escapeHtml(r.content.trim().split("\n").slice(0, 3).join(" · ").slice(0, 150) || "Empty note"); const author = r.author || "Unknown author"; return `${snippet}
No history yet.
'; for (const r of revisions) { list.querySelector(`[data-preview="${r.id}"]`)?.addEventListener("click", () => { const el = list.querySelector(`#preview-${r.id}`); el.hidden = !el.hidden; el.textContent = r.content; }); list.querySelector(`[data-revision="${r.id}"]`)?.addEventListener("click", async () => { await adapter.restoreRevision(r.id, accessToken); toast.success("The selected revision is now the current version.", { title: "Version restored" }); }); } } catch (e) { list.innerHTML = `${escapeHtml(e.message)}
`; toast.danger(e.message, { title: "Could not load version history" }); } }); document.querySelector("#close-history").addEventListener("click", () => { historyPanel.classList.remove("open"); historyPanel.setAttribute("aria-hidden", "true"); document.body.classList.remove("history-open"); }); const deleteNoteButton = document.querySelector("#delete-note"); if (deleteNoteButton && adapter.deleteNote) deleteNoteButton.addEventListener("click", async () => { try { await adapter.deleteNote(info, accessToken); } catch (error) { toast.danger(error.message, { title: "Could not delete note" }); } }); - window.addEventListener("error", event => { setStatus("offline", "Application error"); console.error(event.error || event.message); }); - window.addEventListener("unhandledrejection", event => { setStatus("offline", "Application error"); console.error(event.reason); }); + window.addEventListener("error", () => notifyFrontendError()); + window.addEventListener("unhandledrejection", () => notifyFrontendError()); initialize(); } diff --git a/static/js/socket.js b/static/js/socket.js index b6936ac..854fac1 100644 --- a/static/js/socket.js +++ b/static/js/socket.js @@ -7,6 +7,7 @@ * See LICENSE file in repository root for details. */ +import { reconnectStatus } from "@rustpad/connection-state"; import { logError, logInfo, logWarn } from "@rustpad/logger"; const DEFAULT_HEARTBEAT_INTERVAL_MS = 10000; @@ -68,8 +69,12 @@ class RoomSocket { } this.intentionalClose = false; - this.onStatus?.(this.reconnectAttempt ? "reconnecting" : "connecting", { + const status = this.reconnectAttempt + ? reconnectStatus(this.reconnectAttempt, navigator.onLine) + : "connecting"; + this.onStatus?.(status, { attempt: this.reconnectAttempt, + persistent: status === "error", message: this.reconnectAttempt ? "Re-establishing the live connection." : "Opening the live connection.", }); this.emitDiagnostics(); @@ -122,6 +127,7 @@ class RoomSocket { } if (message.type === "error") { this.intentionalClose = true; + this.onStatus?.("error", { message: message.message, fatal: true }); this.onError?.(message.message); socket.close(); return; @@ -204,7 +210,13 @@ class RoomSocket { const baseDelay = Math.min(this.maxReconnectDelayMs, 750 * (2 ** Math.min(this.reconnectAttempt - 1, 4))); const retryInMs = navigator.onLine ? baseDelay : 3000; this.totalReconnects += 1; - this.onStatus?.("reconnecting", { attempt: this.reconnectAttempt, message, retryInMs }); + const status = reconnectStatus(this.reconnectAttempt, navigator.onLine); + this.onStatus?.(status, { + attempt: this.reconnectAttempt, + persistent: status === "error", + message, + retryInMs, + }); this.emitDiagnostics(); this.reconnectTimer = window.setTimeout(() => this.connect(), retryInMs); } @@ -212,7 +224,13 @@ class RoomSocket { reconnectNow(message) { if (this.stopped || this.socket?.readyState === WebSocket.OPEN || this.socket?.readyState === WebSocket.CONNECTING) return; clearTimeout(this.reconnectTimer); - this.onStatus?.("reconnecting", { attempt: this.reconnectAttempt, message, retryInMs: 0 }); + const status = reconnectStatus(this.reconnectAttempt, navigator.onLine); + this.onStatus?.(status, { + attempt: this.reconnectAttempt, + persistent: status === "error", + message, + retryInMs: 0, + }); this.connect(); } diff --git a/tests/connection_status.mjs b/tests/connection_status.mjs new file mode 100644 index 0000000..d9d88a1 --- /dev/null +++ b/tests/connection_status.mjs @@ -0,0 +1,32 @@ +import assert from "node:assert/strict"; +import { readFile } from "node:fs/promises"; +import test from "node:test"; + +const connectionStateSource = await readFile(new URL("../static/js/connection-state.js", import.meta.url), "utf8"); +const connectionState = await import(`data:text/javascript;base64,${Buffer.from(connectionStateSource).toString("base64")}`); +const { + CONNECTION_ERROR_AFTER_RECONNECT_ATTEMPTS, + reconnectStatus, +} = connectionState; + +test("temporary reconnects remain reconnecting", () => { + for (let attempt = 0; attempt < CONNECTION_ERROR_AFTER_RECONNECT_ATTEMPTS; attempt += 1) { + assert.equal(reconnectStatus(attempt, true), "reconnecting"); + } +}); + +test("persistent reconnect failures become an error while online", () => { + assert.equal(reconnectStatus(CONNECTION_ERROR_AFTER_RECONNECT_ATTEMPTS, true), "error"); + assert.equal(reconnectStatus(CONNECTION_ERROR_AFTER_RECONNECT_ATTEMPTS + 10, true), "error"); +}); + +test("offline devices stay in reconnecting state instead of a hard error", () => { + assert.equal(reconnectStatus(CONNECTION_ERROR_AFTER_RECONNECT_ATTEMPTS + 10, false), "reconnecting"); +}); + +test("frontend exceptions do not overwrite the connection indicator", async () => { + const editorSource = await readFile(new URL("../static/js/note-editor.js", import.meta.url), "utf8"); + assert.doesNotMatch(editorSource, /setStatus\([^\n]*Application error/); + assert.match(editorSource, /window\.addEventListener\("error", \(\) => notifyFrontendError\(\)\)/); + assert.match(editorSource, /window\.addEventListener\("unhandledrejection", \(\) => notifyFrontendError\(\)\)/); +});