HPCC-33199 Workunits not handling ESP Exceptions

esp/src/src-react/comms/workunit.ts

@@ -1,9 +1,13 @@
 import { Workunit, WorkunitsService, type WsWorkunits } from "@hpcc-js/comms";
+import { scopedLogger } from "@hpcc-js/util";
+import nlsHPCC from "src/nlsHPCC";
 import { Thenable } from "src/store/Deferred";
 import { Paged } from "src/store/Paged";
 import { BaseStore } from "src/store/Store";
 import { wuidToDateTime } from "src/Utility";
 
+const logger = scopedLogger("src-react/comms/workunit.ts");
+
 const service = new WorkunitsService({ baseUrl: "" });
 
 export type WUQueryStore = BaseStore<WsWorkunits.WUQuery, Workunit>;
@@ -65,6 +69,16 @@ export function CreateWUQueryStore(): BaseStore<WsWorkunits.WUQuery, Workunit> {
                 data,
                 total: response.NumWUs
             };
+        }).catch(e => {
+            if (e.Exception && e.Exception[0] && e.Exception[0].Message === nlsHPCC.GridAbortMessage) {
+                logger.debug(e.Exception[0].Message);
+            } else {
+                logger.error(e);
+            }
+            return {
+                data: [],
+                total: 0
+            };
         });
     });
     return store;

esp/src/src-react/components/controls/Grid.tsx

@@ -239,12 +239,12 @@ const FluentStoreGrid: React.FunctionComponent<FluentStoreGridProps> = ({
 
     const abortController = React.useRef<AbortController>();
 
-    React.useEffect(() => {
+    useDeepEffect(() => {
         if (abortController.current) {
-            abortController.current.abort({ message: "Grid aborting stale request" });
+            abortController.current.abort({ message: nlsHPCC.GridAbortMessage });
         }
         abortController.current = new AbortController();
-    }, [query]);
+    }, [], [query, sorted]);
 
     const refreshTable = useDeepCallback((clearSelection = false) => {
         if (isNaN(start) || isNaN(count)) return;
@@ -260,7 +260,7 @@ const FluentStoreGrid: React.FunctionComponent<FluentStoreGridProps> = ({
             setItems(items);
             selectedIndices.forEach(index => selectionHandler.setIndexSelected(index, true, false));
         });
-    }, [abortController?.current?.signal, count, selectionHandler, start, store], [query, sorted]);
+    }, [count, selectionHandler, start, store], [query, sorted]);
 
     React.useEffect(() => {
         //  Dummy line to ensure its included in the dependency array  ---

esp/src/src-react/util/history.ts

@@ -67,7 +67,7 @@ export function parseSort(_?: string): QuerySortItem | undefined {
 }
 
 export function updateSort(sorted: boolean, descending: boolean, sortBy: string) {
-    updateParam("sortBy", sorted ? (descending ? "-" : "") + sortBy : undefined);
+    updateParam("sortBy", sorted ? (descending ? "-" : "") + sortBy : null);    // null to remove param...
 }
 
 export function parsePage(_: string): number {

esp/src/src/nls/hpcc.ts

@@ -396,6 +396,7 @@ export = {
         Graphs: "Graphs",
         GraphControl: "Graph Control",
         GraphView: "Graph View",
+        GridAbortMessage: "Grid aborting stale request",
         Group: "Group",
         GroupBy: "Group By",
         Grouping: "Grouping",