Network logging in iframe (#31)

* Network logging in iframe

* commons

* import

Author: OmerKat

package-lock.json

@@ -20,17 +20,18 @@
   },
   "dependencies": {
     "axios": "^1.6.2",
-    "socket.io-client": "^4.7.5"
+    "socket.io-client": "^4.7.5",
+    "uuid": "^13.0.0"
   },
   "devDependencies": {
-    "vitest": "^1.0.0",
-    "@vitest/ui": "^1.0.0",
     "@vitest/coverage-istanbul": "^1.0.0",
     "@vitest/coverage-v8": "^1.0.0",
+    "@vitest/ui": "^1.0.0",
     "dotenv": "^16.3.1",
     "eslint": "^8.54.0",
     "nock": "^13.4.0",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.2",
+    "vitest": "^1.0.0"
   },
   "keywords": [
     "base44",

package.json

@@ -1,4 +1,6 @@
 import axios from "axios";
+import { isInIFrame } from "./common";
+import { v4 as uuidv4 } from "uuid";
 
 export class Base44Error extends Error {
   status: number;
@@ -121,13 +123,57 @@ export function createAxiosClient({
     if (typeof window !== "undefined") {
       config.headers.set("X-Origin-URL", window.location.href);
     }
+
+    if (isInIFrame) {
+      const requestId = uuidv4();
+      try {
+        window.parent.postMessage(
+          {
+            type: "api-request-start",
+            requestId,
+            data: {
+              url: baseURL + config.url,
+              method: config.method,
+              body:
+                config.data instanceof FormData
+                  ? "[FormData object]"
+                  : config.data,
+            },
+          },
+          "*"
+        );
+      } catch {
+        /* skip the logging */
+      }
+    }
     return config;
   });
 
   // Handle responses
   if (interceptResponses) {
     client.interceptors.response.use(
-      (response) => response.data,
+      (response) => {
+        const requestId = (response.config as any)?.requestId;
+        try {
+          if (isInIFrame && requestId) {
+            window.parent.postMessage(
+              {
+                type: "api-request-end",
+                requestId,
+                data: {
+                  statusCode: response.status,
+                  response: response.data,
+                },
+              },
+              "*"
+            );
+          }
+        } catch {
+          /* do nothing */
+        }
+
+        return response.data;
+      },
       (error) => {
         const message =
           error.response?.data?.message ||

src/utils/axios-client.ts

@@ -0,0 +1,2 @@
+export const isNode = typeof window === "undefined";
+export const isInIFrame = !isNode && window.self !== window.top;