browser-debugger-cli 0.7.1 → 0.8.0

package/dist/telemetry/network.js

@@ -1,9 +1,12 @@
 import { CDPHandlerRegistry } from '../connection/handlers.js';
 import { TypedCDPConnection } from '../connection/typed-cdp.js';
-import { MAX_NETWORK_REQUESTS, STALE_REQUEST_TIMEOUT, STALE_REQUEST_CLEANUP_INTERVAL, MAX_RESPONSE_SIZE, CHROME_NETWORK_BUFFER_TOTAL, CHROME_NETWORK_BUFFER_PER_RESOURCE, CHROME_POST_DATA_LIMIT, } from '../constants.js';
+import { MAX_NETWORK_REQUESTS, MAX_RESPONSE_SIZE, CHROME_NETWORK_BUFFER_TOTAL, CHROME_NETWORK_BUFFER_PER_RESOURCE, CHROME_POST_DATA_LIMIT, } from '../constants.js';
+import { attachChildTargets } from './attachedTargets.js';
 import { createLogger } from '../ui/logging/index.js';
 import { getErrorMessage } from '../utils/errors.js';
+import { filterDefined } from '../utils/objects.js';
 import { shouldExcludeDomain, shouldExcludeUrl, shouldFetchBodyWithReason } from './filters.js';
+import { ExtraInfoTracker } from './networkExtraInfo.js';
 const log = createLogger('network');
 /**
  * Check if a request should be filtered out based on domain and URL patterns.
@@ -25,17 +28,19 @@ function shouldFilterRequest(url, includeAll, networkInclude, networkExclude) {
  * @param request - Network request object to populate with body
  * @param pendingFetches - Set to track pending fetch operations for cleanup
  */
