test-proxy-recorder 0.3.0 → 0.3.2

package/dist/index.mjs

@@ -4,7 +4,7 @@ import https from 'https';
 import httpProxy from 'http-proxy';
 import { WebSocket, WebSocketServer } from 'ws';
 import crypto from 'crypto';
-import path from 'path';
+import path2 from 'path';
 import filenamify2 from 'filenamify';
 
 // src/constants.ts
@@ -41,20 +41,30 @@ function getRecordingPath(recordingsDir, id) {
     maxLength: 255
     // Set explicit max to prevent filenamify's default truncation
   });
-  return path.join(recordingsDir, `${sanitizedId}${EXTENSION}`);
+  return path2.join(recordingsDir, `${sanitizedId}${EXTENSION}`);
 }
 async function loadRecordingSession(filePath) {
   const fileContent = await fs.readFile(filePath, "utf8");
   return JSON.parse(fileContent);
 }
 function processRecordings(recordings) {
-  const keySequenceMap = /* @__PURE__ */ new Map();
-  return recordings.map((recording) => {
+  const recordingsByKey = /* @__PURE__ */ new Map();
+  for (const recording of recordings) {
     const key = recording.key;
-    const currentSeq = keySequenceMap.get(key) || 0;
-    keySequenceMap.set(key, currentSeq + 1);
-    return { ...recording, sequence: currentSeq };
-  });
+    if (!recordingsByKey.has(key)) {
+      recordingsByKey.set(key, []);
+    }
+    recordingsByKey.get(key).push(recording);
+  }
+  const processedRecordings = [];
+  for (const [_key, keyRecordings] of recordingsByKey) {
+    keyRecordings.sort((a, b) => a.recordingId - b.recordingId);
+    keyRecordings.forEach((recording, index) => {
+      processedRecordings.push({ ...recording, sequence: index });
+    });
+  }
+  processedRecordings.sort((a, b) => a.recordingId - b.recordingId);
+  return processedRecordings;
 }
 async function saveRecordingSession(recordingsDir, session) {
   const filePath = getRecordingPath(recordingsDir, session.id);
@@ -72,16 +82,19 @@ async function saveRecordingSession(recordingsDir, session) {
     `Saved ${processedRecordings.length} HTTP recordings and ${session.websocketRecordings?.length || 0} WebSocket recordings to ${filePath}`
   );
 }
