Add more error handeling

website/src/components/Devices.tsx

@@ -7,14 +7,23 @@ import { autorefresh } from '../Util';
 import { DeviceListItem } from './DeviceListItem';
 import { AddDevice } from './AddDevice';
 import { Loading } from './Loading';
+import { AppState } from '../AppState';
+import { Error } from './Error';
 import { Card, CardContent, CardHeader, Skeleton } from '@mui/material';
 import { DeviceListItemSkeleton } from './DeviceListItemSkeleton';
 import { AddDeviceSkeleton } from './AddDeviceSkeleton';
 
 export const Devices = observer(
   class Devices extends React.Component {
     devices = autorefresh(30, async () => {
-      return (await grpc.devices.listDevices({})).items;
+    try{
+       const res =  await grpc.devices.listDevices({});
+       return res.items
+      } catch (error: any){
+        console.log('An error occurred:', error)
+        AppState.loadingError = error.message
+        return null
+      }
     });
 
     constructor(props: {}) {
@@ -30,6 +39,9 @@ export const Devices = observer(
     }
 
     render() {
+      if(AppState.loadingError){
+        return <Error message={AppState.loadingError} />
+      }
       if (!this.devices.current) {
         return (
           <Grid container spacing={3} justifyContent="center">
@@ -48,7 +60,6 @@ export const Devices = observer(
           </Grid>    
         );
       }
-
       return (
         <Grid container spacing={3} justifyContent="center">
           <Grid item xs={12}>

website/src/pages/admin/AllDevices.tsx

@@ -19,18 +19,31 @@ import { User } from '../../sdk/users_pb';
 import { lastSeen, lazy } from '../../Util';
 import numeral from "numeral";
 import { Loading } from '../../components/Loading';
+import { Error } from '../../components/Error';
 
 export const AllDevices = observer(class AllDevices extends React.Component {
   users = lazy(async () => {
-    const res = await grpc.users.listUsers({});
-    return res.items;
+    try {
+      const result = await grpc.users.listUsers({});
+      return result.items;
+    } catch (error: any) {
+      console.error('An error occurred:', error);
+      AppState.loadingError = error.message;
+      return null;
+    }    
   });
 
   devices = lazy(async () => {
-    const res = await grpc.devices.listAllDevices({});
-    let deviceList = res.items;
-    deviceList.sort((d1, d2) => (d2.lastHandshakeTime ? d2.lastHandshakeTime.seconds : 0) - (d1.lastHandshakeTime ? d1.lastHandshakeTime.seconds : 0));
-    return deviceList;
+    try {
+      const res = await grpc.devices.listAllDevices({});
+      let deviceList = res.items;
+      deviceList.sort((d1, d2) => (d2.lastHandshakeTime ? d2.lastHandshakeTime.seconds : 0) - (d1.lastHandshakeTime ? d1.lastHandshakeTime.seconds : 0));
+      return deviceList;
+    }catch (error: any) {
+      console.error('An error occurred:', error);
+      AppState.loadingError = error.message
+      return null
+    }
   });
 
   deleteUser = async (user: User.AsObject) => {
@@ -55,9 +68,11 @@ export const AllDevices = observer(class AllDevices extends React.Component {
 
   render() {
     if (!this.devices.current || !this.users.current) {
-      return <Loading />;
+        return <Loading />;
+    }
+    if(AppState.loadingError){
+      return <Error message={AppState.loadingError} />
     }
-
     const users = this.users.current;
     const devices = this.devices.current;