WD-8294 - feat: Display connection and polling of models error

src/store/app/thunks.test.ts

@@ -1,6 +1,7 @@
 import { actions as appActions } from "store/app";
 import { actions as generalActions } from "store/general";
 import { actions as jujuActions } from "store/juju";
+import type { RootState } from "store/store";
 import { rootStateFactory } from "testing/factories";
 import {
   credentialFactory,
@@ -12,9 +13,51 @@ import {
   jujuStateFactory,
 } from "testing/factories/juju/juju";
 
-import { logOut, connectAndStartPolling, connectAndListModels } from "./thunks";
+import { logOut, connectAndStartPolling } from "./thunks";
 
 describe("thunks", () => {
+  const consoleError = console.error;
+  let state: RootState;
+
+  beforeEach(() => {
+    console.error = jest.fn();
+    state = rootStateFactory.build({
+      general: generalStateFactory.build({
+        config: configFactory.build({
+          isJuju: true,
+        }),
+        controllerConnections: {
+          "wss://example.com": {
+            user: {
+              "display-name": "eggman",
+              identity: "user-eggman@external",
+              "controller-access": "",
+              "model-access": "",
+            },
+          },
+        },
+        credentials: {
+          "wss://example.com": credentialFactory.build(),
+        },
+      }),
+      juju: jujuStateFactory.build({
+        controllers: {
+          "wss://example.com": [
+            controllerFactory.build({
+              path: "/",
+              uuid: "uuid123",
+              version: "1",
+            }),
+          ],
+        },
+      }),
+    });
+  });
+
+  afterEach(() => {
+    console.error = consoleError;
+  });
+
   it("logOut", async () => {
     const action = logOut();
     const dispatch = jest.fn();
@@ -40,60 +83,104 @@ describe("thunks", () => {
   });
 
   it("connectAndStartPolling", async () => {
-    const action = connectAndStartPolling();
     const dispatch = jest.fn();
-    const getState = jest.fn(() => rootStateFactory.build());
+    const getState = jest.fn(() => state);
+    const action = connectAndStartPolling();
     await action(dispatch, getState, null);
-    const dispatchedThunk = await dispatch.mock.calls[1][0](
-      dispatch,
-      getState,
-      null,
+    expect(dispatch).toHaveBeenCalledWith(
+      appActions.connectAndPollControllers({
+        controllers: [["wss://controller.example.com", undefined, false]],
+        isJuju: true,
+      }),
     );
-    expect(dispatchedThunk.type).toBe("app/connectAndListModels/fulfilled");
   });
 
-  it("connectAndListModels", async () => {
-    const dispatch = jest.fn();
-    const getState = jest.fn(() =>
-      rootStateFactory.build({
-        general: generalStateFactory.build({
-          config: configFactory.build({
-            isJuju: true,
-          }),
-          controllerConnections: {
-            "wss://example.com": {
-              user: {
-                "display-name": "eggman",
-                identity: "user-eggman@external",
-                "controller-access": "",
-                "model-access": "",
-              },
-            },
-          },
-          credentials: {
-            "wss://example.com": credentialFactory.build(),
-          },
-        }),
-        juju: jujuStateFactory.build({
-          controllers: {
-            "wss://example.com": [
-              controllerFactory.build({
-                path: "/",
-                uuid: "uuid123",
-                version: "1",
-              }),
-            ],
-          },
-        }),
+  it("connectAndStartPolling should catch error instanceof Error", async () => {
+    const dispatch = jest
+      .fn()
+      // Successfuly dispatch connectAndStartPolling/pending.
+      .mockImplementationOnce(() => {})
+      // Throw error when trying to dispatch connectAndPollControllers.
+      .mockImplementationOnce(() => {
+        // eslint-disable-next-line no-throw-literal
+        throw "Error while dispatching connectAndPollControllers!";
+      });
+    const getState = jest.fn(() => state);
+    const action = connectAndStartPolling();
+    await action(dispatch, getState, null);
+    expect(dispatch).toHaveBeenCalledWith(
+      appActions.connectAndPollControllers({
+        controllers: [["wss://controller.example.com", undefined, false]],
+        isJuju: true,
+      }),
+    );
+    expect(console.error).toHaveBeenCalledWith(
+      "Error while triggering the connection and polling of models.",
+      "Error while dispatching connectAndPollControllers!",
+    );
+    expect(dispatch).toHaveBeenCalledWith(
+      generalActions.storeConnectionError(
+        "Unable to connect: Error while dispatching connectAndPollControllers!",
+      ),
+    );
+  });
+
+  it("connectAndStartPolling should catch string error", async () => {
+    const dispatch = jest
+      .fn()
+      // Successfuly dispatch connectAndStartPolling/pending.
+      .mockImplementationOnce(() => {})
+      // Throw error when trying to dispatch connectAndPollControllers.
+      .mockImplementationOnce(() => {
+        throw new Error("Error while dispatching connectAndPollControllers!");
+      });
+    const getState = jest.fn(() => state);
+    const action = connectAndStartPolling();
+    await action(dispatch, getState, null);
+    expect(dispatch).toHaveBeenCalledWith(
+      appActions.connectAndPollControllers({
+        controllers: [["wss://controller.example.com", undefined, false]],
+        isJuju: true,
       }),
     );
-    const action = connectAndListModels();
+    expect(console.error).toHaveBeenCalledWith(
+      "Error while triggering the connection and polling of models.",
+      new Error("Error while dispatching connectAndPollControllers!"),
+    );
+    expect(dispatch).toHaveBeenCalledWith(
+      generalActions.storeConnectionError(
+        "Unable to connect: Error while dispatching connectAndPollControllers!",
+      ),
+    );
+  });
+
+  it("connectAndStartPolling should catch non-standard type of error", async () => {
+    const dispatch = jest
+      .fn()
+      // Successfuly dispatch connectAndStartPolling/pending.
+      .mockImplementationOnce(() => {})
+      // Throw error when trying to dispatch connectAndPollControllers.
+      .mockImplementationOnce(() => {
+        // eslint-disable-next-line no-throw-literal
+        throw ["Unknown error."];
+      });
+    const getState = jest.fn(() => state);
+    const action = connectAndStartPolling();
     await action(dispatch, getState, null);
     expect(dispatch).toHaveBeenCalledWith(
       appActions.connectAndPollControllers({
         controllers: [["wss://controller.example.com", undefined, false]],
         isJuju: true,
       }),
     );
+    expect(console.error).toHaveBeenCalledWith(
+      "Error while triggering the connection and polling of models.",
+      ["Unknown error."],
+    );
+    expect(dispatch).toHaveBeenCalledWith(
+      generalActions.storeConnectionError(
+        "Unable to connect: Something went wrong. View the console log for more details.",
+      ),
+    );
   });
 });

src/store/app/thunks.ts

@@ -51,21 +51,6 @@ export const connectAndStartPolling = createAsyncThunk<
     state: RootState;
   }
 >("app/connectAndStartPolling", async (_, thunkAPI) => {
-  try {
-    await thunkAPI.dispatch(connectAndListModels());
-  } catch (error) {
-    // XXX Add to Sentry.
-    console.error("Error while trying to connect and list models.", error);
-  }
-});
-
-export const connectAndListModels = createAsyncThunk<
-  void,
-  void,
-  {
-    state: RootState;
-  }
->("app/connectAndListModels", async (_, thunkAPI) => {
   try {
     const storeState = thunkAPI.getState();
     const config = getConfig(storeState);
@@ -93,10 +78,23 @@ export const connectAndListModels = createAsyncThunk<
       }),
     );
   } catch (error) {
-    // XXX Surface error to UI.
-    // XXX Send to sentry if it's an error that's not connection related
-    // a common error returned by this is:
-    // Something went wrong:  cannot send request {"type":"ModelManager","request":"ListModels","version":5,"params":...}: connection state 3 is not open
-    console.error("Something went wrong: ", error);
+    // a common error logged to the console by this is:
+    // Error while triggering the connection and polling of models. cannot send request {"type":"ModelManager","request":"ListModels","version":5,"params":...}: connection state 3 is not open
+    console.error(
+      "Error while triggering the connection and polling of models.",
+      error,
+    );
+    let errorMessage;
+    if (error instanceof Error) {
+      errorMessage = error.message;
+    } else if (typeof error === "string") {
+      errorMessage = error;
+    } else {
+      errorMessage =
+        "Something went wrong. View the console log for more details.";
+    }
+    thunkAPI.dispatch(
+      generalActions.storeConnectionError(`Unable to connect: ${errorMessage}`),
+    );
   }
 });

src/store/middleware/check-auth.ts

@@ -86,9 +86,6 @@ export const checkAuthMiddleware: Middleware<
     ];
 
     const thunkAllowlist = [
-      appThunks.connectAndListModels.fulfilled.type,
-      appThunks.connectAndListModels.pending.type,
-      appThunks.connectAndListModels.rejected.type,
       appThunks.connectAndStartPolling.fulfilled.type,
       appThunks.connectAndStartPolling.pending.type,
       appThunks.connectAndStartPolling.rejected.type,