From 0694ab8e02738d30d5e2a91a584a3a1c21235e6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Tue, 12 Apr 2022 16:00:47 +0200
Subject: [PATCH] Web: nicer handling of SocketIO connection issues

---
 web/app/src/App.vue                       |  2 +-
 web/app/src/components/UpdateListener.vue | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/web/app/src/App.vue b/web/app/src/App.vue
index 0eb4a9ab..d0187c49 100644
--- a/web/app/src/App.vue
+++ b/web/app/src/App.vue
@@ -73,7 +73,7 @@ export default {
 
     // SocketIO connection event handlers:
     onSIOReconnected() {
-      this.$refs.jobsTable.onSIOReconnected();
+      this.$refs.jobsTable.onReconnected();
       this.fetchManagerInfo();
     },
     onSIODisconnected(reason) {
diff --git a/web/app/src/components/UpdateListener.vue b/web/app/src/components/UpdateListener.vue
index 802941e7..a0686eb5 100644
--- a/web/app/src/components/UpdateListener.vue
+++ b/web/app/src/components/UpdateListener.vue
@@ -38,7 +38,8 @@ export default {
         transports: ["websocket"],
       });
       this.socket.on('connect_error', (error) => {
-        console.log("socketIO connection error:", error);
+        // Don't log the error here, it's too long and noisy for regular logs.
+        console.log("socketIO connection error");
       });
       this.socket.on('error', (error) => {
         console.log("socketIO error:", error);
@@ -50,6 +51,12 @@ export default {
       this.socket.on("disconnect", (reason) => {
         console.log("socketIO disconnected:", reason);
         this.$emit("sioDisconnected", reason);
+        if (reason === 'io server disconnect') {
+          // The disconnection was initiated by the server, need to reconnect
+          // manually. If the disconnect was for other reasons, the socket
+          // should automatically try to reconnect.
+          socket.connect();
+        }
       });
       this.socket.on("reconnect", (attemptNumber) => {
         console.log("socketIO reconnected after", attemptNumber, "attempts");
@@ -67,9 +74,6 @@ export default {
       this.socket.on("/message", (message) => {
         this.$emit("message", message);
       });
-
-      // Only connect after the handlers have been set up.
-      // this.socket.open();
     },
 
     disconnectWebsocket() {