fix(wasm-example): add error handling for login process and display error messages

Author: Gioee

examples/sport-tracker-app/src/App.tsx

@@ -36,6 +36,7 @@ const AppContent: React.FC = () => {
   const [refreshTrigger, setRefreshTrigger] = useState(0);
   const [sqliteSyncVersion, setSqliteSyncVersion] = useState<string>("");
   const [sqliteVersion, setSqliteVersion] = useState<string>("");
+  const [loginError, setLoginError] = useState<string>("");
 
   // Coach mode - true when logged in user is named "coach"
   const isCoachMode = (session: UserSession | null): boolean => {
@@ -392,6 +393,15 @@ const AppContent: React.FC = () => {
     );
   }
 
+  if (loginError) {
+    return (
+      <div className="error-container">
+        <h2>Login Error</h2>
+        <p>{loginError}</p>
+      </div>
+    );
+  }
+
   if (!isInitialized || loading) {
     return (
       <div className="loading-container">
@@ -425,6 +435,7 @@ const AppContent: React.FC = () => {
           onLogout={handleLogout}
           onUsersLoad={loadUsers}
           onRefresh={handleRefreshData}
+          onError={setLoginError}
         />
         <DatabaseStatus
           onCountsLoad={loadCounts}

examples/sport-tracker-app/src/SQLiteSync.ts

@@ -60,11 +60,7 @@ export class SQLiteSync {
       throw new Error("Database not available");
     }
 
-    try {
-      await this.db.sqliteSyncNetworkSync();
-    } catch (e) {
-      console.error("Error checking SQLite Sync changes:", e);
-    }
+    await this.db.sqliteSyncNetworkSync();
   }
 
   /**

examples/sport-tracker-app/src/components/UserLogin.tsx

@@ -15,6 +15,7 @@ interface UserLoginProps {
   onLogout: () => Promise<void>;
   onUsersLoad: () => void;
   onRefresh: () => void;
+  onError?: (error: string) => void; // Optional error handler
 }
 
 const UserLogin: React.FC<UserLoginProps> = ({
@@ -24,6 +25,7 @@ const UserLogin: React.FC<UserLoginProps> = ({
   onLogout,
   onUsersLoad,
   onRefresh,
+  onError
 }) => {
   const { db } = useDatabase();
   const [selectedUserId, setSelectedUserId] = useState<string>("");
@@ -113,6 +115,7 @@ const UserLogin: React.FC<UserLoginProps> = ({
             error
           );
           console.warn("SQLite Sync: Falling back to local refresh only");
+          if(onError) onError("SQLite Sync - Failed to sync with SQLite Cloud: " + error);
         }
       } else {
         console.log(

examples/sport-tracker-app/src/db/database.ts

@@ -97,7 +97,6 @@ export class Database {
     return this.sendMessage("sqliteSyncSetToken", token);
   }
 
-
   async sqliteSyncNetworkSync(): Promise<void> {
     return this.sendMessage("sqliteSyncNetworkSync");
   }