added error handling and a common ApiAlert component

src/components/common/Alerts/ApiAlertError.tsx

+import { Alert } from "@mui/material";
+import { ApiError, ErrorMessage } from "../../../types/common";
+import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
+import { SerializedError } from "@reduxjs/toolkit";
+
+interface ApiAlertErrorProps {
+  error: ApiError;
+}
+
+export const isFetchBaseQueryError = (
+  error: unknown
+): error is FetchBaseQueryError => {
+  return typeof error === "object" && error != null && "status" in error;
+};
+
+export const isErrorWithMessage = (
+  error: unknown
+): error is { message: string } => {
+  return (
+    typeof error === "object" &&
+    error != null &&
+    "message" in error &&
+    typeof (error as SerializedError).message === "string"
+  );
+};
+
+export const getErrorMessage = (
+  error: FetchBaseQueryError | SerializedError | unknown
+) => {
+  if (error) {
+    if (isFetchBaseQueryError(error)) {
+      const customError = error.data as ErrorMessage;
+      if (customError) {
+        return customError.description
+          ? customError.description
+          : customError.error;
+      }
+      return "Unknown error";
+    } else if (isErrorWithMessage(error)) {
+      return error.message;
+    }
+  }
+  return "Unknown error";
+};
+
+export const ApiAlertError = ({ error }: ApiAlertErrorProps) => (
+  <Alert severity="error">{getErrorMessage(error)}</Alert>
+);

src/views/IOC/IOCListView.tsx

@@ -12,6 +12,7 @@ import {
 } from "../../components/common/Helper";
 import { GlobalAppBarContext, OnPageParams } from "../../types/common";
 import { SearchBar } from "../../components/common/SearchBar/SearchBar";
+import { ApiAlertError } from "../../components/common/Alerts/ApiAlertError";
 import useUrlState from "@ahooksjs/use-url-state";
 import {
   serialize,
@@ -23,7 +24,7 @@ import IOCTable from "../../components/IOC/IOCTable";
 export const IOCListView = () => {
   const { setTitle }: GlobalAppBarContext = useGlobalAppBarContext();
   useEffect(() => setTitle(applicationTitle("IOCs")), [setTitle]);
-  const [listIocs, { data: iocs, isLoading }] = useLazyListIocsQuery();
+  const [listIocs, { data: iocs, isLoading, error }] = useLazyListIocsQuery();
 
   const [urlState, setUrlState] = useUrlState(
     {
@@ -167,13 +168,17 @@ export const IOCListView = () => {
             loading={isLoading}
             placeholder="Search"
           >
-            <IOCTable
-              iocs={iocs?.iocList}
-              loading={isLoading}
-              rowType="explore"
-              pagination={pagination}
-              onPage={onPage}
-            />
+            {error ? (
+              <ApiAlertError error={error} />
+            ) : (
+              <IOCTable
+                iocs={iocs?.iocList}
+                loading={isLoading}
+                rowType="explore"
+                pagination={pagination}
+                onPage={onPage}
+              />
+            )}
           </SearchBar>
         </Grid>
       </Grid>