Better Connection and Error page for when the server crash

Author: loucass003

gui/public/i18n/en/translation.ftl

@@ -5,8 +5,11 @@
 # translators on what it means
 
 ## Websocket (server) status
-websocket-connecting = Connecting to the server
-websocket-connection_lost = Connection lost to the server. Trying to reconnect...
+websocket-connecting = Loading...
+websocket-connection_lost = The server crashed!
+websocket-connection_lost-desc = It looks like the SlimeVR server crashed. Check the logs and restart the program
+websocket-connection_lost-close = Exit SlimeVR
+websocket-connection_lost-logs = Open the logs Folder
 
 ## Update notification
 version_update-title = New version available: { $version }

gui/src-tauri/src/main.rs

@@ -1,6 +1,7 @@
 #![cfg_attr(all(not(debug_assertions), windows), windows_subsystem = "windows")]
 use std::env;
 use std::panic;
+use std::path::Path;
 use std::sync::atomic::AtomicBool;
 use std::sync::atomic::Ordering;
 use std::sync::Arc;
@@ -57,6 +58,20 @@ fn warning(msg: String) {
 	log::warn!(target: "webview", "{}", msg)
 }
 
+#[tauri::command]
+fn open_logs_folder(app_handle: tauri::AppHandle) {
+	let config_dir = app_handle
+		.path()
+		.app_config_dir()
+		.unwrap_or_else(|_| Path::new(".").to_path_buf());
+	let path = config_dir.join("logs");
+	let path_str = path.to_string_lossy().into_owned();
+
+	if let Err(err) = open::that(path_str) {
+		eprintln!("Failed to open config folder: {}", err);
+	}
+}
+
 fn main() -> Result<()> {
 	log_panics::init();
 	let hook = panic::take_hook();
@@ -231,6 +246,7 @@ fn setup_tauri(
 			logging,
 			erroring,
 			warning,
+			open_logs_folder,
 			tray::update_translations,
 			tray::update_tray_text,
 			tray::is_tray_available,

gui/src-tauri/src/util.rs

@@ -77,7 +77,16 @@ pub fn get_launch_path(cli: Cli) -> Option<PathBuf> {
 		Some(PathBuf::from("/usr/share/slimevr/")),
 	];
 
-	paths.into_iter().flatten().find(|x| is_valid_path(x))
+	for path in paths.into_iter().flatten() {
+		println!("Checking path: {:?}", path);
+		if is_valid_path(&path) {
+			println!("✅ Found valid path: {:?}", path);
+			return Some(path);
+		}
+	}
+
+	println!("❌ No valid path found.");
+	None
 }
 
 pub fn spawn_java(java: &OsStr, java_version: &OsStr) -> std::io::Result<Child> {

gui/src/App.tsx

@@ -60,6 +60,7 @@ import { ScaledProportionsPage } from './components/onboarding/pages/body-propor
 import { EmptyLayout } from './components/EmptyLayout';
 import { AdvancedSettings } from './components/settings/pages/AdvancedSettings';
 import { FirmwareUpdate } from './components/firmware-update/FirmwareUpdate';
+import { ConnectionLost } from './components/onboarding/pages/ConnectionLost';
 
 export const GH_REPO = 'SlimeVR/SlimeVR-Server';
 export const VersionContext = createContext('');
@@ -290,13 +291,7 @@ export default function App() {
                   <div className="h-full w-full text-standard bg-background-80 text-background-10">
                     <Preload />
                     {!websocketAPI.isConnected && (
-                      <EmptyLayout>
-                        <div className="flex w-full h-full justify-center items-center p-2">
-                          {websocketAPI.isFirstConnection
-                            ? l10n.getString('websocket-connecting')
-                            : l10n.getString('websocket-connection_lost')}
-                        </div>
-                      </EmptyLayout>
+                      <ConnectionLost></ConnectionLost>
                     )}
                     {websocketAPI.isConnected && <Layout></Layout>}
                   </div>

gui/src/components/onboarding/pages/ConnectionLost.tsx

@@ -0,0 +1,72 @@
+import { Button } from '@/components/commons/Button';
+import { LoaderIcon, SlimeState } from '@/components/commons/icon/LoaderIcon';
+import { Typography } from '@/components/commons/Typography';
+import { EmptyLayout } from '@/components/EmptyLayout';
+import { useConfig } from '@/hooks/config';
+import { useWebsocketAPI } from '@/hooks/websocket-api';
+import { error } from '@/utils/logging';
+import { Localized } from '@fluent/react';
+import { invoke } from '@tauri-apps/api/core';
+import { getCurrentWindow } from '@tauri-apps/api/window';
+
+export function ConnectionLost() {
+  const { isFirstConnection } = useWebsocketAPI();
+  const { saveConfig } = useConfig();
+
+  const openLogsFolder = async () => {
+    try {
+      await invoke<string | null>('open_logs_folder');
+    } catch (err) {
+      error('Failed to open logs folder:', err);
+    }
+  };
+
+  const closeApp = async () => {
+    await saveConfig();
+    await invoke('update_window_state');
+    await getCurrentWindow().destroy();
+  };
+
+  return (
+    <EmptyLayout>
+      <div className="flex w-full h-full justify-center items-center p-4">
+        <div className="flex flex-col items-center gap-4 -mt-12">
+          {isFirstConnection && (
+            <>
+              <LoaderIcon slimeState={SlimeState.JUMPY} size={200}></LoaderIcon>
+              <div>
+                <Localized id="websocket-connecting">
+                  <Typography variant="main-title"></Typography>
+                </Localized>
+              </div>
+            </>
+          )}
+          {!isFirstConnection && (
+            <>
+              <LoaderIcon slimeState={SlimeState.SAD} size={200}></LoaderIcon>
+              <div>
+                <Localized id="websocket-connection_lost">
+                  <Typography variant="main-title"></Typography>
+                </Localized>
+                <Localized id="websocket-connection_lost-desc">
+                  <Typography variant="standard"></Typography>
+                </Localized>
+                <div className="flex gap-2 justify-center mt-4">
+                  <Localized id="websocket-connection_lost-close">
+                    <Button variant="primary" onClick={closeApp}></Button>
+                  </Localized>
+                  <Localized id="websocket-connection_lost-logs">
+                    <Button
+                      variant="secondary"
+                      onClick={openLogsFolder}
+                    ></Button>
+                  </Localized>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </EmptyLayout>
+  );
+}