feat(error-handling): add canister error tracking for query and update calls

frontend/src/lib/services/utils.services.ts

@@ -3,6 +3,7 @@ import {
   getAuthenticatedIdentity,
   getCurrentIdentity,
 } from "$lib/services/auth.services";
+import { canistersErrorsStore } from "$lib/stores/canisters-errors.store";
 import { logWithTimestamp } from "$lib/utils/dev.utils";
 import type { Identity } from "@dfinity/agent";
 
@@ -26,6 +27,63 @@ export type QueryAndUpdateIdentity = "authorized" | "anonymous" | "current";
 
 let lastIndex = 0;
 
+type QueryAndUpdateParams<R, E> = {
+  request: (options: { certified: boolean; identity: Identity }) => Promise<R>;
+  onLoad: QueryAndUpdateOnResponse<R>;
+  logMessage: string;
+  onError?: QueryAndUpdateOnError<E>;
+  strategy?: QueryAndUpdateStrategy;
+  identityType?: QueryAndUpdateIdentity;
+};
+
+const isQueryCallOfAQueryAndUpdateCall = (
+  strategy: QueryAndUpdateStrategy,
+  certified: boolean
+) => strategy === "query_and_update" && certified === false;
+
+export const queryAndUpdateWithCanisterErrorTrack = async <R, E>({
+  request,
+  onLoad,
+  onError,
+  strategy,
+  logMessage,
+  identityType = "authorized",
+  canisterId,
+  // TOOD(yhabib): Change type of canisterId from string to CanisterId
+}: QueryAndUpdateParams<R, E> & { canisterId: string }): Promise<void> => {
+  const customOnLoad: QueryAndUpdateOnResponse<R> = ({
+    certified,
+    strategy,
+    response,
+  }) => {
+    if (!isQueryCallOfAQueryAndUpdateCall(strategy, certified))
+      canistersErrorsStore.delete(canisterId);
+
+    onLoad({ certified, strategy, response });
+  };
+
+  const customOnError: QueryAndUpdateOnError<E> = ({
+    certified,
+    strategy,
+    error,
+    identity,
+  }) => {
+    if (!isQueryCallOfAQueryAndUpdateCall(strategy, certified))
+      canistersErrorsStore.set({ canisterId, rawError: error });
+
+    onError?.({ certified, strategy, error, identity });
+  };
+
+  return queryAndUpdate({
+    request,
+    onLoad: customOnLoad,
+    onError: customOnError,
+    strategy,
+    logMessage,
+    identityType,
+  });
+};
+
 /**
  * Depending on the strategy makes one or two requests (QUERY and UPDATE in parallel).
  * The returned promise notify when first fetched data are available.
@@ -40,14 +98,7 @@ export const queryAndUpdate = async <R, E>({
   strategy,
   logMessage,
   identityType = "authorized",
-}: {
-  request: (options: { certified: boolean; identity: Identity }) => Promise<R>;
-  onLoad: QueryAndUpdateOnResponse<R>;
-  logMessage: string;
-  onError?: QueryAndUpdateOnError<E>;
-  strategy?: QueryAndUpdateStrategy;
-  identityType?: QueryAndUpdateIdentity;
-}): Promise<void> => {
+}: QueryAndUpdateParams<R, E>): Promise<void> => {
   let certifiedDone = false;
   let requests: Array<Promise<void>>;
   let logPrefix: string;

frontend/src/tests/lib/services/utils.services.spec.ts

@@ -1,4 +1,8 @@
-import { queryAndUpdate } from "$lib/services/utils.services";
+import {
+  queryAndUpdate,
+  queryAndUpdateWithCanisterErrorTrack,
+} from "$lib/services/utils.services";
+import { canistersErrorsStore } from "$lib/stores/canisters-errors.store";
 import * as devUtils from "$lib/utils/dev.utils";
 import {
   mockIdentity,
@@ -7,6 +11,7 @@ import {
 } from "$tests/mocks/auth.store.mock";
 import { runResolvedPromises } from "$tests/utils/timers.test-utils";
 import { tick } from "svelte";
+import { get } from "svelte/store";
 
 describe("api-utils", () => {
   describe("queryAndUpdate", () => {
@@ -336,4 +341,88 @@ describe("api-utils", () => {
       });
     });
   });
+
+  describe("queryAndUpdateWithCanisterErrorTrack", () => {
+    const TEST_CANISTER_ID = "ryjl3-tyaaa-aaaaa-aaaba-cai";
+
+    beforeEach(() => {
+      resetIdentity();
+    });
+
+    it("should delete canister error on successful response", async () => {
+      const response = { data: "test" };
+      const request = vi.fn().mockResolvedValue(response);
+      const onLoad = vi.fn();
+
+      canistersErrorsStore.set({
+        canisterId: TEST_CANISTER_ID,
+        rawError: "initial error",
+      });
+
+      await queryAndUpdateWithCanisterErrorTrack({
+        request,
+        onLoad,
+        logMessage: "test-log",
+        canisterId: TEST_CANISTER_ID,
+      });
+
+      expect(get(canistersErrorsStore)).toEqual({});
+    });
+
+    it("should set canister error on error response", async () => {
+      const error = new Error("test error");
+      const request = vi.fn().mockRejectedValue(error);
+      const onLoad = vi.fn();
+      const onError = vi.fn();
+
+      await queryAndUpdateWithCanisterErrorTrack({
+        request,
+        onLoad,
+        onError,
+        logMessage: "test-log",
+        canisterId: TEST_CANISTER_ID,
+      });
+
+      expect(get(canistersErrorsStore)).toEqual({
+        [TEST_CANISTER_ID]: { raw: error },
+      });
+    });
+
+    it("should not update error store for query call in query_and_update strategy", async () => {
+      let resolveUpdate: (value: unknown) => void;
+      let rejectQuery: (value: unknown) => void;
+      const queryError = new Error("query error");
+
+      const request = vi
+        .fn()
+        .mockImplementation(({ certified }: { certified: boolean }) =>
+          certified
+            ? new Promise((resolve) => (resolveUpdate = resolve))
+            : new Promise((_, reject) => (rejectQuery = reject))
+        );
+      const onLoad = vi.fn();
+      const onError = vi.fn();
+
+      queryAndUpdateWithCanisterErrorTrack({
+        request,
+        onLoad,
+        onError,
+        logMessage: "test-log",
+        canisterId: TEST_CANISTER_ID,
+        strategy: "query_and_update",
+      });
+
+      await runResolvedPromises();
+
+      rejectQuery(queryError);
+      await runResolvedPromises();
+
+      expect(get(canistersErrorsStore)).toEqual({});
+
+      resolveUpdate({});
+      await runResolvedPromises();
+
+      expect(get(canistersErrorsStore)).toEqual({});
+    });
+  });
 });