-function getReqID(req) {
-  const urlParts = req.url.split("?");
-  const pathname = urlParts[0];
-  const query = urlParts[1] || "";
+function generateRecordingKey(pathname, query, method) {
   const pathPart = pathname === "/" ? "root" : pathname.slice(1);
   const normalizedPath = filenamify2(pathPart, { replacement: "_" });
   const queryHash = generateQueryHash(query);
-  const filename = `${req.method}_${normalizedPath}${queryHash}.json`;
+  const filename = `${method}_${normalizedPath}${queryHash}.json`;
   return filenamify2(filename, { replacement: "_" });
 }
+function getReqID(req) {
+  const urlParts = req.url.split("?");
+  const pathname = urlParts[0];
+  const query = urlParts[1] || "";
+  return generateRecordingKey(pathname, query, req.method);
+}
 function generateQueryHash(query) {
   if (!query) {
     return "";
@@ -117,19 +130,25 @@ var ProxyServer = class {
   recordingsDir;
   recordingIdCounter;
   // Unique ID for each recording entry
+  sequenceCounterByKey;
+  // Sequence counter per key (endpoint)
   replaySessions;
   // Track multiple concurrent replay sessions by recording ID
+  recordingPromises;
+  // Stack of promises that resolve to completed recordings
   constructor(targets, recordingsDir) {
     this.targets = targets;
     this.currentTargetIndex = 0;
     this.mode = Modes.transparent;
     this.recordingId = null;
     this.recordingIdCounter = 0;
+    this.sequenceCounterByKey = /* @__PURE__ */ new Map();
     this.replayId = null;
     this.modeTimeout = null;
     this.currentSession = null;
     this.recordingsDir = recordingsDir;
     this.replaySessions = /* @__PURE__ */ new Map();
+    this.recordingPromises = [];
     this.proxy = httpProxy.createProxyServer({
       secure: false,
       changeOrigin: true,
@@ -155,7 +174,7 @@ var ProxyServer = class {
   }
   setupProxyEventHandlers() {
     this.proxy.on("error", this.handleProxyError.bind(this));
-    this.proxy.on("proxyRes", this.handleProxyResponse.bind(this));
+    this.proxy.on("proxyRes", this.addCorsHeaders.bind(this));
   }
   handleProxyError(err, req, res) {
     console.error("Proxy error:", err);
@@ -171,12 +190,6 @@ var ProxyServer = class {
     }
     res.end(JSON.stringify({ error: "Proxy error", message: err.message }));
   }
-  handleProxyResponse(proxyRes, req) {
-    this.addCorsHeaders(proxyRes, req);
-    if (this.mode === Modes.record && this.recordingId) {
-      this.recordResponse(req, proxyRes);
-    }
-  }
   /**
    * Get CORS headers for a given request
    * @param req The incoming HTTP request
@@ -234,7 +247,15 @@ var ProxyServer = class {
    * @returns The recording ID, or null if not found
    */
   getRecordingIdFromRequest(req) {
-    return this.getRecordingIdFromHeader(req) || this.getRecordingIdFromCookie(req);
+    const fromHeader = this.getRecordingIdFromHeader(req);
+    const fromCookie = this.getRecordingIdFromCookie(req);
+    if (fromHeader) {
+      return fromHeader;
+    }
+    if (fromCookie) {
+      return fromCookie;
+    }
+    return null;
   }
   /**
    * Get or create a replay session state for a given recording ID
@@ -259,6 +280,27 @@ var ProxyServer = class {
     }
     return session;
   }
+  /**
+   * Clean up a session - removes it from memory and resets counters
+   * @param sessionId The session ID to clean up
+   */
+  async cleanupSession(sessionId) {
+    if (this.replaySessions.has(sessionId)) {
+      console.log(`[CLEANUP] Removing replay session: ${sessionId}`);
+      this.replaySessions.delete(sessionId);
+    }
+    if (this.recordingId === sessionId) {
+      console.log(`[CLEANUP] Saving and clearing active recording session: ${sessionId}`);
+      await this.saveCurrentSession();
+      this.currentSession = null;
+      this.recordingId = null;
+    }
+    if (this.replayId === sessionId) {
+      console.log(`[CLEANUP] Clearing active replay session: ${sessionId}`);
+      this.replayId = null;
+    }
+    console.log(`[CLEANUP] Session ${sessionId} cleaned up successfully`);
+  }
   parseGetParams(req) {
     const url = new URL(req.url || "", `http://${req.headers.host}`);
     const mode = url.searchParams.get("mode");
@@ -270,19 +312,41 @@ var ProxyServer = class {
     }
     return { mode, id, timeout };
   }
+  async parseControlRequest(req) {
+    if (req.method === "GET") {
+      return this.parseGetParams(req);
+    }
+    if (req.method === "POST") {
+      const body = await readRequestBody(req);
+      console.log(`MODE CHANGE (${req.method})`, body);
+      return JSON.parse(body);
+    }
+    throw new Error("Unsupported control method");
+  }
   async handleControlRequest(req, res) {
+    if (req.method === "GET") {
+      sendJsonResponse(res, HTTP_STATUS_OK, {
+        recordingsDir: this.recordingsDir,
+        mode: this.mode,
+        id: this.recordingId || this.replayId
+      });
+      return;
+    }
     try {
-      let data;
-      if (req.method === "GET") {
-        data = this.parseGetParams(req);
-      } else if (req.method === "POST") {
-        const body = await readRequestBody(req);
-        console.log(`MODE CHANGE (${req.method})`, body);
-        data = JSON.parse(body);
-      } else {
+      const data = await this.parseControlRequest(req);
+      const { mode, id, timeout: requestTimeout, cleanup } = data;
+      if (cleanup && id) {
+        await this.cleanupSession(id);
+        sendJsonResponse(res, HTTP_STATUS_OK, {
+          success: true,
+          message: `Session ${id} cleaned up`,
+          mode: this.mode
+        });
         return;
       }
-      const { mode, id, timeout: requestTimeout } = data;
+      if (!mode) {
+        throw new Error("Mode parameter is required when cleanup is not specified");
+      }
       const timeout = requestTimeout ?? DEFAULT_TIMEOUT_MS;
       this.clearModeTimeout();
       await this.switchMode(mode, id);
@@ -298,7 +362,8 @@ var ProxyServer = class {
         success: true,
         mode: this.mode,
         id: this.recordingId || this.replayId,
-        timeout
+        timeout,
+        recordingsDir: this.recordingsDir
       });
     } catch (error) {
       console.error("Control request error:", error);
@@ -314,7 +379,7 @@ var ProxyServer = class {
   async switchMode(mode, id) {
     console.log(`Switching to ${mode.toUpperCase()} mode`);
     if (this.currentSession && this.mode === Modes.record) {
-      await this.saveCurrentSession(true);
+      await this.saveCurrentSession();
       console.log("Session saved, continuing with mode switch");
     }
     switch (mode) {
@@ -354,6 +419,8 @@ var ProxyServer = class {
     this.recordingId = id;
     this.replayId = null;
     this.currentSession = { id, recordings: [], websocketRecordings: [] };
+    this.recordingIdCounter = 0;
+    this.sequenceCounterByKey.clear();
     console.log(`Switched to record mode with ID: ${id}`);
   }
   async switchToReplayMode(id) {
@@ -371,171 +438,119 @@ var ProxyServer = class {
     console.log(`Switched to replay mode with ID: ${id}`);
   }
   setupModeTimeout(timeout) {
+    clearTimeout(this.modeTimeout || 0);
     this.modeTimeout = setTimeout(async () => {
       console.log("Timeout reached, switching back to transparent mode");
-      await this.saveCurrentSession(true);
+      await this.saveCurrentSession();
       this.switchToTransparentMode();
       this.modeTimeout = null;
     }, timeout);
   }
-  async saveCurrentSession(filterIncomplete = false) {
-    if (!this.currentSession) {
+  async flushPendingRecordings() {
+    if (this.recordingPromises.length === 0) {
       return;
     }
-    if (filterIncomplete) {
-      const incompleteCount = this.currentSession.recordings.filter(
-        (r) => !r.response
-      ).length;
-      if (incompleteCount > 0) {
-        this.currentSession.recordings = this.currentSession.recordings.filter(
-          (r) => r.response
-        );
+    const results = await Promise.allSettled(this.recordingPromises);
+    if (this.currentSession) {
+      for (const result of results) {
+        if (result.status === "fulfilled" && result.value) {
+          this.currentSession.recordings.push(result.value);
+        }
       }
+      console.log(
+        `Flushed ${results.length} recordings to session (total: ${this.currentSession.recordings.length})`
+      );
     }
-    console.log(
-      `Saving session with ${this.currentSession.recordings.length} HTTP and ${this.currentSession.websocketRecordings.length} WebSocket recordings`
-    );
-    await saveRecordingSession(this.recordingsDir, this.currentSession);
+    this.recordingPromises = [];
   }
-  saveRequestRecordSync(req, body) {
+  async saveCurrentSession() {
     if (!this.currentSession) {
       return;
     }
-    const key = getReqID(req);
-    const recordingId = this.recordingIdCounter++;
-    req.__recordingId = recordingId;
-    const record = {
-      request: {
-        method: req.method,
-        url: req.url,
-        headers: req.headers,
-        body: body || null
-      },
-      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      key,
-      recordingId
-    };
-    this.currentSession.recordings.push(record);
+    await this.flushPendingRecordings();
     console.log(
-      // eslint-disable-next-line sonarjs/no-nested-template-literals
-      `saveRequestRecordSync: Saved ${req.method} ${req.url} (key: ${key}, recordingId: ${recordingId}, body: ${body ? `${body.length} chars` : "null"}, total: ${this.currentSession.recordings.length}, sessionId: ${this.currentSession.id})`
+      `Saving session with ${this.currentSession.recordings.length} HTTP and ${this.currentSession.websocketRecordings.length} WebSocket recordings`
     );
+    await saveRecordingSession(this.recordingsDir, this.currentSession);
   }
-  updateRequestBodySync(req, body) {
-    if (!this.currentSession) {
-      return;
+  getRecordingIdOrError(req, res) {
+    const recordingIdFromRequest = this.getRecordingIdFromRequest(req);
+    if (recordingIdFromRequest) {
+      return recordingIdFromRequest;
     }
-    const recordingId = req.__recordingId;
-    if (recordingId === void 0) {
-      console.error(
-        `updateRequestBodySync: No recording ID found on request ${req.method} ${req.url}`
+    if (this.replaySessions.size > 1) {
+      console.warn(
+        `[CONCURRENT REPLAY WARNING] Request to ${req.method} ${req.url} is missing ${RECORDING_ID_HEADER} header/cookie. Active sessions: ${[...this.replaySessions.keys()].join(", ")}. this.replayId fallback would be: ${this.replayId} (NOT USING - could be wrong session)`
       );
-      return;
-    }
-    const record = this.currentSession.recordings.find(
-      (r) => r.recordingId === recordingId
-    );
-    if (!record) {
-      console.error(
-        `updateRequestBodySync: Could not find recording with ID ${recordingId} for ${req.method} ${req.url}`
+      const corsHeaders = this.getCorsHeaders(req);
+      res.writeHead(HTTP_STATUS_BAD_REQUEST, {
+        "Content-Type": "application/json",
+        ...corsHeaders
+      });
+      res.end(
+        JSON.stringify({
+          error: "Missing recording ID in concurrent replay mode. Ensure x-test-rcrd-id header is set.",
+          activeSessions: [...this.replaySessions.keys()],
+          hint: "This usually means page.setExtraHTTPHeaders() did not apply to this request type"
+        })
       );
-      return;
+      return null;
+    }
+    const recordingId = this.replayId;
+    if (!recordingId) {
+      const corsHeaders = this.getCorsHeaders(req);
+      res.writeHead(HTTP_STATUS_BAD_REQUEST, {
+        "Content-Type": "application/json",
+        ...corsHeaders
+      });
+      res.end(JSON.stringify({ error: "No replay session active" }));
+      return null;
     }
-    record.request.body = body || null;
     console.log(
-      `updateRequestBodySync: Updated body for ${req.method} ${req.url} (${body.length} chars, recordingId: ${recordingId})`
+      `[FALLBACK] Using replayId fallback for ${req.method} ${req.url} -> session: ${recordingId} (single session mode)`
     );
+    return recordingId;
   }
-  async recordResponse(req, proxyRes) {
-    if (!this.currentSession) {
-      return;
+  async ensureSessionLoaded(recordingId, filePath) {
+    const sessionState = this.getOrCreateReplaySession(recordingId);
+    if (!sessionState.loadedSession) {
+      sessionState.loadedSession = await loadRecordingSession(filePath);
+      console.log(`[REPLAY] Loaded recording session: ${recordingId}`);
     }
-    const recordingId = req.__recordingId;
-    if (recordingId === void 0) {
-      console.error(
-        `recordResponse: No recording ID found on request ${req.method} ${req.url}`
-      );
-      return;
-    }
-    const record = this.currentSession.recordings.find(
-      (r) => r.recordingId === recordingId
-    );
-    if (!record) {
-      console.error(
-        `recordResponse: Could not find recording with ID ${recordingId} for ${req.method} ${req.url}`
-      );
-      return;
-    }
-    const chunks = [];
-    proxyRes.on("data", (chunk) => {
-      chunks.push(chunk);
-    });
-    proxyRes.on("end", async () => {
-      const body = Buffer.concat(chunks).toString("utf8");
-      record.response = {
-        statusCode: proxyRes.statusCode,
-        headers: proxyRes.headers,
-        body: body || null
-      };
-      console.log(
-        `Recorded: ${req.method} ${req.url} (recordingId: ${recordingId})`
-      );
-    });
+    return sessionState;
   }
-  async recordResponseData(req, proxyRes, body) {
-    if (!this.currentSession) {
-      return false;
+  getServedTracker(sessionState, key) {
+    if (!sessionState.servedRecordingIdsByKey.has(key)) {
+      sessionState.servedRecordingIdsByKey.set(key, /* @__PURE__ */ new Set());
     }
-    const recordingId = req.__recordingId;
-    if (recordingId === void 0) {
-      console.error(
-        `recordResponseData: No recording ID found on request ${req.method} ${req.url}`
-      );
-      return false;
+    return sessionState.servedRecordingIdsByKey.get(key);
+  }
+  selectReplayRecord(recordsWithKey, servedForThisKey, key, recordingId) {
+    for (const rec of recordsWithKey) {
+      if (!servedForThisKey.has(rec.recordingId)) {
+        return rec;
+      }
     }
-    const record = this.currentSession.recordings.find(
-      (r) => r.recordingId === recordingId
-    );
-    if (!record) {
-      console.error(
-        `recordResponseData: Could not find recording with ID ${recordingId} for ${req.method} ${req.url}`
+    if (recordsWithKey.length > 0) {
+      console.log(
+        `[REPLAY WARNING] All ${recordsWithKey.length} recordings already served for ${key} (session: ${recordingId}), reusing last one`
       );
-      return false;
+      return recordsWithKey[recordsWithKey.length - 1];
     }
-    record.response = {
-      statusCode: proxyRes.statusCode,
-      headers: proxyRes.headers,
-      body: body || null
-    };
-    console.log(
-      `recordResponseData: Recorded response for ${req.method} ${req.url} (recordingId: ${recordingId})`
-    );
-    return true;
+    return null;
   }
   async handleReplayRequest(req, res) {
-    const recordingId = this.getRecordingIdFromRequest(req) || this.replayId;
-    if (!recordingId) {
-      const corsHeaders = this.getCorsHeaders(req);
-      res.writeHead(HTTP_STATUS_BAD_REQUEST, {
-        "Content-Type": "application/json",
-        ...corsHeaders
-      });
-      res.end(JSON.stringify({ error: "No replay session active" }));
-      return;
-    }
+    const recordingId = this.getRecordingIdOrError(req, res);
+    if (!recordingId) return;
     const key = getReqID(req);
     const filePath = getRecordingPath(this.recordingsDir, recordingId);
     try {
-      const sessionState = this.getOrCreateReplaySession(recordingId);
-      if (!sessionState.loadedSession) {
-        sessionState.loadedSession = await loadRecordingSession(filePath);
-        console.log(`[REPLAY] Loaded recording session: ${recordingId}`);
-      }
+      const sessionState = await this.ensureSessionLoaded(
+        recordingId,
+        filePath
+      );
       const session = sessionState.loadedSession;
-      if (!sessionState.servedRecordingIdsByKey.has(key)) {
-        sessionState.servedRecordingIdsByKey.set(key, /* @__PURE__ */ new Set());
-      }
-      const servedForThisKey = sessionState.servedRecordingIdsByKey.get(key);
+      const servedForThisKey = this.getServedTracker(sessionState, key);
       const host = req.headers.host || "unknown";
       const recordsWithKey = session.recordings.filter((r) => r.key === key && r.response).toSorted((a, b) => {
         const aSeq = a.sequence !== void 0 ? a.sequence : a.recordingId;
@@ -564,30 +579,23 @@ var ProxyServer = class {
       }
       const requestCount = servedForThisKey.size + 1;
       console.log(
-        `[replay request #${requestCount}] ${req.method} ${req.url} (session: ${recordingId}, total: ${recordsWithKey.length}, served: ${servedForThisKey.size})`
+        `[replay request #${requestCount}] ${req.method} ${req.url} (key: ${key}, session: ${recordingId}, total: ${recordsWithKey.length}, served: ${servedForThisKey.size})`
       );
-      let record;
-      for (const rec of recordsWithKey) {
-        if (!servedForThisKey.has(rec.recordingId)) {
-          record = rec;
-          break;
-        }
-      }
-      if (!record) {
-        console.log(
-          `[REPLAY WARNING] All ${recordsWithKey.length} recordings already served for ${key} (session: ${recordingId}), reusing last one`
+      const record = this.selectReplayRecord(
+        recordsWithKey,
+        servedForThisKey,
+        key,
+        recordingId
+      );
+      if (!record || !record.response) {
+        throw new Error(
+          `No response recorded for this request: ${req.method} ${host}${req.url}`
         );
-        record = recordsWithKey[recordsWithKey.length - 1];
       }
       servedForThisKey.add(record.recordingId);
       console.log(
         `[replay serving] recordingId: ${record.recordingId}, session: ${recordingId}, body_len: ${record.response?.body?.length || 0}`
       );
-      if (!record.response) {
-        throw new Error(
-          `No response recorded for this request: ${req.method} ${host}${req.url}`
-        );
-      }
       const { statusCode, headers, body } = record.response;
       const responseHeaders = {
         ...headers,
@@ -642,82 +650,124 @@ var ProxyServer = class {
     const target = this.getTarget();
     console.log(`[${this.mode}] ${req.method} ${req.url} -> ${target}`);
     if (this.mode === Modes.record) {
-      this.saveRequestRecordSync(req, null);
-      await this.bufferAndProxyRequest(req, res, target);
+      await this.recordAndProxyRequest(req, res, target);
     } else {
       this.proxy.web(req, res, { target });
     }
   }
-  // TODO: check if can handle streaming requests
-  async bufferAndProxyRequest(req, res, target) {
-    const chunks = [];
-    req.on("data", (chunk) => {
-      chunks.push(chunk);
-    });
-    try {
-      await new Promise((resolve, reject) => {
-        req.on("end", () => resolve());
-        req.on("error", (err) => reject(err));
-        setTimeout(
-          () => reject(new Error("Request buffering timeout")),
-          3e4
-        );
-      });
-    } catch (error) {
-      console.error("Error buffering request:", error);
+  // Note: streaming requests are buffered before proxying; streaming passthrough is not yet implemented
+  async recordAndProxyRequest(req, res, target) {
+    if (!this.currentSession) {
+      return;
     }
-    const body = Buffer.concat(chunks).toString("utf8");
-    this.updateRequestBodySync(req, body);
-    const targetUrl = new URL(target);
-    const isHttps = targetUrl.protocol === "https:";
-    const requestModule = isHttps ? https : http;
-    const defaultPort = isHttps ? 443 : 80;
-    const proxyReq = requestModule.request(
-      {
-        hostname: targetUrl.hostname,
-        port: targetUrl.port || defaultPort,
-        path: req.url,
-        method: req.method,
-        headers: req.headers
-      },
-      (proxyRes) => {
-        this.addCorsHeaders(proxyRes, req);
-        const responseChunks = [];
-        proxyRes.on("data", (chunk) => {
-          responseChunks.push(chunk);
-        });
-        proxyRes.on("end", async () => {
-          const responseBody = Buffer.concat(responseChunks);
-          const recorded = await this.recordResponseData(
-            req,
-            proxyRes,
-            responseBody.toString("utf8")
-          );
-          const responseHeaders = {
-            ...proxyRes.headers,
-            ...this.getCorsHeaders(req)
-          };
-          res.writeHead(proxyRes.statusCode || 200, responseHeaders);
-          res.end(responseBody);
-          if (recorded) {
-            console.log(`Recorded: ${req.method} ${req.url}`);
+    const key = getReqID(req);
+    const recordingId = this.recordingIdCounter++;
+    const sequence = this.sequenceCounterByKey.get(key) || 0;
+    this.sequenceCounterByKey.set(key, sequence + 1);
+    const recordingPromise = new Promise((resolve) => {
+      (async () => {
+        try {
+          const chunks = [];
+          req.on("data", (chunk) => {
+            chunks.push(chunk);
+          });
+          try {
+            await new Promise((resolveBuffer, rejectBuffer) => {
+              req.on("end", () => resolveBuffer());
+              req.on("error", (err) => rejectBuffer(err));
+              setTimeout(
+                () => rejectBuffer(new Error("Request buffering timeout")),
+                3e4
+              );
+            });
+          } catch (error) {
+            console.error("Error buffering request:", error);
           }
-        });
-        proxyRes.on("error", (err) => {
-          console.error("Proxy response error:", err);
-          if (!res.headersSent) {
+          const requestBody = Buffer.concat(chunks).toString("utf8");
+          const targetUrl = new URL(target);
+          const isHttps = targetUrl.protocol === "https:";
+          const requestModule = isHttps ? https : http;
+          const defaultPort = isHttps ? 443 : 80;
+          const proxyReq = requestModule.request(
+            {
+              hostname: targetUrl.hostname,
+              port: targetUrl.port || defaultPort,
+              path: req.url,
+              method: req.method,
+              headers: req.headers
+            },
+            (proxyRes) => {
+              this.addCorsHeaders(proxyRes, req);
+              const responseChunks = [];
+              proxyRes.on("data", (chunk) => {
+                responseChunks.push(chunk);
+              });
+              proxyRes.on("end", async () => {
+                try {
+                  const responseBody = Buffer.concat(responseChunks);
+                  const responseBodyStr = responseBody.toString("utf8");
+                  const recording = {
+                    request: {
+                      method: req.method,
+                      url: req.url,
+                      headers: req.headers,
+                      body: requestBody || null
+                    },
+                    response: {
+                      statusCode: proxyRes.statusCode,
+                      headers: proxyRes.headers,
+                      body: responseBodyStr || null
+                    },
+                    timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+                    key,
+                    recordingId,
+                    sequence
+                  };
+                  const responseHeaders = {
+                    ...proxyRes.headers,
+                    ...this.getCorsHeaders(req)
+                  };
+                  res.writeHead(proxyRes.statusCode || 200, responseHeaders);
+                  res.end(responseBody);
+                  console.log(
+                    `Recorded: ${req.method} ${req.url} (recordingId: ${recordingId}, sequence: ${sequence})`
+                  );
+                  resolve(recording);
+                } catch (error) {
+                  console.error("Error completing recording:", error);
+                  resolve(null);
+                }
+              });
+              proxyRes.on("error", (err) => {
+                console.error("Proxy response error:", err);
+                if (!res.headersSent) {
+                  this.handleProxyError(err, req, res);
+                }
+                resolve(null);
+              });
+            }
+          );
+          proxyReq.on("error", (err) => {
             this.handleProxyError(err, req, res);
+            resolve(null);
+          });
+          if (chunks.length > 0) {
+            proxyReq.write(Buffer.concat(chunks));
           }
-        });
-      }
-    );
-    proxyReq.on("error", (err) => {
-      this.handleProxyError(err, req, res);
+          proxyReq.end();
+        } catch (error) {
+          console.error("Error in recordAndProxyRequest:", error);
+          try {
+            this.handleProxyError(error, req, res);
+          } catch (error_) {
+            console.error("Failed to handle proxy error:", error_);
+          }
+          resolve(null);
+        }
+      })();
     });
-    if (chunks.length > 0) {
-      proxyReq.write(Buffer.concat(chunks));
-    }
-    proxyReq.end();
+    this.recordingPromises.push(recordingPromise);
+    await recordingPromise;
   }
   handleUpgrade(req, socket, head) {
     if (this.mode === Modes.replay) {
@@ -882,8 +932,6 @@ var ProxyServer = class {
     );
   }
 };
-
-// src/playwright/index.ts
 function getProxyPort() {
   const envPort = process.env.TEST_PROXY_RECORDER_PORT;
   if (envPort) {
@@ -919,6 +967,30 @@ async function setProxyMode(mode, sessionId, timeout) {
     throw error;
   }
 }
+async function cleanupSession(sessionId) {
+  const proxyPort = getProxyPort();
+  try {
+    const body = {
+      cleanup: true,
+      id: sessionId
+    };
+    const response = await fetch(`http://127.0.0.1:${proxyPort}/__control`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body)
+    });
+    if (!response.ok) {
+      const text = await response.text();
+      console.error(`Failed to cleanup session ${sessionId}:`, text);
+      throw new Error(`Failed to cleanup session: ${text}`);
+    }
+    await response.json();
+    console.log(`Session cleaned up: ${sessionId}`);
+  } catch (error) {
+    console.error(`Error cleaning up session:`, error);
+    throw error;
+  }
+}
 function parseSpecFilePath(specPath) {
   const folderMatch = specPath.match(/^(.+?)\/([^/]+)\.(spec|test)\.ts$/);
   if (folderMatch) {
@@ -960,6 +1032,53 @@ async function stopProxy(testInfo) {
   const sessionId = generateSessionId(testInfo);
   await setProxyMode(Modes.transparent, sessionId);
 }
+var cachedRecordingsDir = null;
+async function getRecordingsDir() {
+  if (cachedRecordingsDir) {
+    return cachedRecordingsDir;
+  }
+  const proxyPort = getProxyPort();
+  try {
+    const response = await fetch(`http://127.0.0.1:${proxyPort}/__control`);
+    if (response.ok) {
+      const data = await response.json();
+      if (data.recordingsDir) {
+        cachedRecordingsDir = data.recordingsDir;
+        return cachedRecordingsDir;
+      }
+    }
+  } catch (error) {
+    console.warn(
+      "Failed to get recordings directory from proxy, using default:",
+      error
+    );
+  }
+  cachedRecordingsDir = path2.join(process.cwd(), "e2e", "recordings");
+  return cachedRecordingsDir;
+}
+async function setupClientSideRecording(page, sessionId, mode, url) {
+  const harFileName = sessionId.replaceAll("/", "__");
+  const recordingsDir = await getRecordingsDir();
+  const harPath = path2.join(recordingsDir, `${harFileName}.har`);
+  console.log(
+    `[Client-Side Recording] Setting up HAR for session: ${sessionId}, mode: ${mode}, path: ${harPath}`
+  );
+  try {
+    await page.routeFromHAR(harPath, {
+      url,
+      update: mode === Modes.record,
+      updateContent: "embed"
+    });
+  } catch (error) {
+    if (mode === Modes.replay) {
+      console.error(
+        `[Client-Side Replay] Failed to load HAR file. Run tests in record mode first.`,
+        error
+      );
+      throw error;
+    }
+  }
+}
 var playwrightProxy = {
   /**
    * Setup before test - sets the proxy mode and configures page with custom header
@@ -967,24 +1086,84 @@ var playwrightProxy = {
    * @param page - Playwright page object
    * @param testInfo - Playwright test info object
    * @param mode - The proxy mode to use for this test
-   * @param timeout - Optional timeout in milliseconds
+   * @param options - Optional configuration including timeout and client-side recording patterns
    */
-  async before(page, testInfo, mode, timeout) {
+  async before(page, testInfo, mode, options) {
+    const timeout = typeof options === "number" ? options : options?.timeout;
+    const clientSideOptions = typeof options === "object" && options !== null ? options : void 0;
     const sessionId = generateSessionId(testInfo);
     await page.setExtraHTTPHeaders({
       [RECORDING_ID_HEADER]: sessionId
     });
+    console.log(`[Setup] Setting proxy mode: ${mode}, session: ${sessionId}`);
     await setProxyMode(mode, sessionId, timeout);
-    page.on("close", async () => {
-      try {
-        await setProxyMode(Modes.replay, sessionId);
-        console.log(
-          `[Cleanup] Switched to transparent mode for session: ${sessionId}`
-        );
-      } catch (error) {
-        console.error("[Cleanup] Error during page close cleanup:", error);
-      }
-    });
+    console.log(`[Setup] Proxy mode set successfully`);
+    if (clientSideOptions?.url) {
+      console.log(`[Setup] Setting up client-side recording with pattern: ${clientSideOptions.url}`);
+      await setupClientSideRecording(
+        page,
+        sessionId,
+        mode,
+        clientSideOptions.url
+      );
+      console.log(`[Setup] Client-side recording setup complete`);
+    }
+    const proxyPort = process.env.TEST_PROXY_RECORDER_PORT || "8100";
+    const proxyUrl = `localhost:${proxyPort}`;
+    console.log(`[Setup] Registering proxy route handler for: ${proxyUrl}`);
+    await page.route(
+      (url) => {
+        const urlStr = url.toString();
+        const matches = urlStr.includes(proxyUrl);
+        if (matches) {
+          console.log(`[Route Matcher] Matched proxy request: ${urlStr}`);
+        }
+        return matches;
+      },
+      async (route) => {
+        try {
+          const url = route.request().url();
+          const method = route.request().method();
+          const headers = route.request().headers();
+          const hadHeader = !!headers[RECORDING_ID_HEADER];
+          headers[RECORDING_ID_HEADER] = sessionId;
+          console.log(
+            `[Route Intercept] ${method} ${url} (had header: ${hadHeader}, adding session: ${sessionId})`
+          );
+          await route.continue({ headers });
+        } catch (error) {
+          console.error(
+            `[Route Handler Error] Failed to add ${RECORDING_ID_HEADER} header:`,
+            error
+          );
+          await route.fallback();
+        }
+      },
+      { times: Infinity }
+      // Ensure the handler applies to all matching requests
+    );
+    console.log(`[Setup] Proxy route handler registered`);
+    const context = page.context();
+    const contextId = context._guid || "default";
+    const handlerKey = `cleanup_${contextId}`;
+    if (!globalThis[handlerKey]) {
+      globalThis[handlerKey] = true;
+      context.on("close", async () => {
+        try {
+          console.log(
+            `[Cleanup] Browser context closed, cleaning up session: ${sessionId}`
+          );
+          await cleanupSession(sessionId);
+        } catch (error) {
+          console.warn(
+            `[Cleanup] Failed to cleanup session ${sessionId}:`,
+            error
+          );
+        } finally {
+          delete globalThis[handlerKey];
+        }
+      });
+    }
   },
   /**
    * Global teardown - switches proxy to transparent mode