Report Sync errors in all pages. Fix bug where changes in sync errors were not detected.

Author: stevensJourney

.changeset/fuzzy-ties-double.md

@@ -0,0 +1,5 @@
+---
+'@powersync/common': patch
+---
+
+Fixed bug where changes in SyncStatus downloadError and uploadError might not be reported.

packages/common/src/db/crud/SyncStatus.ts

@@ -171,7 +171,22 @@ export class SyncStatus {
    * @returns {boolean} True if the instances are considered equal, false otherwise
    */
   isEqual(status: SyncStatus) {
-    return JSON.stringify(this.options) == JSON.stringify(status.options);
+    /**
+     * By default Error object are serialized to an empty object.
+     * This replaces Errors with more useful information before serialization.
+     */
+    const replacer = (_: string, value: any) => {
+      if (value instanceof Error) {
+        return {
+          name: value.name,
+          message: value.message,
+          stack: value.stack
+        };
+      }
+      return value;
+    };
+
+    return JSON.stringify(this.options, replacer) == JSON.stringify(status.options, replacer);
   }
 
   /**

tools/diagnostics-app/src/app/views/layout.tsx

@@ -10,6 +10,7 @@ import UserIcon from '@mui/icons-material/VerifiedUser';
 import WifiIcon from '@mui/icons-material/Wifi';
 
 import {
+  Alert,
   AppBar,
   Box,
   Divider,
@@ -192,6 +193,7 @@ export default function ViewsLayout({ children }: { children: React.ReactNode })
         </Drawer>
       </Box>
       <S.MainBox sx={{ flexGrow: 1, p: 3, width: { md: `calc(100% - ${drawerWidth}px)` }, marginTop: '50px' }}>
+        {syncError ? <Alert severity="error">Sync error detected: {syncError.message}</Alert> : null}
         {children}
       </S.MainBox>
     </S.MainBox>