From 40991fbc2806cf5f5246c313e687c6c424fca43e Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Tue, 22 Mar 2022 23:46:13 +0800
Subject: [PATCH] Show reverse proxy guide along with websocket error

---
 src/layouts/Layout.vue | 5 +++++
 src/mixins/socket.js   | 3 +++
 2 files changed, 8 insertions(+)

diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
index 07982707..09c8b7db 100644
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@@ -3,6 +3,9 @@
         <div v-if="! $root.socket.connected && ! $root.socket.firstConnect" class="lost-connection">
             <div class="container-fluid">
                 {{ $root.connectionErrorMsg }}
+                <div v-if="$root.showReverseProxyGuide">
+                    Using a Reverse Proxy? <a href="https://github.com/louislam/uptime-kuma/wiki/Reverse-Proxy" target="_blank">Check how to config it for WebSocket</a>
+                </div>
             </div>
         </div>
 
@@ -184,6 +187,8 @@ main {
     padding: 5px;
     background-color: crimson;
     color: white;
+    position: fixed;
+    width: 100%;
 }
 
 .dark {
diff --git a/src/mixins/socket.js b/src/mixins/socket.js
index 902bde31..7d1bbea5 100644
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@@ -41,6 +41,7 @@ export default {
             statusPageListLoaded: false,
             statusPageList: [],
             connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
+            showReverseProxyGuide: true,
         };
     },
 
@@ -185,6 +186,7 @@ export default {
             socket.on("connect_error", (err) => {
                 console.error(`Failed to connect to the backend. Socket.io connect_error: ${err.message}`);
                 this.connectionErrorMsg = `Cannot connect to the socket server. [${err}] Reconnecting...`;
+                this.showReverseProxyGuide = true;
                 this.socket.connected = false;
                 this.socket.firstConnect = false;
             });
@@ -199,6 +201,7 @@ export default {
                 console.log("Connected to the socket server");
                 this.socket.connectCount++;
                 this.socket.connected = true;
+                this.showReverseProxyGuide = false;
 
                 // Reset Heartbeat list if it is re-connect
                 if (this.socket.connectCount >= 2) {