fix: enhance error handling for database connection and update error messages

Author: Lasim

services/frontend/src/i18n/locales/en/setup.ts

@@ -12,8 +12,8 @@ export default {
       placeholder: 'Select database type',
       description: 'Choose SQLite for quick setup or PostgreSQL for production use.',
       options: {
-        sqlite: 'SQLite (Recommended for development)',
-        postgres: 'PostgreSQL (Production ready)',
+        sqlite: 'SQLite',
+        postgres: 'PostgreSQL',
       },
     },
     connectionString: {
@@ -29,6 +29,7 @@ export default {
   errors: {
     title: 'Setup Failed',
     connectionFailed: 'Failed to connect to backend. Please ensure the server is running.',
+    failedToConnectWithAddress: 'Failed to connect to backend. Please ensure the server is running (remote address {address}).',
     setupFailed: 'Failed to setup database. Please try again.',
     validationRequired: 'Please select a database type',
     connectionStringRequired: 'Connection string is required for PostgreSQL',

services/frontend/src/services/database.ts

@@ -29,7 +29,12 @@ class DatabaseService {
       return data;
     } catch (error) {
       console.error('Failed to check database status:', error);
-      throw new Error('setup.errors.connectionFailed');
+      // Throw an error object that the store can inspect
+      throw {
+        isCustomError: true,
+        i18nKey: 'setup.errors.failedToConnectWithAddress',
+        address: this.baseUrl
+      };
     }
   }
 

services/frontend/src/stores/database.ts

@@ -10,6 +10,7 @@ export const useDatabaseStore = defineStore('database', () => {
   const dialect = ref<DatabaseType | null>(null);
   const isLoading = ref(false);
   const error = ref<string | null>(null);
+  const errorAddress = ref<string | null>(null); // Added
   const setupCompleted = ref(false);
 
   // Computed
@@ -41,8 +42,16 @@ export const useDatabaseStore = defineStore('database', () => {
       setupCompleted.value = status.configured && status.initialized;
 
       return canProceedToApp.value;
-    } catch (err) {
-      error.value = err instanceof Error ? err.message : 'setup.errors.connectionFailed';
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (err: any) { // Modified
+      if (err && err.isCustomError && err.i18nKey === 'setup.errors.failedToConnectWithAddress') {
+        error.value = err.i18nKey;
+        errorAddress.value = err.address;
+      } else {
+        // Fallback for other errors
+        error.value = err instanceof Error ? err.message : 'setup.errors.connectionFailed';
+        errorAddress.value = null; // Clear if not our specific error
+      }
       return false;
     } finally {
       isLoading.value = false;
@@ -96,6 +105,7 @@ export const useDatabaseStore = defineStore('database', () => {
     dialect,
     isLoading,
     error,
+    errorAddress, // Added
     setupCompleted,
 
     // Computed

services/frontend/src/views/Setup.vue

@@ -76,7 +76,7 @@
               <AlertCircle class="h-4 w-4" />
               <AlertTitle>{{ $t('setup.errors.title') }}</AlertTitle>
               <AlertDescription>
-                {{ getErrorMessage(databaseStore.error) }}
+                {{ getErrorMessage(databaseStore.error, databaseStore.errorAddress) }}
               </AlertDescription>
             </Alert>
 
@@ -187,13 +187,18 @@ function goToLogin() {
 }
 
 // Function to get translated error message
-function getErrorMessage(error: string): string {
-  // Check if error is a translation key
-  if (error.startsWith('setup.errors.')) {
-    return t(error);
+function getErrorMessage(errorKey: string | null, address: string | null): string {
+  if (!errorKey) return ''; // Handle null errorKey
+
+  if (errorKey === 'setup.errors.failedToConnectWithAddress' && address) {
+    return t(errorKey, { address });
+  }
+  // Check if error is a translation key (existing logic)
+  if (errorKey.startsWith('setup.errors.')) {
+    return t(errorKey);
   }
   // Return the error as-is if it's not a translation key
-  return error;
+  return errorKey;
 }
 
 // Check database status on component mount