ORV2-1682 Display CorrelationId in Unexpected Error Page

frontend/src/common/pages/UniversalUnexpected.scss

@@ -2,4 +2,9 @@
   &__link {
     margin-left: 0.25rem;
   }
+
+  &__correlation-id {
+    font-weight: bold;
+    margin-bottom: 0px;
+  }
 }

frontend/src/common/pages/UniversalUnexpected.tsx

@@ -2,23 +2,49 @@ import "./UniversalUnexpected.scss";
 import { ONROUTE_WEBPAGE_LINKS } from "../../routes/constants";
 import { ErrorPage } from "../components/error/ErrorPage";
 import { CustomExternalLink } from "../components/links/CustomExternalLink";
+import { useLocation } from "react-router-dom";
 
 export const UniversalUnexpected = () => {
+  const { state } = useLocation();
+  if (!state?.correlationId) {
+    return (
+      <ErrorPage
+        errorTitle="Unexpected Error"
+        msgNode={
+          <div className="unexpected-error-msg">
+            <span className="unexpected-error-msg__text">Please return to</span>
+
+            <CustomExternalLink
+              className="unexpected-error-msg__link"
+              href={ONROUTE_WEBPAGE_LINKS.HOME}
+            >
+              onRouteBC
+            </CustomExternalLink>
+          </div>
+        }
+      />
+    );
+  }
   return (
     <ErrorPage
       errorTitle="Unexpected Error"
       msgNode={
         <div className="unexpected-error-msg">
           <span className="unexpected-error-msg__text">
-            Please return to
+            If this problem persists, please email
           </span>
-
-          <CustomExternalLink
-            className="unexpected-error-msg__link"
-            href={ONROUTE_WEBPAGE_LINKS.HOME}
-          >
-            onRouteBC
+          <br></br>
+          <span className="unexpected-error-msg__text">
+            the error reference number below to
+          </span>
+          <CustomExternalLink className="unexpected-error-msg__link">
+            [email protected]
           </CustomExternalLink>
+
+          <p className="unexpected-error-msg__correlation-id">
+            {/** Display just the first segment of the correlation id */}
+            {state.correlationId.split("-")[0].toUpperCase()}
+          </p>
         </div>
       }
     />

frontend/src/features/idir/company/IDIRCreateCompany.tsx

@@ -20,6 +20,7 @@ import {
   CreateCompanyRequest,
   CompanyProfile,
 } from "../../manageProfile/types/manageProfile";
+import { AxiosError } from "axios";
 
 /**
  * The form for a staff user to create a company.
@@ -117,8 +118,10 @@ export const IDIRCreateCompany = React.memo(() => {
         setClientNumber(() => clientNumber);
       }
     },
-    onError: () => {
-      navigate(ERROR_ROUTES.UNEXPECTED);
+    onError: (error: AxiosError) => {
+      navigate(ERROR_ROUTES.UNEXPECTED, {
+        state: { correlationId: error.response?.headers["x-correlation-id"] },
+      });
     },
   });
 

frontend/src/features/idir/search/components/IDIRPermitSearchRowActions.tsx

@@ -162,7 +162,9 @@ export const IDIRPermitSearchRowActions = ({
         alertType: "success",
       });
     } else {
-      navigate(routes.ERROR_ROUTES.UNEXPECTED);
+      navigate(routes.ERROR_ROUTES.UNEXPECTED, {
+        state: { correlationId: response.headers["x-correlation-id"] },
+      });
     }
   };
 

frontend/src/features/manageProfile/apiManager/hooks.ts

@@ -2,7 +2,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { useAuth } from "react-oidc-context";
 import { useContext, useEffect } from "react";
 import { useNavigate } from "react-router";
-import { AxiosResponse } from "axios";
+import { AxiosError, AxiosResponse } from "axios";
 
 import { IDPS } from "../../../common/types/idp";
 import { Nullable } from "../../../common/types/common";
@@ -54,9 +54,7 @@ export const useCompanyInfoQuery = () => {
  * @param companyId Id of the company to get the info for
  * @returns Query object containing company info
  */
-export const useCompanyInfoDetailsQuery = (
-  companyId: number,
-) => {
+export const useCompanyInfoDetailsQuery = (companyId: number) => {
   return useQuery({
     queryKey: ["companyInfo"],
     queryFn: () => getCompanyInfoById(companyId),
@@ -268,12 +266,19 @@ export const useDeleteCompanyActiveUsers = () => {
   const navigate = useNavigate();
   return useMutation({
     mutationFn: deleteCompanyActiveUsers,
-    onError: () => navigate(ERROR_ROUTES.UNEXPECTED),
+    onError: (error: AxiosError) => {
+      navigate(ERROR_ROUTES.UNEXPECTED, {
+        state: { correlationId: error.response?.headers["x-correlation-id"] },
+      });
+    },
     onSuccess: (response: AxiosResponse) => {
-      const { data: companyUserResponse } = response;
+      const { data: companyUserResponse, headers } = response;
+
       const { failure } = companyUserResponse as DeleteResponse;
       if (failure?.length > 0) {
-        navigate(ERROR_ROUTES.UNEXPECTED);
+        navigate(ERROR_ROUTES.UNEXPECTED, {
+          state: { correlationId: headers["x-correlation-id"] },
+        });
       }
     },
   });
@@ -287,12 +292,18 @@ export const useDeleteCompanyPendingUsers = () => {
   const navigate = useNavigate();
   return useMutation({
     mutationFn: deleteCompanyPendingUsers,
-    onError: () => navigate(ERROR_ROUTES.UNEXPECTED),
+    onError: (error: AxiosError) => {
+      navigate(ERROR_ROUTES.UNEXPECTED, {
+        state: { correlationId: error.response?.headers["x-correlation-id"] },
+      });
+    },
     onSuccess: (response: AxiosResponse) => {
-      const { data: companyUserResponse } = response;
+      const { data: companyUserResponse, headers } = response;
       const { failure } = companyUserResponse as DeleteResponse;
       if (failure?.length > 0) {
-        navigate(ERROR_ROUTES.UNEXPECTED);
+        navigate(ERROR_ROUTES.UNEXPECTED, {
+          state: { correlationId: headers["x-correlation-id"] },
+        });
       }
     },
   });

frontend/src/features/manageProfile/components/forms/myInfo/MyInfoForm.tsx

@@ -19,6 +19,9 @@ import {
   BCeIDUserRoleType,
   BCeID_USER_ROLE,
 } from "../../../../../common/authentication/types";
+import { AxiosError } from "axios";
+import { useNavigate } from "react-router-dom";
+import { ERROR_ROUTES } from "../../../../../routes/constants";
 
 export const MyInfoForm = memo(
   ({
@@ -29,6 +32,7 @@ export const MyInfoForm = memo(
     setIsEditing: React.Dispatch<React.SetStateAction<boolean>>;
   }) => {
     const queryClient = useQueryClient();
+    const navigate = useNavigate();
     const formMethods = useForm<UserInfoRequest>({
       defaultValues: {
         firstName: getDefaultRequiredVal("", myInfo?.firstName),
@@ -61,6 +65,11 @@ export const MyInfoForm = memo(
           setIsEditing(false);
         }
       },
+      onError: (error: AxiosError) => {
+        navigate(ERROR_ROUTES.UNEXPECTED, {
+          state: { correlationId: error.response?.headers["x-correlation-id"] },
+        });
+      },
     });
 
     const onUpdateMyInfo = (data: UserInfoRequest) => {

frontend/src/features/manageProfile/components/forms/userManagement/EditUser.tsx

@@ -25,6 +25,7 @@ import {
   getDefaultRequiredVal,
 } from "../../../../../common/helpers/util";
 import { BCeID_USER_ROLE } from "../../../../../common/authentication/types";
+import { AxiosError } from "axios";
 
 /**
  * Edit User form for User Management.
@@ -76,8 +77,10 @@ export const EditUserForm = memo(
      */
     const updateUserInfoMutation = useMutation({
       mutationFn: updateUserInfo,
-      onError: () => {
-        navigate(ERROR_ROUTES.UNEXPECTED);
+      onError: (error: AxiosError) => {
+        navigate(ERROR_ROUTES.UNEXPECTED, {
+          state: { correlationId: error.response?.headers["x-correlation-id"] },
+        });
       },
       onSuccess: (response) => {
         if (response.status === 200) {
@@ -93,6 +96,10 @@ export const EditUserForm = memo(
               selectedTab: BCEID_PROFILE_TABS.USER_MANAGEMENT,
             },
           });
+        } else {
+          navigate(ERROR_ROUTES.UNEXPECTED, {
+            state: { correlationId: response.headers["x-correlation-id"] },
+          });
         }
       },
     });

frontend/src/features/manageVehicles/components/list/List.tsx

@@ -159,9 +159,13 @@ export const List = memo(
       setIsDeleteDialogOpen(() => true);
     }, []);
 
-    const handleError = () => {
+    const handleError = (correlationId?: string) => {
       setIsDeleteDialogOpen(() => false);
-      navigate(ERROR_ROUTES.UNEXPECTED);
+      navigate(ERROR_ROUTES.UNEXPECTED, {
+        state: {
+          correlationId,
+        },
+      });
     };
 
     const onConfirmDelete = async () => {
@@ -177,7 +181,7 @@ export const List = memo(
           const responseBody = response.data;
           if (responseBody.failure.length > 0) {
             // Delete action for some vehicles failed
-            handleError();
+            handleError(response.headers["x-correlation-id"]);
           } else {
             setIsDeleteDialogOpen(() => false);
             snackBar.setSnackBar({
@@ -193,7 +197,7 @@ export const List = memo(
             query.refetch();
           }
         } else {
-          handleError();
+          handleError(response.headers["x-correlation-id"]);
         }
       } catch {
         handleError();

frontend/src/features/permits/hooks/cart.ts

@@ -9,6 +9,9 @@ import {
   getCartCount,
   removeFromCart,
 } from "../apiManager/cart";
+import { AxiosError } from "axios";
+import { ERROR_ROUTES } from "../../../routes/constants";
+import { useNavigate } from "react-router-dom";
 
 const CART_KEY = "cart";
 const CART_COUNT_KEY = "cart-count";
@@ -19,6 +22,7 @@ const CART_ITEM = "cart-item";
  * @returns Mutation object for adding items to cart
  */
 export const useAddToCart = () => {
+  const navigate = useNavigate();
   return useMutation({
     mutationFn: ({
       companyId,
@@ -27,6 +31,13 @@ export const useAddToCart = () => {
       companyId: number;
       applicationIds: string[];
     }) => addToCart(companyId, applicationIds),
+    onError: (error: AxiosError) => {
+      navigate(ERROR_ROUTES.UNEXPECTED, {
+        state: {
+          correlationId: error?.response?.headers["x-correlation-id"],
+        },
+      });
+    },
   });
 };