Merge pull request #2760 from Infisical/daniel/request-ids

feat: request ID support

frontend/src/hooks/api/types.ts

@@ -51,17 +51,26 @@ export enum ApiErrorTypes {
 
 export type TApiErrors =
   | {
+      requestId: string;
       error: ApiErrorTypes.ValidationError;
       message: ZodIssue[];
       statusCode: 401;
     }
   | {
+      requestId: string;
+      error: ApiErrorTypes.UnauthorizedError;
+      message: string;
+      statusCode: 401;
+    }
+  | {
+      requestId: string;
       error: ApiErrorTypes.ForbiddenError;
       message: string;
       details: PureAbility["rules"];
       statusCode: 403;
     }
   | {
+      requestId: string;
       statusCode: 400;
       message: string;
       error: ApiErrorTypes.BadRequestError;

frontend/src/reactQuery.tsx

@@ -32,7 +32,12 @@ export const queryClient = new QueryClient({
             {
               title: "Validation Error",
               type: "error",
-              text: "Please check the input and try again.",
+              text: (
+                <div>
+                  <p>Please check the input and try again.</p>
+                  <p className="mt-2 text-xs">Request ID: {serverResponse.requestId}</p>
+                </div>
+              ),
               children: (
                 <Modal>
                   <ModalTrigger>
@@ -72,7 +77,8 @@ export const queryClient = new QueryClient({
             {
               title: "Forbidden Access",
               type: "error",
-              text: serverResponse.message,
+
+              text: `${serverResponse.message} [requestId=${serverResponse.requestId}]`,
               children: serverResponse?.details?.length ? (
                 <Modal>
                   <ModalTrigger>
@@ -165,7 +171,11 @@ export const queryClient = new QueryClient({
           );
           return;
         }
-        createNotification({ title: "Bad Request", type: "error", text: serverResponse.message });
+        createNotification({
+          title: "Bad Request",
+          type: "error",
+          text: `${serverResponse.message} [requestId=${serverResponse.requestId}]`
+        });
       }
     }
   }),

frontend/src/views/Org/IdentityPage/components/IdentityClientSecretModal.tsx

@@ -63,32 +63,21 @@ export const IdentityClientSecretModal = ({ popUp, handlePopUpToggle }: Props) =
   };
 
   const onFormSubmit = async ({ description, ttl, numUsesLimit }: FormData) => {
-    try {
-      const { clientSecret } = await createClientSecret({
-        identityId: popUpData.identityId,
-        description,
-        ttl: Number(ttl),
-        numUsesLimit: Number(numUsesLimit)
-      });
+    const { clientSecret } = await createClientSecret({
+      identityId: popUpData.identityId,
+      description,
+      ttl: Number(ttl),
+      numUsesLimit: Number(numUsesLimit)
+    });
 
-      setToken(clientSecret);
+    setToken(clientSecret);
 
-      createNotification({
-        text: "Successfully created client secret",
-        type: "success"
-      });
+    createNotification({
+      text: "Successfully created client secret",
+      type: "success"
+    });
 
-      reset();
-    } catch (err) {
-      console.error(err);
-      const error = err as any;
-      const text = error?.response?.data?.message ?? "Failed to create client secret";
-
-      createNotification({
-        text,
-        type: "error"
-      });
-    }
+    reset();
   };
 
   return (