feat: request ID support

frontend/src/hooks/api/types.ts

@@ -50,12 +50,15 @@ export enum ApiErrorTypes {
 
 export type TApiErrors =
   | {
+      requestId: string;
       error: ApiErrorTypes.ValidationError;
       message: ZodIssue[];
       statusCode: 403;
     }
-  | { error: ApiErrorTypes.ForbiddenError; message: string; statusCode: 401 }
+  | { requestId: string; error: ApiErrorTypes.ForbiddenError; message: string; statusCode: 403 }
+  | { requestId: string; error: ApiErrorTypes.UnauthorizedError; message: string; statusCode: 401 }
   | {
+      requestId: string;
       statusCode: 400;
       message: string;
       error: ApiErrorTypes.BadRequestError;

frontend/src/reactQuery.tsx

@@ -28,20 +28,26 @@ export const queryClient = new QueryClient({
                     </div>
                   </div>
                 ))}
+                <div className="mt-2">Request ID: {serverResponse.requestId}</div>
               </div>
             )
           });
           return;
         }
-        if (serverResponse.statusCode === 401) {
-          createNotification({
-            title: "Forbidden Access",
-            type: "error",
-            text: serverResponse.message
-          });
-          return;
-        }
-        createNotification({ title: "Bad Request", type: "error", text: serverResponse.message });
+
+        const title =
+          // eslint-disable-next-line no-nested-ternary
+          serverResponse.statusCode === 403
+            ? "Forbidden Access"
+            : serverResponse.statusCode === 401
+            ? "Unauthorized Access"
+            : "Bad Request";
+
+        createNotification({
+          title,
+          type: "error",
+          text: `${serverResponse.message} [requestId=${serverResponse.requestId}]`
+        });
       }
     }
   }),