Bugfix memory leaks at throttler

manifest.json

@@ -3,7 +3,7 @@
   "name": "JDN",
   "description": "JDN – helps Test Automation Engineer to create Page Objects in the test automation framework and speed up test development",
   "devtools_page": "index.html",
-  "version": "3.13.533",
+  "version": "3.13.534",
   "icons": {
     "128": "icon128.png"
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jdn-ai-chrome-extension",
-  "version": "3.13.533",
+  "version": "3.13.534",
   "description": "jdn-ai chrome extension",
   "scripts": {
     "start": "webpack --watch --env devenv",

src/app/store/store.ts

@@ -11,6 +11,7 @@ import { scriptNotifier } from "../../pageServices/scriptNotifier";
 import { changePageMiddleware } from "./middlewares/changePage.middleware";
 import { updateSocketMessageHandler } from "../../services/webSocketMessageHandler";
 import { onSetActive } from "../../features/locators/reducers/onSetActive.middleware";
+import { quitThrottlerMiddleware } from "../../common/utils/throttler";
 
 const rootReducer = {
   main: mainSlice,
@@ -33,7 +34,7 @@ export const store = configureStore({
           "main/setScriptMessage",
         ],
       },
-    }).concat([logger, scriptNotifier, cancellableActions, changePageMiddleware, onSetActive]),
+    }).concat([logger, scriptNotifier, cancellableActions, changePageMiddleware, onSetActive, quitThrottlerMiddleware]),
 });
 
 store.subscribe(() => updateMessageHandler(store.dispatch, store.getState()));

src/common/utils/throttler.ts

@@ -0,0 +1,57 @@
+import { Middleware } from "@reduxjs/toolkit";
+import { areInProgress } from "../../features/locators/selectors/locatorsFiltered.selectors";
+
+class Throttler {
+  accumulatedArgs: any[] = [];
+  interval: NodeJS.Timer | null = null;
+
+  constructor() {
+    this.accumulateAndThrottle = this.accumulateAndThrottle.bind(this);
+  }
+
+  accumulateAndThrottle(fn: (arg: any[]) => any) {
+    const debouncedFn = (args: any[]) => {
+      this.accumulatedArgs.push(...args);
+    };
+
+    const throttledFn = () => {
+      if (this.accumulatedArgs.length === 0) return;
+
+      try {
+        fn(this.accumulatedArgs);
+      } catch (error) {
+        this.quitThrottler();
+        if (__DEV_ENVIRONMENT__) console.log("Can't invoke throttled function:", error);
+      }
+      this.accumulatedArgs = [];
+    };
+
+    if (!this.interval) this.interval = setInterval(throttledFn, 500);
+
+    return (args: any) => {
+      debouncedFn(args);
+    };
+  }
+
+  quitThrottler() {
+    this.interval && clearInterval(this.interval);
+    this.interval = null;
+  }
+}
+
+export const throttler = new Throttler();
+
+export const quitThrottlerMiddleware: Middleware = (store) => (next) => (action) => {
+  const result = next(action);
+
+  switch (action.type) {
+    case "locators/updateLocatorGroup":
+    case "locators/failGeneration":
+      if (!areInProgress(store.getState())) {
+        throttler.quitThrottler();
+      }
+      break;
+  }
+
+  return result;
+};

src/features/locators/selectors/locatorsFiltered.selectors.ts

@@ -6,6 +6,8 @@ import { Locator } from "../types/locator.types";
 import { filterLocatorsByClassFilter } from "../utils/filterLocators";
 import { isProgressStatus } from "../utils/locatorGenerationController";
 import { selectLocatorsByPageObject, selectSortedLocators } from "./locatorsByPO.selectors";
+import { selectCurrentPage } from "../../../app/main.selectors";
+import { isLocatorListPage } from "../../../app/utils/heplers";
 
 export const selectFilteredLocators = createSelector(
   selectLocatorsByPageObject,
@@ -148,3 +150,9 @@ export const selectActiveLocators = createSelector(selectFilteredLocators, (loca
 export const selectCheckedLocators = createSelector(selectFilteredLocators, (locators) =>
   locators.filter((_loc) => _loc.generate)
 );
+
+export const areInProgress = createSelector(
+  selectInProgressByPageObj,
+  selectCurrentPage,
+  (locators, page) => isLocatorListPage(page.page) && locators.length > 0
+);

src/services/webSocketMessageHandler.ts

@@ -1,12 +1,12 @@
-import { debouncer } from "../common/utils/debouncer";
+import { throttler } from "../common/utils/throttler";
 import { failGeneration, updateLocatorGroup } from "../features/locators/locators.slice";
 import { selectLocatorByJdnHash } from "../features/locators/selectors/locators.selectors";
 import { Locator, LocatorTaskStatus } from "../features/locators/types/locator.types";
 import { NETWORK_ERROR, NO_ELEMENT_IN_DOCUMENT } from "../features/locators/utils/constants";
 import { locatorGenerationController } from "../features/locators/utils/locatorGenerationController";
 import { sendMessage } from "../pageServices/connector";
 import { webSocketController } from "./webSocketController";
-import { selectInProgressByPageObj } from "../features/locators/selectors/locatorsFiltered.selectors";
+import { areInProgress, selectInProgressByPageObj } from "../features/locators/selectors/locatorsFiltered.selectors";
 import { selectCurrentPageObject } from "../features/pageObjects/selectors/pageObjects.selectors";
 
 const reScheduledTasks = new Set();
@@ -63,13 +63,12 @@ export const updateSocketMessageHandler = (dispatch: any, state: any) => {
           const pageObject = selectCurrentPageObject(state)!;
           dispatch(updateLocatorGroup({ locators, pageObject }));
         };
-        debouncer.accumulateAndDebounce(onStatusChange)([payload]);
+        if (areInProgress(state)) throttler.accumulateAndThrottle(onStatusChange)([payload]);
         break;
       }
     }
     if (pong) {
-      const areInProgress = selectInProgressByPageObj(state).length > 0;
-      if (!areInProgress) webSocketController.stopPing();
+      if (!areInProgress(state)) webSocketController.stopPing();
     }
   };