-function fetchResponseBody(cdp, requestId, request, pendingFetches) {
+function fetchResponseBody(cdp, requestId, request, pendingFetches, sessionId) {
     pendingFetches.add(requestId);
     void cdp
-        .send('Network.getResponseBody', { requestId })
+        .send('Network.getResponseBody', { requestId }, sessionId)
         .then((response) => {
         if (!pendingFetches.has(requestId))
             return;
         const typedResponse = response;
         request.responseBody = typedResponse.body;
+        if (typedResponse.base64Encoded)
+            request.responseBodyBase64 = true;
         if (typedResponse.body) {
-            request.decodedBodyLength = typedResponse.body.length;
+            request.decodedBodyLength = Buffer.byteLength(typedResponse.body, typedResponse.base64Encoded ? 'base64' : 'utf-8');
         }
     })
         .catch((error) => {
@@ -45,6 +50,22 @@ function fetchResponseBody(cdp, requestId, request, pendingFetches) {
         pendingFetches.delete(requestId);
     });
 }
+/**
+ * How long a request took. Chrome's own timestamps are used when both ends
+ * have one: measuring when bdg received the events added the event delivery
+ * delay (about 50 ms) to fast requests.
+ *
+ * @param request - The request (its `sentTime` is Chrome's start time)
+ * @param endTime - Chrome's monotonic time of the end (seconds)
+ * @param endedAt - Wall-clock end (epoch ms) when Chrome reported none
+ * @returns Duration in milliseconds
+ */
+function elapsedMs(request, endTime, endedAt = Date.now()) {
+    if (request.sentTime !== undefined && endTime !== undefined) {
+        return Math.max(0, Math.round((endTime - request.sentTime) * 1000));
+    }
+    return Math.max(0, endedAt - request.timestamp);
+}
 /**
  * Create a network request from CDP event parameters.
  */
@@ -55,34 +76,185 @@ function createNetworkRequest(params, getCurrentNavigationId) {
         url: params.request.url,
         method: params.request.method,
         timestamp: Date.now(),
+        sentTime: params.timestamp,
         requestHeaders: params.request.headers,
         ...(params.request.postData !== undefined && { requestBody: params.request.postData }),
         ...(navigationId !== undefined && { navigationId }),
         ...(params.type !== undefined && { resourceType: params.type }),
     };
 }
+const SKIPPED_BODY_PATTERN = /^\[SKIPPED: (.*)\]$/s;
 /**
- * Clean up stale requests from the request map.
+ * Placeholder stored instead of a response body that was not fetched.
  *
- * Leverages Map insertion order to iterate from oldest entries first,
- * exiting early once a non-stale request is found (O(k) where k = stale count).
+ * @param reason - Why the body was skipped
+ * @returns Placeholder text shown by `bdg details`
  */
-function cleanupStaleRequests(requestMap) {
-    const now = Date.now();
-    const staleRequests = [];
-    for (const [requestId, value] of requestMap) {
-        if (now - value.timestamp > STALE_REQUEST_TIMEOUT) {
-            staleRequests.push(requestId);
-        }
-        else {
-            break;
-        }
+export function skippedBodyPlaceholder(reason) {
+    return `[SKIPPED: ${reason}]`;
+}
+/**
+ * Extract the reason from a skipped-body placeholder.
+ *
+ * @param body - Stored response body
+ * @returns Reason if `body` is a placeholder, otherwise undefined
+ */
+export function skippedBodyReason(body) {
+    return body === undefined ? undefined : SKIPPED_BODY_PATTERN.exec(body)?.[1];
+}
+/**
+ * Copy response fields (status, headers, timing, connection) onto a request.
+ *
+ * @param request - Request to update
+ * @param response - CDP response
+ * @param resourceType - Resource type reported with the response
+ */
+function applyResponse(request, response, resourceType) {
+    const { status, mimeType, headers, timing, remoteIPAddress, connectionId } = response;
+    request.status = status;
+    if (response.statusText)
+        request.statusText = response.statusText;
+    request.mimeType = mimeType;
+    request.responseHeaders = headers;
+    if (response.fromDiskCache || response.fromPrefetchCache)
+        request.fromCache = true;
+    if (resourceType)
+        request.resourceType = resourceType;
+    if (timing) {
+        request.timing = {
+            requestTime: timing.requestTime,
+            proxyStart: timing.proxyStart,
+            proxyEnd: timing.proxyEnd,
+            dnsStart: timing.dnsStart,
+            dnsEnd: timing.dnsEnd,
+            connectStart: timing.connectStart,
+            connectEnd: timing.connectEnd,
+            sslStart: timing.sslStart,
+            sslEnd: timing.sslEnd,
+            sendStart: timing.sendStart,
+            sendEnd: timing.sendEnd,
+            receiveHeadersEnd: timing.receiveHeadersEnd,
+        };
     }
-    if (staleRequests.length > 0) {
-        log.debug(`Cleaning up ${staleRequests.length} stale network requests`);
-        for (const requestId of staleRequests) {
-            requestMap.delete(requestId);
-        }
+    if (remoteIPAddress)
+        request.serverIPAddress = remoteIPAddress;
+    if (connectionId !== undefined)
+        request.connection = String(connectionId);
+}
+/**
+ * Turn the in-flight request into a completed redirect hop.
+ *
+ * Chrome reuses the requestId for every hop of a redirect chain and reports
+ * the previous hop's 3xx response on the next `requestWillBeSent`. Each hop
+ * gets its own id (`<requestId>:redirect:<n>`) so it can be looked up and
+ * exported to HAR; the final request keeps the original id.
+ *
+ * @param request - The request that was redirected
+ * @param params - The `requestWillBeSent` event for the next hop
+ * @param redirectHops - Per-requestId hop counter
+ * @returns The completed hop
+ */
+function completeRedirectHop(request, params, redirectHops) {
+    const hop = (redirectHops.get(params.requestId) ?? 0) + 1;
+    redirectHops.set(params.requestId, hop);
+    if (params.redirectResponse) {
+        applyResponse(request, params.redirectResponse, request.resourceType);
+    }
+    request.requestId = `${params.requestId}:redirect:${hop}`;
+    request.redirectURL = params.request.url;
+    request.loadingFinishedTime = params.timestamp;
+    request.duration = elapsedMs(request, params.timestamp);
+    return request;
+}
+/**
+ * In-flight requests kept at most; beyond it the oldest is recorded as not
+ * finished. Requests are never dropped for taking long (long polls, SSE).
+ */
+const MAX_PENDING_REQUESTS = 2000;
+/** Error of a request whose document was replaced before it finished */
+const NAVIGATED_AWAY_ERROR = 'net::ERR_ABORTED (the page navigated away)';
+/** Error of a request evicted from tracking by {@link MAX_PENDING_REQUESTS} */
+const TOO_MANY_PENDING_ERROR = 'not finished (too many requests in flight to track)';
+/** Error of a request whose iframe or worker went away before it finished */
+const TARGET_GONE_ERROR = 'net::ERR_ABORTED (its frame or worker went away)';
+/**
+ * How long a request of a page that navigated away (or of a closed frame or
+ * worker) may still finish before it is recorded as cancelled: Chrome usually
+ * reports the cancellation itself, and keepalive requests may still complete.
+ */
+const ABANDONED_REQUEST_GRACE_MS = 5000;
+/**
+ * Error text of a failed request, with the CORS reason when CORS blocked it
+ * (Chrome only says `net::ERR_FAILED` otherwise).
+ *
+ * @param params - `Network.loadingFailed` event
+ * @returns Error text
+ */
+function describeLoadingError(params) {
+    const cors = params.corsErrorStatus;
+    if (!cors)
+        return params.errorText;
+    const detail = cors.failedParameter ? `: ${cors.failedParameter}` : '';
+    return `${params.errorText} (CORS ${cors.corsError}${detail})`;
+}
+/**
+ * Record a failure on a request. A request that already got a response keeps
+ * its HTTP status; one without becomes status 0.
+ *
+ * @param request - Request to update
+ * @param failure - How it failed
+ */
+function applyFailure(request, failure) {
+    request.status ??= 0;
+    request.duration = elapsedMs(request, failure.timestamp, failure.endedAt);
+    if (failure.errorText)
+        request.errorText = failure.errorText;
+    if (failure.canceled)
+        request.canceled = true;
+    if (failure.blockedReason) {
+        request.blocked = true;
+        request.blockedReason = failure.blockedReason;
+        request.errorText = `${request.errorText ?? 'net::ERR_BLOCKED'} (blocked:${failure.blockedReason})`;
+    }
+    if (failure.resourceType)
+        request.resourceType = failure.resourceType;
+}
+/**
+ * Give the main document request the navigation id of the page it loads.
+ *
+ * The request is sent before the navigation commits, so it was tagged with
+ * the previous page's id; the id is assigned once the navigation tracker has
+ * counted the new page (after the current event).
+ *
+ * @param documentsByLoader - Document requests by loader id
+ * @param loaderId - Loader of the committed main-frame navigation
+ * @param getCurrentNavigationId - Navigation counter
+ */
+function assignDocumentNavigation(documentsByLoader, loaderId, getCurrentNavigationId) {
+    const document = documentsByLoader.get(loaderId);
+    documentsByLoader.clear();
+    if (!document || !getCurrentNavigationId)
+        return;
+    setImmediate(() => {
+        document.navigationId = getCurrentNavigationId();
+    });
+}
+/**
+ * Collect network events of the page's out-of-process iframes and workers
+ * too: their requests are reported on their own sessions.
+ *
+ * @param cdp - CDP connection
+ * @returns Cleanup that stops attaching to new targets
+ */
+async function collectChildTargetNetwork(cdp) {
+    try {
+        return await attachChildTargets(cdp, async (sessionId) => {
+            await cdp.send('Network.enable', {}, sessionId);
+        });
+    }
+    catch (error) {
+        log.debug(`Iframe/worker network unavailable: ${getErrorMessage(error)}`);
+        return () => undefined;
     }
 }
 /**
@@ -107,8 +279,10 @@ function cleanupStaleRequests(requestMap) {
  */
 export async function startNetworkCollection(cdp, requests, options = {}) {
     const { includeAll = false, fetchAllBodies = false, fetchBodiesInclude = [], fetchBodiesExclude = [], networkInclude = [], networkExclude = [], maxBodySize = MAX_RESPONSE_SIZE, getCurrentNavigationId, } = options;
-    const requestMap = new Map();
+    const requestMap = options.pendingRequests ?? new Map();
     const pendingFetches = new Set();
+    const redirectHops = new Map();
+    const extraInfo = new ExtraInfoTracker((requestId) => requestMap.get(requestId)?.request);
     const registry = new CDPHandlerRegistry();
     const typed = new TypedCDPConnection(cdp);
     let bodiesFetched = 0;
@@ -124,50 +298,100 @@ export async function startNetworkCollection(cdp, requests, options = {}) {
         log.debug('Network buffer limits not supported, using default settings');
         await cdp.send('Network.enable');
     }
-    const cleanupInterval = setInterval(() => cleanupStaleRequests(requestMap), STALE_REQUEST_CLEANUP_INTERVAL);
-    registry.registerTyped(typed, 'Network.requestWillBeSent', (params) => {
+    const detachChildren = await collectChildTargetNetwork(cdp);
+    const failRequest = (requestId, failure) => {
+        const entry = requestMap.get(requestId);
+        if (!entry)
+            return;
+        if (requests.length < MAX_NETWORK_REQUESTS) {
+            applyFailure(entry.request, failure);
+            requests.push(entry.request);
+            extraInfo.complete(requestId, entry.request);
+        }
+        requestMap.delete(requestId);
+        redirectHops.delete(requestId);
+    };
+    const documentsByLoader = new Map();
+    const abandonTimers = new Set();
+    const failLater = (requestIds, errorText) => {
+        if (requestIds.length === 0)
+            return;
+        const endedAt = Date.now();
+        const timer = setTimeout(() => {
+            abandonTimers.delete(timer);
+            for (const requestId of requestIds) {
+                failRequest(requestId, { errorText, canceled: true, endedAt });
+            }
+        }, ABANDONED_REQUEST_GRACE_MS);
+        abandonTimers.add(timer);
+    };
+    registry.registerTyped(typed, 'Page.frameNavigated', ({ frame }) => {
+        const superseded = [...requestMap]
+            .filter(([, e]) => e.frameId === frame.id && e.loaderId && e.loaderId !== frame.loaderId)
+            .map(([requestId]) => requestId);
+        failLater(superseded, NAVIGATED_AWAY_ERROR);
+        if (frame.parentId === undefined) {
+            assignDocumentNavigation(documentsByLoader, frame.loaderId, getCurrentNavigationId);
+        }
+    });
+    registry.registerTyped(typed, 'Target.detachedFromTarget', ({ sessionId }) => {
+        const orphaned = [...requestMap]
+            .filter(([, entry]) => entry.sessionId === sessionId)
+            .map(([requestId]) => requestId);
+        failLater(orphaned, TARGET_GONE_ERROR);
+    });
+    registry.registerTyped(typed, 'Network.requestWillBeSent', (params, sessionId) => {
+        const previous = requestMap.get(params.requestId);
+        if (previous && params.redirectResponse) {
+            requestMap.delete(params.requestId);
+            const hop = completeRedirectHop(previous.request, params, redirectHops);
+            extraInfo.applyResponse(params.requestId, hop);
+            extraInfo.recordRedirectHop(params.requestId, hop);
+            if (requests.length < MAX_NETWORK_REQUESTS)
+                requests.push(hop);
+        }
+        if (shouldFilterRequest(params.request.url, includeAll, networkInclude, networkExclude)) {
+            return;
+        }
         if (requestMap.size >= MAX_NETWORK_REQUESTS) {
             log.debug(`Warning: Network request limit reached (${MAX_NETWORK_REQUESTS}), dropping new requests`);
             return;
         }
         const request = createNetworkRequest(params, getCurrentNavigationId);
+        extraInfo.applyRequest(params.requestId, request);
+        if (params.type === 'Document' && params.loaderId) {
+            documentsByLoader.set(params.loaderId, request);
+        }
         requestMap.set(params.requestId, {
             request,
             timestamp: Date.now(),
+            loaderId: params.loaderId,
+            ...(params.frameId && { frameId: params.frameId }),
+            ...(sessionId && { sessionId }),
         });
+        if (requestMap.size > MAX_PENDING_REQUESTS) {
+            const oldest = requestMap.keys().next().value;
+            if (oldest !== undefined)
+                failRequest(oldest, { errorText: TOO_MANY_PENDING_ERROR });
+        }
     });
     registry.registerTyped(typed, 'Network.responseReceived', (params) => {
         const entry = requestMap.get(params.requestId);
         if (!entry)
             return;
-        const { status, mimeType, headers, timing, remoteIPAddress, connectionId } = params.response;
-        entry.request.status = status;
-        entry.request.mimeType = mimeType;
-        entry.request.responseHeaders = headers;
-        entry.request.resourceType = params.type;
-        if (timing) {
-            const { requestTime, proxyStart, proxyEnd, dnsStart, dnsEnd, connectStart, connectEnd, sslStart, sslEnd, sendStart, sendEnd, receiveHeadersEnd, } = timing;
-            entry.request.timing = {
-                requestTime,
-                proxyStart,
-                proxyEnd,
-                dnsStart,
-                dnsEnd,
-                connectStart,
-                connectEnd,
-                sslStart,
-                sslEnd,
-                sendStart,
-                sendEnd,
-                receiveHeadersEnd,
-            };
-        }
-        if (remoteIPAddress) {
-            entry.request.serverIPAddress = remoteIPAddress;
-        }
-        if (connectionId !== undefined) {
-            entry.request.connection = String(connectionId);
-        }
+        applyResponse(entry.request, params.response, params.type);
+        extraInfo.applyResponse(params.requestId, entry.request);
+    });
+    registry.registerTyped(typed, 'Network.requestWillBeSentExtraInfo', (params) => {
+        extraInfo.onRequestExtraInfo(params.requestId, params.headers);
+    });
+    registry.registerTyped(typed, 'Network.responseReceivedExtraInfo', (params) => {
+        extraInfo.onResponseExtraInfo(params.requestId, params.headers, params.statusCode);
+    });
+    registry.registerTyped(typed, 'Network.requestServedFromCache', (params) => {
+        const entry = requestMap.get(params.requestId);
+        if (entry)
+            entry.request.fromCache = true;
     });
     registry.registerTyped(typed, 'Network.loadingFinished', (params) => {
         const entry = requestMap.get(params.requestId);
@@ -176,6 +400,7 @@ export async function startNetworkCollection(cdp, requests, options = {}) {
         if (requests.length >= MAX_NETWORK_REQUESTS) {
             log.debug(`Warning: Network request limit reached (${MAX_NETWORK_REQUESTS})`);
             requestMap.delete(params.requestId);
+            redirectHops.delete(params.requestId);
             return;
         }
         const request = entry.request;
@@ -183,10 +408,7 @@ export async function startNetworkCollection(cdp, requests, options = {}) {
             request.encodedDataLength = params.encodedDataLength;
         }
         request.loadingFinishedTime = params.timestamp;
-        if (shouldFilterRequest(request.url, includeAll, networkInclude, networkExclude)) {
-            requestMap.delete(params.requestId);
-            return;
-        }
+        request.duration = elapsedMs(request, params.timestamp);
         const decision = shouldFetchBodyWithReason(request.url, request.mimeType, params.encodedDataLength, {
             fetchAllBodies,
             includePatterns: fetchBodiesInclude,
@@ -195,43 +417,25 @@ export async function startNetworkCollection(cdp, requests, options = {}) {
         });
         if (decision.should) {
             bodiesFetched++;
-            fetchResponseBody(cdp, params.requestId, request, pendingFetches);
+            fetchResponseBody(cdp, params.requestId, request, pendingFetches, entry.sessionId);
         }
         else {
             bodiesSkipped++;
-            request.responseBody = `[SKIPPED: ${decision.reason}]`;
+            request.responseBody = skippedBodyPlaceholder(decision.reason ?? 'not captured');
         }
         requests.push(request);
+        extraInfo.complete(params.requestId, request);
         requestMap.delete(params.requestId);
+        redirectHops.delete(params.requestId);
     });
     registry.registerTyped(typed, 'Network.loadingFailed', (params) => {
-        const entry = requestMap.get(params.requestId);
-        if (!entry)
-            return;
-        if (requests.length >= MAX_NETWORK_REQUESTS) {
-            requestMap.delete(params.requestId);
-            return;
-        }
-        if (shouldFilterRequest(entry.request.url, includeAll, networkInclude, networkExclude)) {
-            requestMap.delete(params.requestId);
-            return;
-        }
-        entry.request.status = 0;
-        if (params.errorText) {
-            entry.request.errorText = params.errorText;
-        }
-        if (params.canceled) {
-            entry.request.canceled = true;
-        }
-        if (params.blockedReason) {
-            entry.request.blocked = true;
-            entry.request.blockedReason = params.blockedReason;
-        }
-        if (params.type) {
-            entry.request.resourceType = params.type;
-        }
-        requests.push(entry.request);
-        requestMap.delete(params.requestId);
+        failRequest(params.requestId, filterDefined({
+            timestamp: params.timestamp,
+            errorText: describeLoadingError(params),
+            canceled: params.canceled,
+            blockedReason: params.blockedReason,
+            resourceType: params.type,
+        }));
     });
     return () => {
         const totalBodyDecisions = bodiesFetched + bodiesSkipped;
@@ -242,8 +446,9 @@ export async function startNetworkCollection(cdp, requests, options = {}) {
         if (pendingFetches.size > 0) {
             log.debug(`[PERF] Cancelling ${pendingFetches.size} pending body fetches`);
         }
-        clearInterval(cleanupInterval);
         registry.cleanup();
+        void detachChildren();
+        abandonTimers.forEach((timer) => clearTimeout(timer));
         requestMap.clear();
         pendingFetches.clear();
     };
@@ -254,10 +459,39 @@ const MAX_WEBSOCKET_CONNECTIONS = 100;
 const MAX_FRAMES_PER_CONNECTION = 1000;
 /** Maximum payload size to capture per frame (100KB) */
 const MAX_FRAME_PAYLOAD_SIZE = 100 * 1024;
+/** WebSocket opcode of binary frames (payload is base64) */
+const BINARY_OPCODE = 2;
+/**
+ * Append a frame to a tracked connection, truncating oversized payloads.
+ *
+ * Binary payloads are cut at a multiple of 4 characters so they stay valid base64.
+ *
+ * @param connection - Connection the frame belongs to (untracked frames are ignored)
+ * @param direction - Whether the page sent or received the frame
+ * @param frame - CDP frame data
+ */
+function recordFrame(connection, direction, frame) {
+    if (!connection || connection.frames.length >= MAX_FRAMES_PER_CONNECTION)
+        return;
+    const { payloadData, opcode } = frame;
+    const limit = opcode === BINARY_OPCODE
+        ? MAX_FRAME_PAYLOAD_SIZE - (MAX_FRAME_PAYLOAD_SIZE % 4)
+        : MAX_FRAME_PAYLOAD_SIZE;
+    connection.frames.push({
+        timestamp: Date.now(),
+        direction,
+        opcode,
+        payloadData: payloadData.substring(0, limit),
+        ...(payloadData.length > limit && { truncatedFrom: payloadData.length }),
+    });
+}
 /**
  * Start collecting WebSocket connections and frames via CDP Network domain.
  *
  * Tracks WebSocket lifecycle (creation, handshake, frames, close) separately from HTTP requests.
+ * Connections are added when created and updated in place, so open connections
+ * are visible while they run. A main-frame navigation ends the page and so
+ * every connection it held (Chrome sends no close event for them).
  * Network.enable must be called before this (typically by startNetworkCollection).
  *
  * @param cdp - CDP connection instance
@@ -269,7 +503,7 @@ export function startWebSocketCollection(cdp, connections) {
     const registry = new CDPHandlerRegistry();
     const typed = new TypedCDPConnection(cdp);
     registry.registerTyped(typed, 'Network.webSocketCreated', (params) => {
-        if (connectionMap.size >= MAX_WEBSOCKET_CONNECTIONS) {
+        if (connections.length >= MAX_WEBSOCKET_CONNECTIONS) {
             log.debug(`WebSocket connection limit reached (${MAX_WEBSOCKET_CONNECTIONS}), skipping new connection`);
             return;
         }
@@ -283,58 +517,32 @@ export function startWebSocketCollection(cdp, connections) {
             connection.initiatorUrl = params.initiator.url;
         }
         connectionMap.set(params.requestId, connection);
+        connections.push(connection);
         log.debug(`WebSocket created: ${params.url}`);
     });
+    registry.registerTyped(typed, 'Network.webSocketWillSendHandshakeRequest', (params) => {
+        const connection = connectionMap.get(params.requestId);
+        if (!connection)
+            return;
+        connection.requestHeaders = params.request.headers;
+    });
     registry.registerTyped(typed, 'Network.webSocketHandshakeResponseReceived', (params) => {
         const connection = connectionMap.get(params.requestId);
         if (!connection)
             return;
         connection.status = params.response.status;
+        if (params.response.statusText) {
+            connection.statusText = params.response.statusText;
+        }
         if (params.response.headers) {
             connection.responseHeaders = params.response.headers;
         }
     });
     registry.registerTyped(typed, 'Network.webSocketFrameSent', (params) => {
-        const connection = connectionMap.get(params.requestId);
-        if (!connection)
-            return;
-        if (connection.frames.length >= MAX_FRAMES_PER_CONNECTION) {
-            return;
-        }
-        let payloadData = params.response.payloadData;
-        if (payloadData.length > MAX_FRAME_PAYLOAD_SIZE) {
-            payloadData =
-                payloadData.substring(0, MAX_FRAME_PAYLOAD_SIZE) +
-                    `... [truncated, ${payloadData.length} bytes total]`;
-        }
-        const frame = {
-            timestamp: Date.now(),
-            direction: 'sent',
-            opcode: params.response.opcode,
-            payloadData,
-        };
-        connection.frames.push(frame);
+        recordFrame(connectionMap.get(params.requestId), 'sent', params.response);
     });
     registry.registerTyped(typed, 'Network.webSocketFrameReceived', (params) => {
-        const connection = connectionMap.get(params.requestId);
-        if (!connection)
-            return;
-        if (connection.frames.length >= MAX_FRAMES_PER_CONNECTION) {
-            return;
-        }
-        let payloadData = params.response.payloadData;
-        if (payloadData.length > MAX_FRAME_PAYLOAD_SIZE) {
-            payloadData =
-                payloadData.substring(0, MAX_FRAME_PAYLOAD_SIZE) +
-                    `... [truncated, ${payloadData.length} bytes total]`;
-        }
-        const frame = {
-            timestamp: Date.now(),
-            direction: 'received',
-            opcode: params.response.opcode,
-            payloadData,
-        };
-        connection.frames.push(frame);
+        recordFrame(connectionMap.get(params.requestId), 'received', params.response);
     });
     registry.registerTyped(typed, 'Network.webSocketFrameError', (params) => {
         const connection = connectionMap.get(params.requestId);
@@ -343,19 +551,24 @@ export function startWebSocketCollection(cdp, connections) {
         connection.errorMessage = params.errorMessage;
         log.debug(`WebSocket frame error for ${connection.url}: ${params.errorMessage}`);
     });
+    registry.registerTyped(typed, 'Page.frameNavigated', ({ frame }) => {
+        if (frame.parentId !== undefined)
+            return;
+        const now = Date.now();
+        for (const connection of connectionMap.values()) {
+            connection.closedTime ??= now;
+        }
+        connectionMap.clear();
+    });
     registry.registerTyped(typed, 'Network.webSocketClosed', (params) => {
         const connection = connectionMap.get(params.requestId);
         if (!connection)
             return;
         connection.closedTime = Date.now();
-        connections.push(connection);
         connectionMap.delete(params.requestId);
         log.debug(`WebSocket closed: ${connection.url} (${connection.frames.length} frames captured)`);
     });
     return () => {
-        for (const connection of connectionMap.values()) {
-            connections.push(connection);
-        }
         const totalFrames = connections.reduce((sum, c) => sum + c.frames.length, 0);
         if (connections.length > 0) {
             log.debug(`[PERF] WebSockets: ${connections.length} connections, ${totalFrames} frames captured`);