Handle error when failing to fetch devices

4 files changed, 35 insertions, 13 deletions

diff --git a/gui/src/main/daemon-rpc.ts b/gui/src/main/daemon-rpc.ts
index 39e9d48f21..84e832cd5f 100644
--- a/gui/src/main/daemon-rpc.ts
+++ b/gui/src/main/daemon-rpc.ts
@@ -55,7 +55,12 @@ import {
   VoucherResponse,
 } from '../shared/daemon-rpc-types';
 import log from '../shared/logging';
-import { CommunicationError, InvalidAccountError, TooManyDevicesError } from './errors';
+import {
+  CommunicationError,
+  InvalidAccountError,
+  ListDevicesError,
+  TooManyDevicesError,
+} from './errors';
 import { ManagementServiceClient } from './management_interface/management_interface_grpc_pb';
 import * as grpcTypes from './management_interface/management_interface_pb';
 
@@ -527,12 +532,16 @@ export class DaemonRpc {
   }
 
   public async listDevices(accountToken: AccountToken): Promise<Array<IDevice>> {
-    const response = await this.callString<grpcTypes.DeviceList>(
-      this.client.listDevices,
-      accountToken,
-    );
+    try {
+      const response = await this.callString<grpcTypes.DeviceList>(
+        this.client.listDevices,
+        accountToken,
+      );
 
-    return response.getDevicesList().map(convertFromDevice);
+      return response.getDevicesList().map(convertFromDevice);
+    } catch {
+      throw new ListDevicesError();
+    }
   }
 
   public async removeDevice(deviceRemoval: IDeviceRemoval): Promise<void> {
diff --git a/gui/src/main/errors.ts b/gui/src/main/errors.ts
index b7cc82c365..c3071f08a6 100644
--- a/gui/src/main/errors.ts
+++ b/gui/src/main/errors.ts
@@ -21,3 +21,9 @@ export class TooManyDevicesError extends Error {
     super('Too many devices');
   }
 }
+
+export class ListDevicesError extends Error {
+  constructor() {
+    super('Failed to fetch list of devices');
+  }
+}
diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index d4672066f2..d6911da317 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -299,9 +299,18 @@ export default class AppRenderer {
     } catch (e) {
       const error = e as Error;
       if (error.message === 'Too many devices') {
-        actions.account.loginTooManyDevices(error);
-        this.loginState = 'too many devices';
-        this.history.reset(RoutePath.tooManyDevices, transitions.push);
+        try {
+          await this.fetchDevices(accountToken);
+
+          actions.account.loginTooManyDevices(error);
+          this.loginState = 'too many devices';
+
+          this.history.reset(RoutePath.tooManyDevices, transitions.push);
+        } catch (e) {
+          const error = e as Error;
+          log.error('Failed to fetch device list');
+          actions.account.loginFailed(error);
+        }
       } else {
         actions.account.loginFailed(error);
       }
diff --git a/gui/src/renderer/components/TooManyDevices.tsx b/gui/src/renderer/components/TooManyDevices.tsx
index 7cb67bf040..3823cc6f5d 100644
--- a/gui/src/renderer/components/TooManyDevices.tsx
+++ b/gui/src/renderer/components/TooManyDevices.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
@@ -99,7 +99,7 @@ const StyledRemoveSpinner = styled(ImageView)({
 
 export default function TooManyDevices() {
   const history = useHistory();
-  const { fetchDevices, removeDevice, login, cancelLogin } = useAppContext();
+  const { removeDevice, login, cancelLogin } = useAppContext();
   const accountToken = useSelector((state) => state.account.accountToken)!;
   const devices = useSelector((state) => state.account.devices);
 
@@ -116,8 +116,6 @@ export default function TooManyDevices() {
     history.reset(RoutePath.login, transitions.pop);
   }, [history.reset, cancelLogin]);
 
-  useEffect(() => void fetchDevices(accountToken), []);
-
   const iconSource = getIconSource(devices);
   const title = getTitle(devices);
   const subtitle = getSubtitle(devices);