fix(ui): fetch details parsing

frontend/app/components/shared/FetchDetailsModal/components/FetchTabs/FetchTabs.tsx

@@ -9,43 +9,63 @@ const REQUEST = 'REQUEST';
 const RESPONSE = 'RESPONSE';
 const TABS = [HEADERS, REQUEST, RESPONSE].map((tab) => ({ text: tab, key: tab }));
 
+
+type RequestResponse = {
+  headers?: Record<string, string>;
+  body?: any;
+};
+
 function parseRequestResponse(
   r: string,
   setHeaders: (hs: Record<string, string> | null) => void,
-  setJSONBody: (body: Record<string, string> | null) => void,
+  setJSONBody: (body: Record<string, unknown> | null) => void,
   setStringBody: (body: string) => void,
-) {
+): void {
   try {
     if (!r) {
       setHeaders(null);
       setJSONBody(null);
-      setStringBody('');
       return;
     }
-    const json = JSON.parse(r)
-    const hs = json.headers
-    const bd = json.body as string
 
-    if (typeof hs === "object") {
+    let parsed: RequestResponse;
-      setHeaders(hs);
+    try {
+      parsed = JSON.parse(r);
+    } catch (e) {
+      logger.error("Error parsing request string as JSON:", e);
+      setHeaders(null);
+      setJSONBody(null);
+      return;
+    }
+
+    const { headers, body } = parsed;
+
+    // Set headers if headers is a non-null object and not an array.
+    if (headers && typeof headers === "object" && !Array.isArray(headers)) {
+      setHeaders(headers);
     } else {
       setHeaders(null);
     }
-    if (!bd) {
+
-      setJSONBody(null)
+    // If body is not present, set it as null for JSON and an empty string for string body.
-      setStringBody('')
+    if (body === undefined || body === null) {
-    }
+      setJSONBody(null);
-    try {
+      setStringBody('');
-      const jBody = JSON.parse(bd)
+    } else if (typeof body === "string") {
-      if (typeof jBody === "object" && jBody != null) {
+      // Try to parse the body as JSON, if it fails, set it as a string body.
-        setJSONBody(jBody)
+      try {
-      } else {
+        const jBody = JSON.parse(body);
-        setStringBody(bd)
+        setJSONBody(jBody);
+      } catch {
+        setStringBody(body);
       }
-    } catch {
+    } else {
-      setStringBody(bd)
+      // If body is an object but not a string, it's already in JSON format.
+      setJSONBody(body as Record<string, unknown>);
     }
-  } catch(e) { logger.error("Error decoding payload json:", e, r)}
+  } catch (e) {
+    logger.error("Error decoding payload json:", e, r);
+  }
 }
 
 
@@ -137,7 +157,7 @@ function FetchTabs({ resource }: Props) {
               <div className="mt-6">
                 { jsonResponse 
                   ? <JSONTree src={jsonResponse} collapsed={false} enableClipboard />
-                  : <div className="ml-3 break-words my-3"> {stringResponse} </div>  
+                  : <div className="ml-3 break-words my-3"></div>
                 }
               </div>
               <div className="divider" />