DHFPROD-7672: Avoid repeating search calls on errors

ryanjdew · MarkLogic Builder · commit d897c58b69ef · 2021-12-27T11:36:45.000-08:00
diff --git a/marklogic-data-hub-central/ui/src/components/tiles/tiles.tsx b/marklogic-data-hub-central/ui/src/components/tiles/tiles.tsx
@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState} from "react";
+import React, {useContext, useEffect, useRef, useState} from "react";
 import {Mosaic, MosaicWindow} from "react-mosaic-component";
 import "react-mosaic-component/react-mosaic-component.css";
 import {ArrowsAltOutlined, ShrinkOutlined, CloseOutlined} from "@ant-design/icons";
@@ -27,7 +27,7 @@ interface Props {
 }
 
 const Tiles: React.FC<Props> = (props) => {
-
+  const componentIsMounted = useRef(true);
   const options = props.options;
   const controls = props.options.controls;
   const viewId = props.id;
@@ -84,8 +84,8 @@ const Tiles: React.FC<Props> = (props) => {
 
   const getEntities = async () => {
     try {
-      const res= await primaryEntityTypes();
-      if (res) {
+      const res = await primaryEntityTypes();
+      if (res && componentIsMounted.current) {
         if (res.data.length === 0) setModelingInfoVisible(true);
       }
     } catch (error) {
@@ -107,6 +107,7 @@ const Tiles: React.FC<Props> = (props) => {
 
   useEffect(() => {
     getEntities();
+    return () => { componentIsMounted.current = false; };
   }, []);
 
   const modelingInfoViewChange = (visible) => {
diff --git a/marklogic-data-hub-central/ui/src/pages/Detail.tsx b/marklogic-data-hub-central/ui/src/pages/Detail.tsx
@@ -62,9 +62,9 @@ const Detail: React.FC<Props> = ({history, location}) => {
 
   const getSaveQueries = async () => {
     try {
-      if (authorityService.isSavedQueryUser()) {
+      if (componentIsMounted.current && authorityService.isSavedQueryUser()) {
         const response = await fetchQueries();
-        if (response.data) {
+        if (componentIsMounted.current && response.data) {
           setSavedQueries(response.data);
         }
       }
diff --git a/marklogic-data-hub-central/ui/src/util/user-context.tsx b/marklogic-data-hub-central/ui/src/util/user-context.tsx
@@ -57,8 +57,8 @@ export const UserContext = React.createContext<IUserContextInterface>({
 });
 
 const UserProvider: React.FC<{ children: any }> = ({children}) => {
-
   const [user, setUser] = useState<UserContextInterface>(defaultUserData);
+  const [encounteredErrors, setEncounteredErrors] = useState<string[]>([]);
   const [stompMessageSubscription, setStompMessageSubscription] = useState<Subscription|null>(null);
   const [unsubscribeId, setUnsubscribeId] = useState<string|null>(null);
   const sessionUser = localStorage.getItem("dataHubUser");
@@ -68,6 +68,37 @@ const UserProvider: React.FC<{ children: any }> = ({children}) => {
   initialTimeoutDate.setSeconds(initialTimeoutDate.getSeconds() + MAX_SESSION_TIME);
   const sessionTimeoutDate = useRef<Date>(initialTimeoutDate);
 
+  const getConfigHash = (config) => {
+    return CryptoJS.SHA256(`${config.method}:${config.url}:${config.data}`).toString();
+  };
+
+  axios.interceptors.request.use(
+    request => {
+      if (request) {
+        const requestHash = getConfigHash(request);
+        if (encounteredErrors.includes(requestHash)) {
+          throw new axios.Cancel(requestHash);
+        }
+      }
+      return request;
+    },
+    error => {
+      if (error instanceof axios.Cancel && encounteredErrors.includes(error.message)) {
+        return new Promise(r => setTimeout(r, 5000)).then(
+          (r) => {
+            // forget the error after 5 seconds.
+            if (encounteredErrors.includes(error.message)) {
+              encounteredErrors.splice(encounteredErrors.indexOf(error.message), 1);
+              setEncounteredErrors(encounteredErrors);
+            }
+            return r;
+          }
+        );
+      }
+      return Promise.reject(error);
+    }
+  );
+
   const setSessionTimeoutDate = (timeInSeconds) => {
     const timeoutDate = new Date();
     timeoutDate.setSeconds(timeoutDate.getSeconds() + timeInSeconds);
@@ -202,94 +233,130 @@ const UserProvider: React.FC<{ children: any }> = ({children}) => {
       localStorage.setItem("loginResp", "");
       localStorage.setItem("hubCentralSessionToken", "");
       authoritiesService.setAuthorities([]);
+      setEncounteredErrors([]);
       resetEnvironment();
     });
   };
 
+  /*
+  * handleError - A consistent way to handle and present errors.
+  * @param error - The error response which we will decide to handle an error
+  * */
   const handleError = (error) => {
     const DEFAULT_MESSAGE = "Internal Server Error";
-    switch (error.response.status) {
-    case 401: {
-      localStorage.setItem("dataHubUser", "");
-      localStorage.setItem("loginResp", "");
-      setUser({...user, name: "", authenticated: false});
-      break;
-    }
-    case 400:
-    case 403:
-    case 405:
-    case 408:
-    case 414: {
-      console.error("HTTP ERROR", error.response);
-      let title = error.response.status + " " + error.response.statusText;
-      let message = DEFAULT_MESSAGE;
-
-      if (error.response.data.hasOwnProperty("message")) {
-        message = error.response.data.message;
+    let errorHash = "";
+    let errorAlreadyEncountered = false;
+    if (error.config && error.response && error.response.status >= 500) {
+      let config = error.config;
+      errorHash = getConfigHash(config);
+      errorAlreadyEncountered = encounteredErrors.includes(errorHash);
+      if (!errorAlreadyEncountered) {
+        console.warn("Request error will cause future exact requests to be canceled for the next 5 seconds.");
+        encounteredErrors.push(errorHash);
+        setEncounteredErrors(encounteredErrors);
       }
-      setUser({
-        ...user,
-        error: {
-          title: title,
-          message: message,
-          type: "ALERT"
-        }
-      });
-      break;
     }
-    case 404: {
-      setUser({
-        ...user,
-        // redirect: true,
-        error: {
-          title: error.response.data.error,
-          message: error.response.data.message || DEFAULT_MESSAGE,
-          type: "ALERT"
+    if (!errorAlreadyEncountered) {
+      if (error.response) {
+        switch (error.response.status) {
+        case 401: {
+          localStorage.setItem("dataHubUser", "");
+          localStorage.setItem("loginResp", "");
+          setUser({...user, name: "", authenticated: false});
+          break;
         }
-      });
-      break;
-    }
-    case 500:
-    case 501:
-    case 502:
-    case 503:
-    case 504:
-    case 505:
-    case 511: {
-      console.error("HTTP ERROR ", error.response);
-      let title = error.response.status + " " + error.response.statusText;
-      let message = DEFAULT_MESSAGE;
+        case 400:
+        case 403:
+        case 405:
+        case 408:
+        case 414: {
+          console.error("HTTP ERROR", error.response);
+          let title = error.response.status + " " + error.response.statusText;
+          let message = DEFAULT_MESSAGE;
 
-      if (error.response.data.hasOwnProperty("message")) {
-        message = error.response.data.message;
-      }
-      setUser({
-        ...user,
-        error: {
-          title,
-          message,
-          type: "MODAL"
+          if (error.response.data.hasOwnProperty("message")) {
+            message = error.response.data.message;
+          }
+          setUser({
+            ...user,
+            error: {
+              title: title,
+              message: message,
+              type: "ALERT",
+              encounteredErrors
+            }
+          });
+          break;
         }
-      });
-      break;
-    }
-    default: {
-      console.error("HTTP ERROR ", error.response);
+        case 404: {
+          setUser({
+            ...user,
+            // redirect: true,
+            error: {
+              title: error.response.data.error,
+              message: error.response.data.message || DEFAULT_MESSAGE,
+              type: "ALERT",
+              encounteredErrors
+            }
+          });
+          break;
+        }
+        case 500:
+        case 501:
+        case 502:
+        case 503:
+        case 504:
+        case 505:
+        case 511: {
+          console.error("HTTP ERROR ", error.response);
+          let title = error.response.status + " " + error.response.statusText;
+          let message = DEFAULT_MESSAGE;
 
-      setUser({
-        ...user,
-        error: {
-          title: DEFAULT_MESSAGE,
-          message: "Please check the console for more information",
-          type: "MODAL"
+          if (error.response.data.hasOwnProperty("message")) {
+            message = error.response.data.message;
+          }
+          setUser({
+            ...user,
+            error: {
+              title,
+              message,
+              type: "MODAL",
+              encounteredErrors
+            }
+          });
+          break;
         }
-      });
-      break;
-    }
+        default: {
+          console.error("HTTP ERROR ", error.response);
+          setUser({
+            ...user,
+            error: {
+              title: DEFAULT_MESSAGE,
+              message: "Please check the console for more information",
+              type: "MODAL",
+              encounteredErrors
+            }
+          });
+          break;
+        }
+        }
+      } else {
+        console.error("ERROR ", error);
+        setUser({
+          ...user,
+          error: {
+            title: DEFAULT_MESSAGE,
+            message: "Please check the console for more information",
+            type: "MODAL",
+            encounteredErrors
+          }
+        });
+      }
     }
   };
 
   const clearErrorMessage = () => {
+    setEncounteredErrors([]);
     setUser({...user, error: {title: "", message: "", type: ""}});
   };
 

Original file line number	Diff line number	Diff line change
`@@ -62,9 +62,9 @@ const Detail: React.FC<Props> = ({history, location}) => {`
`62`	`62`
`63`	`63`	`const getSaveQueries = async () => {`
`64`	`64`	`try {`
`65`		`- if (authorityService.isSavedQueryUser()) {`
	`65`	`+ if (componentIsMounted.current && authorityService.isSavedQueryUser()) {`
`66`	`66`	`const response = await fetchQueries();`
`67`		`- if (response.data) {`
	`67`	`+ if (componentIsMounted.current && response.data) {`
`68`	`68`	`setSavedQueries(response.data);`
`69`	`69`	`}`
`70`	`70`	`}`