From 701c4d960a97b995774b26ed80658c599d785b7e Mon Sep 17 00:00:00 2001
From: Evan Song <theevansong@gmail.com>
Date: Thu, 17 Oct 2024 19:23:19 -0700
Subject: [PATCH] feat: handle when ws disconnects

Signed-off-by: Evan Song <theevansong@gmail.com>
---
 .../components/ui/servers/PanelSpinner.vue    | 22 ++++++++
 .../src/pages/servers/manage/[id].vue         | 56 ++++++++++++++++---
 2 files changed, 71 insertions(+), 7 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/servers/PanelSpinner.vue

diff --git a/apps/frontend/src/components/ui/servers/PanelSpinner.vue b/apps/frontend/src/components/ui/servers/PanelSpinner.vue
new file mode 100644
index 000000000..d9b5721de
--- /dev/null
+++ b/apps/frontend/src/components/ui/servers/PanelSpinner.vue
@@ -0,0 +1,22 @@
+<template>
+  <svg
+    class="h-5 w-5 animate-spin"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    ></circle>
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+</template>
diff --git a/apps/frontend/src/pages/servers/manage/[id].vue b/apps/frontend/src/pages/servers/manage/[id].vue
index c287f90e1..1d6b0bb3d 100644
--- a/apps/frontend/src/pages/servers/manage/[id].vue
+++ b/apps/frontend/src/pages/servers/manage/[id].vue
@@ -1,5 +1,12 @@
 <template>
   <div class="contents">
+    <div
+      v-if="error"
+      class="mb-4 flex h-full w-full items-center gap-2 rounded-xl border-2 border-solid border-red bg-bg-red p-4 font-semibold text-contrast"
+    >
+      <IssuesIcon class="h-8 w-8 text-red" />
+      <div class="flex flex-col gap-2">{{ errorTitle }} - {{ errorMessage }}</div>
+    </div>
     <div
       v-if="serverData && serverData.status !== 'installing'"
       data-pyro-server-manager-root
@@ -58,15 +65,23 @@
 
       <div data-pyro-mount class="h-full w-full flex-1">
         <div
-          v-if="error"
-          class="mb-4 flex h-full w-full items-center gap-2 rounded-xl border-2 border-solid border-red bg-bg-red p-4 font-semibold text-contrast"
+          v-if="!isConnected && !isReconnecting"
+          data-pyro-server-ws-error
+          class="mb-4 flex w-full flex-row items-center gap-4 rounded-xl bg-bg-red p-4 text-contrast"
         >
-          <IssuesIcon class="h-8 w-8 text-red" />
-          <div class="flex flex-col gap-2">
-            {{ errorTitle }}
-            {{ errorMessage }}
-          </div>
+          <IssuesIcon class="size-5 text-red" />
+          Something went wrong...
+        </div>
+
+        <div
+          v-if="!isReconnecting"
+          data-pyro-server-ws-reconnecting
+          class="mb-4 flex w-full flex-row items-center gap-4 rounded-xl bg-bg-orange p-4 text-contrast"
+        >
+          <UiServersPanelSpinner />
+          Hang on, we're reconnecting to your server.
         </div>
+
         <NuxtPage
           :route="route"
           :is-connected="isConnected"
@@ -100,6 +115,8 @@ import { IssuesIcon, LeftArrowIcon } from "@modrinth/assets";
 import type { ServerState, Stats, WSEvent, WSInstallationResultEvent } from "~/types/servers";
 
 const socket = ref<WebSocket | null>(null);
+const isReconnecting = ref(false);
+const reconnectInterval = ref<ReturnType<typeof setInterval> | null>(null);
 
 const route = useNativeRoute();
 const serverId = route.params.id as string;
@@ -174,6 +191,12 @@ const connectWebSocket = () => {
 
     socket.value.onopen = () => {
       socket.value?.send(JSON.stringify({ event: "auth", jwt: wsAuth.value?.token }));
+      isConnected.value = true;
+      isReconnecting.value = false;
+      if (reconnectInterval.value) {
+        clearInterval(reconnectInterval.value);
+        reconnectInterval.value = null;
+      }
     };
 
     socket.value.onmessage = (event) => {
@@ -184,15 +207,28 @@ const connectWebSocket = () => {
     socket.value.onclose = () => {
       consoleOutput.value.push("\nWS connection closed");
       isConnected.value = false;
+      scheduleReconnect();
     };
 
     socket.value.onerror = (error) => {
       console.error("WebSocket error:", error);
       isConnected.value = false;
+      scheduleReconnect();
     };
   } catch (error) {
     console.error("Failed to connect WebSocket:", error);
     isConnected.value = false;
+    scheduleReconnect();
+  }
+};
+
+const scheduleReconnect = () => {
+  if (!reconnectInterval.value) {
+    isReconnecting.value = true;
+    reconnectInterval.value = setInterval(() => {
+      console.log("Attempting to reconnect...");
+      connectWebSocket();
+    }, 5000);
   }
 };
 
@@ -407,6 +443,12 @@ onMounted(() => {
 
 onUnmounted(() => {
   stopPolling();
+  if (reconnectInterval.value) {
+    clearInterval(reconnectInterval.value);
+  }
+  if (socket.value) {
+    socket.value.close();
+  }
 });
 
 watch(