Show reverse proxy guide along with websocket error

This commit is contained in:
Louis Lam 2022-03-22 23:46:13 +08:00
parent bf20f9d290
commit 40991fbc28
2 changed files with 8 additions and 0 deletions

View file

@ -3,6 +3,9 @@
<div v-if="! $root.socket.connected && ! $root.socket.firstConnect" class="lost-connection"> <div v-if="! $root.socket.connected && ! $root.socket.firstConnect" class="lost-connection">
<div class="container-fluid"> <div class="container-fluid">
{{ $root.connectionErrorMsg }} {{ $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>
</div> </div>
@ -184,6 +187,8 @@ main {
padding: 5px; padding: 5px;
background-color: crimson; background-color: crimson;
color: white; color: white;
position: fixed;
width: 100%;
} }
.dark { .dark {

View file

@ -41,6 +41,7 @@ export default {
statusPageListLoaded: false, statusPageListLoaded: false,
statusPageList: [], statusPageList: [],
connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...", connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
showReverseProxyGuide: true,
}; };
}, },
@ -185,6 +186,7 @@ export default {
socket.on("connect_error", (err) => { socket.on("connect_error", (err) => {
console.error(`Failed to connect to the backend. Socket.io connect_error: ${err.message}`); 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.connectionErrorMsg = `Cannot connect to the socket server. [${err}] Reconnecting...`;
this.showReverseProxyGuide = true;
this.socket.connected = false; this.socket.connected = false;
this.socket.firstConnect = false; this.socket.firstConnect = false;
}); });
@ -199,6 +201,7 @@ export default {
console.log("Connected to the socket server"); console.log("Connected to the socket server");
this.socket.connectCount++; this.socket.connectCount++;
this.socket.connected = true; this.socket.connected = true;
this.showReverseProxyGuide = false;
// Reset Heartbeat list if it is re-connect // Reset Heartbeat list if it is re-connect
if (this.socket.connectCount >= 2) { if (this.socket.connectCount >= 2) {