From 59ce8b912d4e7bc661aac557b15b57cd4f72d2d3 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 24 Sep 2025 21:50:07 +0300
Subject: [PATCH] feat(ws): add a warning toast if websocket gets disconnected

---
 apps/client/src/services/ws.ts                   | 13 +++++++++----
 apps/client/src/translations/en/translation.json |  4 +++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/services/ws.ts b/apps/client/src/services/ws.ts
index 79f64c598..517eb677e 100644
--- a/apps/client/src/services/ws.ts
+++ b/apps/client/src/services/ws.ts
@@ -7,6 +7,7 @@ import appContext from "../components/app_context.js";
 import { t } from "./i18n.js";
 import type { EntityChange } from "../server_types.js";
 import { WebSocketMessage } from "@triliumnext/commons";
+import toast from "./toast.js";
 
 type MessageHandler = (message: WebSocketMessage) => void;
 let messageHandlers: MessageHandler[] = [];
@@ -278,13 +279,17 @@ function connectWebSocket() {
 
 async function sendPing() {
     if (Date.now() - lastPingTs > 30000) {
-        console.log(
-            utils.now(),
-            "Lost websocket connection to the backend. If you keep having this issue repeatedly, you might want to check your reverse proxy (nginx, apache) configuration and allow/unblock WebSocket."
-        );
+        console.warn(utils.now(), "Lost websocket connection to the backend");
+        toast.showPersistent({
+            id: "lost-websocket-connection",
+            title: t("ws.lost-websocket-connection-title"),
+            message: t("ws.lost-websocket-connection-message"),
+            icon: "no-signal"
+        });
     }
 
     if (ws.readyState === ws.OPEN) {
+        toast.closePersistent("lost-websocket-connection");
         ws.send(
             JSON.stringify({
                 type: "ping",
diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index ebf80297c..b05979891 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1787,7 +1787,9 @@
   "ws": {
     "sync-check-failed": "Sync check failed!",
     "consistency-checks-failed": "Consistency checks failed! See logs for details.",
-    "encountered-error": "Encountered error \"{{message}}\", check out the console."
+    "encountered-error": "Encountered error \"{{message}}\", check out the console.",
+    "lost-websocket-connection-title": "Lost connection to the server",
+    "lost-websocket-connection-message": "Check your reverse proxy (e.g. nginx or Apache) configuration to ensure WebSocket connections are properly allowed and not being blocked."
   },
   "hoisted_note": {
     "confirm_unhoisting": "Requested note '{{requestedNote}}' is outside of hoisted note '{{hoistedNote}}' subtree and you must unhoist to access the note. Do you want to proceed with unhoisting?"