Fix frontend API call error handling

patientsearch/src/js/constants/consts.js

@@ -155,3 +155,13 @@ export const REALM_ACCESS_TOKEN_KEY = "realm_access";
 export const MAX_MAIN_TABLE_WIDTH = "1280px";
 export const FOLLOWING_FLAG = "following";
 export const MIN_QUERY_COUNT = 500;
+export const objErrorStatus = {
+  401: {
+    text: "Unauthorized.",
+    logoutURL: "/logout?unauthorized=true",
+  },
+  403: {
+    text: "Forbidden.",
+    logoutURL: "/logout?forbidden=true",
+  }
+};

patientsearch/src/js/containers/Logout.js

@@ -8,10 +8,12 @@ import { getUrlParameter } from "../helpers/utility";
 import { useSettingContext } from "../context/SettingContextProvider";
 import "../../styles/app.scss";
 
+
+const isForbidden = getUrlParameter("forbidden");
 // Error message, e.g. forbidden error
 const AlertMessage = () => {
   const appSettings = useSettingContext().appSettings;
-  if (!getUrlParameter("forbidden")) return ""; // look for forbidden message for now, can be others as well
+  if (!isForbidden) return ""; // look for forbidden message for now, can be others as well
   const message =
     appSettings && appSettings["FORBIDDEN_TEXT"]
       ? appSettings["FORBIDDEN_TEXT"]
@@ -41,15 +43,17 @@ render(
       </Typography>
       <AlertMessage></AlertMessage>
       <br />
-      <Button
-        color="primary"
-        href="/home"
-        align="center"
-        variant="outlined"
-        size="large"
-      >
-        Click here to log in
-      </Button>
+      {!isForbidden && 
+        <Button
+          color="primary"
+          href="/home"
+          align="center"
+          variant="outlined"
+          size="large"
+        >
+          Click here to log in
+        </Button>
+      }
     </div>
   </Layout>,
   document.getElementById("content")

patientsearch/src/js/context/PatientListContextProvider.js

@@ -263,14 +263,10 @@ export default function PatientListContextProvider({ children }) {
     setNoDataText(text);
   };
   const handleErrorCallback = (e) => {
-    if (e && e.status === 401) {
-      setErrorMessage("Unauthorized.");
-      window.location = "/logout?unauthorized=true";
-      return;
-    }
-    if (e && e.status === 403) {
-      setErrorMessage("Forbidden.");
-      window.location = "/logout?forbidden=true";
+    const oStatus = constants.objErrorStatus[parseInt(e?.status)];
+    if (oStatus) {
+      setErrorMessage(`${oStatus.text}. Logging out...`);
+      window.location = oStatus.logoutURL;
       return;
     }
     setErrorMessage(
@@ -1067,17 +1063,8 @@ export default function PatientListContextProvider({ children }) {
         })
         .catch((error) => {
           console.log("Failed to retrieve data", error);
-          //unauthorized error
+          // set error message or redirect based on error status
           handleErrorCallback(error);
-          setErrorMessage(
-            `Error retrieving data: ${
-              typeof error === "string"
-                ? error
-                : error && error.status
-                ? "Error status " + error.status
-                : error
-            }`
-          );
           resolve(defaults);
         });
     });

patientsearch/src/js/context/UserContextProvider.js

@@ -10,9 +10,12 @@ import {
   getRolesFromToken,
   getAccessToken,
   isString,
-  validateToken,
+  validateToken
 } from "../helpers/utility";
-import { noCacheParam } from "../constants/consts";
+import {
+  noCacheParam,
+  objErrorStatus
+ } from "../constants/consts";
 const UserContext = React.createContext({});
 /*
  * context component that allows user info to be accessible to its children component(s)
@@ -21,17 +24,18 @@ export default function UserContextProvider({ children }) {
   const [user, setUser] = useState(null);
   const [errorMessage, setErrorMessage] = useState("");
   const handleErrorCallback = (e) => {
-    if (parseInt(e) === 401) {
-      setErrorMessage("Unauthorized");
-      window.location = "/logout?unauthorized=true";
+    const status = parseInt(e?.status);
+    const oStatus = objErrorStatus[status];
+    if (oStatus) {
+      window.location = oStatus.logoutURL;
       return;
     }
     setErrorMessage(
       isString(e)
         ? e
         : e && e.message
         ? e.message
-        : "Error occurred processing user data"
+        : "Error occurred processing requested data"
     );
   };
   useEffect(() => {
@@ -105,12 +109,12 @@ export default function UserContextProvider({ children }) {
       },
       (e) => {
         console.log("token validation error ", e);
-        handleErrorCallback(401);
+        handleErrorCallback(e);
       }
     );
   }, []);
   return (
-    <UserContext.Provider value={{ user: user, userError: errorMessage }}>
+    <UserContext.Provider value={{ user: user, userError: errorMessage}}>
       <UserContext.Consumer>
         {({ user, userError }) => {
           if (user || userError) return children;

patientsearch/src/js/helpers/utility.js

@@ -90,6 +90,10 @@ export async function fetchData(url, params, errorCallback) {
     console.log("no results returned ", results);
     if (!results.ok) {
       console.log("Error results ", results);
+      if (results && results.status) {
+        // raise error here to allow callee to catch it as needed
+        throw results;
+      }
       const errorMessage =
         json && json.message
           ? json.message