@reticlehq/browser 3.8.0 → 3.8.1

package/dist/observers/network.js

@@ -1,42 +1,21 @@
-import { BlindSpotKind, EventType, NEXT_ACTION_FIELD, NEXT_ACTION_HEADER, REQUEST_SHAPE_FIELD, REQUEST_SHAPE_NONE, RETICLE_WS_PATH, ResponseBodyReason, StreamTransport, StreamDirection, fnv1a, } from '@reticlehq/core';
+import { BlindSpotKind, EventType, NEXT_ACTION_FIELD, NEXT_ACTION_HEADER, REQUEST_SHAPE_FIELD, REQUEST_SHAPE_NONE, ResponseBodyReason, StreamTransport, StreamDirection, fnv1a, } from '@reticlehq/core';
 import { captureMethod } from '../patching/capture-method.js';
 import { observeSafely, observeValue } from './types.js';
-import { isCapturableType, projectBody, projectErrorBody, shouldCaptureErrorBody, skippedBodyReason, withBodyDeadline, } from './net-detail/network-body.js';
+import { isCapturableType, projectBody, projectErrorBody, shouldCaptureErrorBody, skippedBodyReason, } from './net-detail/network-body.js';
+import { captureResponseBody, isEventStream } from './net-detail/network-response-body.js';
 import { redactUrl, netUrlFields } from './net-detail/network-redact.js';
 import { watchStreamedBody } from './network-stream.js';
+import { frameFields, isBridgeSocket } from './net-detail/network-frames.js';
 import { requireCapturedMethod } from '../util/captured-method.js';
 export { redactUrl, netUrlFields };
-function binaryFrameBytes(data) {
-    if (data instanceof ArrayBuffer)
-        return data.byteLength;
-    if (typeof Blob !== 'undefined' && data instanceof Blob)
-        return data.size;
-    if (ArrayBuffer.isView(data))
-        return data.byteLength;
-    return undefined;
-}
-function frameFields(data, captureBodies) {
-    if (typeof data !== 'string') {
-        const bytes = binaryFrameBytes(data);
-        return bytes === undefined
-            ? { frameType: typeof data }
-            : { frameType: 'binary', frameBytes: bytes };
-    }
-    const out = { frameBytes: data.length };
-    if (captureBodies) {
-        const { body, truncated } = projectBody(data, 'application/json');
-        out['frame'] = body;
-        if (truncated)
-            out['frameTruncated'] = true;
-    }
-    return out;
-}
 const ShapeToken = { NULL: '0', STRING: 's', NUMBER: 'n', BOOLEAN: 'b', OTHER: '?' };
 function shapeOf(value) {
-    if (null === value)
+    if (null === value) {
         return ShapeToken.NULL;
-    if (Array.isArray(value))
+    }
+    if (Array.isArray(value)) {
         return `[${value.map(shapeOf).join(',')}]`;
+    }
     if ('object' === typeof value) {
         const fields = value;
         return `{${Object.keys(fields)
@@ -44,12 +23,15 @@ function shapeOf(value) {
             .map((key) => `${key}:${shapeOf(fields[key])}`)
             .join(',')}}`;
     }
-    if ('string' === typeof value)
+    if ('string' === typeof value) {
         return ShapeToken.STRING;
-    if ('number' === typeof value)
+    }
+    if ('number' === typeof value) {
         return ShapeToken.NUMBER;
-    if ('boolean' === typeof value)
+    }
+    if ('boolean' === typeof value) {
         return ShapeToken.BOOLEAN;
+    }
     return ShapeToken.OTHER;
 }
 function fingerprintBody(shape, length) {
@@ -72,8 +54,9 @@ const DELETE = 0x7f;
 function hasControlCharacter(text) {
     for (let i = 0; i < text.length; i += 1) {
         const code = text.charCodeAt(i);
-        if (code === DELETE)
+        if (code === DELETE) {
             return true;
+        }
         if (code < FIRST_PRINTABLE && code !== TAB && code !== LINE_FEED && code !== CARRIAGE_RETURN) {
             return true;
         }
@@ -81,10 +64,12 @@ function hasControlCharacter(text) {
     return false;
 }
 function textOfBytes(body) {
-    if (!(body instanceof ArrayBuffer || ArrayBuffer.isView(body)))
+    if (!(body instanceof ArrayBuffer || ArrayBuffer.isView(body))) {
         return undefined;
-    if (body.byteLength > MAX_DECODED_BODY_BYTES)
+    }
+    if (body.byteLength > MAX_DECODED_BODY_BYTES) {
         return undefined;
+    }
     try {
         const text = new TextDecoder('utf-8', { fatal: true }).decode(body);
         return hasControlCharacter(text) ? undefined : text;
@@ -97,8 +82,9 @@ function formShape(form) {
     const fields = [];
     let length = 0;
     form.forEach((value, name) => {
-        if ('string' === typeof value)
+        if ('string' === typeof value) {
             length += value.length;
+        }
         fields.push(JSON.stringify([name, 'string' === typeof value ? 0 : [value.type, value.size]]));
     });
     return 0 === fields.length ? undefined : fingerprintBody(fields.sort().join(), length);
@@ -111,8 +97,9 @@ function projectRequestBody(body, captureBodies) {
     const typeOf = () => body.constructor?.name ?? typeof body;
     if ('string' === typeof body || bytesText !== undefined) {
         text = bytesText ?? body;
-        if (text.length > 0)
+        if (text.length > 0) {
             shape = fingerprintBody(jsonShape(text), text.length);
+        }
     }
     else if (typeof FormData !== 'undefined' && body instanceof FormData) {
         const form = formShape(body);
@@ -133,8 +120,9 @@ function projectRequestBody(body, captureBodies) {
         return captureBodies ? { requestBodyType: typeOf() } : {};
     }
     const fields = { [REQUEST_SHAPE_FIELD]: shape };
-    if (!captureBodies || text === undefined || 0 === text.length)
+    if (!captureBodies || text === undefined || 0 === text.length) {
         return fields;
+    }
     const { body: out, truncated } = projectBody(text, contentType);
     return truncated
         ? { ...fields, requestBody: out, requestBodyTruncated: true }
@@ -145,27 +133,34 @@ function statusIsOk(status) {
 }
 function netResponseMeta(statusText, contentType, contentLength) {
     const out = {};
-    if (statusText !== '')
+    if (statusText !== '') {
         out['statusText'] = statusText;
-    if (contentType !== null && contentType !== '')
+    }
+    if (contentType !== null && contentType !== '') {
         out['contentType'] = contentType;
+    }
     const size = contentLength !== null ? Number.parseInt(contentLength, 10) : Number.NaN;
-    if (Number.isFinite(size))
+    if (Number.isFinite(size)) {
         out['responseSize'] = size;
+    }
     return out;
 }
 function urlOf(input) {
-    if ('string' === typeof input)
+    if ('string' === typeof input) {
         return input;
-    if (input instanceof URL)
+    }
+    if (input instanceof URL) {
         return input.href;
+    }
     return input.url;
 }
 function methodOf(input, init) {
-    if (init?.method !== undefined)
+    if (init?.method !== undefined) {
         return init.method.toUpperCase();
-    if (input instanceof Request)
+    }
+    if (input instanceof Request) {
         return input.method.toUpperCase();
+    }
     return 'GET';
 }
 function nextActionOf(input, init) {
@@ -180,8 +175,9 @@ function nextActionOf(input, init) {
 const NON_APP_FRAME = /@reticlehq|reticle\.ts|network\.ts|transport\.ts|<anonymous>|new Promise|node:internal/i;
 const DEPENDENCY_FRAME = /node_modules|\/\.vite\/deps\//i;
 export function firstAppFrame(stack) {
-    if (stack === undefined)
+    if (stack === undefined) {
         return undefined;
+    }
     const frames = stack
         .split('\n')
         .slice(1)
@@ -194,14 +190,16 @@ function initiatorFrame() {
     return firstAppFrame(new Error().stack);
 }
 export function extractTiming(entry) {
-    if (entry === undefined)
+    if (entry === undefined) {
         return {};
+    }
     const timing = {};
     if (entry.responseStart > 0 && entry.requestStart > 0) {
         timing.ttfbMs = Math.round(entry.responseStart - entry.requestStart);
     }
-    if (entry.transferSize > 0)
+    if (entry.transferSize > 0) {
         timing.transferSize = entry.transferSize;
+    }
     return timing;
 }
 function resourceTiming(rawUrl) {
@@ -213,14 +211,6 @@ function resourceTiming(rawUrl) {
         return {};
     }
 }
-function isBridgeSocket(url) {
-    try {
-        return new URL(url, location.href).pathname === RETICLE_WS_PATH;
-    }
-    catch {
-        return url.includes(RETICLE_WS_PATH);
-    }
-}
 function isNativeFetch(fn) {
     try {
         return Function.prototype.toString.call(fn).includes('native code');
@@ -233,11 +223,13 @@ const OURS = new WeakSet();
 const PAGE_CAPTURE = Symbol.for('reticle.network');
 const pageSlots = () => window;
 export function installNetwork(emit, opts = {}) {
-    if (undefined !== pageSlots()[PAGE_CAPTURE])
+    if (undefined !== pageSlots()[PAGE_CAPTURE]) {
         return () => undefined;
+    }
     const owner = {};
     pageSlots()[PAGE_CAPTURE] = owner;
     const captureBodies = true === opts.captureBodies;
+    const bodyCapture = new AbortController();
     const captureErrorBodies = false !== opts.captureErrorBodies;
     const reinterpret = opts.reinterpret;
     const origFetch = requireCapturedMethod(window, 'fetch');
@@ -249,8 +241,9 @@ export function installNetwork(emit, opts = {}) {
     const nextId = () => `n${++seq}`;
     window.fetch = async (input, init) => {
         const rawUrl = urlOf(input);
-        if (true === opts.ignore?.(rawUrl))
+        if (true === opts.ignore?.(rawUrl)) {
             return callFetch(input, init);
+        }
         const id = nextId();
         const start = performance.now();
         const method = methodOf(input, init);
@@ -299,40 +292,26 @@ export function installNetwork(emit, opts = {}) {
                 });
             };
             const wantErrorBody = shouldCaptureErrorBody(res.status, captureErrorBodies);
-            if ((captureBodies || wantErrorBody) && isCapturableType(contentType)) {
-                let clone;
-                try {
-                    clone = res.clone();
-                }
-                catch {
-                }
-                void (async () => {
-                    let responseBodyFields = captureBodies
-                        ? { responseBodyReason: ResponseBodyReason.UNREADABLE }
-                        : {};
-                    if (clone !== undefined) {
-                        try {
-                            const text = await withBodyDeadline(clone.text());
-                            if (text !== undefined) {
-                                const { body, truncated } = captureBodies
-                                    ? projectBody(text, contentType)
-                                    : projectErrorBody(text, contentType);
-                                responseBodyFields = {
-                                    responseBody: body,
-                                    ...(truncated ? { responseBodyTruncated: true } : {}),
-                                    ...(captureBodies ? {} : { responseBodyReason: ResponseBodyReason.ERROR_STATUS }),
-                                };
-                            }
-                        }
-                        catch {
-                        }
-                    }
-                    try {
-                        emitRequest(responseBodyFields);
-                    }
-                    catch {
+            if (captureBodies && isEventStream(contentType)) {
+                emitRequest({ responseBodyReason: ResponseBodyReason.UNREADABLE });
+                void captureResponseBody(res, contentType, true, bodyCapture.signal)
+                    .then((fields) => {
+                    if (typeof fields['responseBody'] !== 'string') {
+                        return;
                     }
-                })().catch(() => undefined);
+                    observeSafely(() => emit(EventType.NET_RESPONSE_BODY, {
+                        id,
+                        method,
+                        ...urlFields,
+                        ...fields,
+                    }));
+                })
+                    .catch(() => undefined);
+            }
+            else if ((captureBodies || wantErrorBody) && isCapturableType(contentType)) {
+                void captureResponseBody(res, contentType, captureBodies, bodyCapture.signal)
+                    .then(emitRequest)
+                    .catch(() => undefined);
             }
             else {
                 const skipped = captureBodies ? skippedBodyReason(contentType) : undefined;
@@ -399,23 +378,25 @@ export function installNetwork(emit, opts = {}) {
                     this.addEventListener('loadend', () => {
                         observeSafely(() => {
                             const cur = meta.get(this);
-                            if (cur === undefined)
+                            if (cur === undefined) {
                                 return;
+                            }
                             reportedNetUrls.add(cur.rawUrl);
                             const xhrContentType = this.getResponseHeader('content-type');
                             let responseBodyFields = {};
                             const textReadable = '' === this.responseType || 'text' === this.responseType;
                             const wantXhrErrorBody = shouldCaptureErrorBody(this.status, captureErrorBodies);
+                            const capturable = isCapturableType(xhrContentType) ||
+                                (captureBodies && isEventStream(xhrContentType));
                             if (captureBodies) {
-                                const skipped = isCapturableType(xhrContentType)
+                                const skipped = capturable
                                     ? ResponseBodyReason.UNREADABLE
                                     : skippedBodyReason(xhrContentType);
-                                if (skipped !== undefined)
+                                if (skipped !== undefined) {
                                     responseBodyFields = { responseBodyReason: skipped };
+                                }
                             }
-                            if ((captureBodies || wantXhrErrorBody) &&
-                                textReadable &&
-                                isCapturableType(xhrContentType)) {
+                            if ((captureBodies || wantXhrErrorBody) && textReadable && capturable) {
                                 try {
                                     const { body: rb, truncated } = captureBodies
                                         ? projectBody(this.responseText, xhrContentType)
@@ -489,8 +470,9 @@ export function installNetwork(emit, opts = {}) {
             constructor(u, protocols) {
                 super(u, protocols);
                 this.#isBridge = isBridgeSocket(String(u));
-                if (this.#isBridge)
+                if (this.#isBridge) {
                     return;
+                }
                 observeSafely(() => {
                     const urlFields = netUrlFields(String(u));
                     emit(EventType.NET_STREAM, {
@@ -564,14 +546,17 @@ export function installNetwork(emit, opts = {}) {
             const observer = new PerformanceObserver((list) => {
                 for (const raw of list.getEntries()) {
                     const entry = raw;
-                    if (subresourceEvents >= SUBRESOURCE_CAP)
+                    if (subresourceEvents >= SUBRESOURCE_CAP) {
                         return;
+                    }
                     const type = entry.initiatorType || 'other';
-                    if ('fetch' === type || 'xmlhttprequest' === type)
+                    if ('fetch' === type || 'xmlhttprequest' === type) {
                         continue;
+                    }
                     const rawUrl = entry.name;
-                    if (reportedNetUrls.has(rawUrl))
+                    if (reportedNetUrls.has(rawUrl)) {
                         continue;
+                    }
                     reportedNetUrls.add(rawUrl);
                     subresourceEvents += 1;
                     emit(EventType.NET_REQUEST, {
@@ -597,15 +582,20 @@ export function installNetwork(emit, opts = {}) {
         }
     }
     return () => {
-        if (pageSlots()[PAGE_CAPTURE] === owner)
+        if (pageSlots()[PAGE_CAPTURE] === owner) {
             delete pageSlots()[PAGE_CAPTURE];
+        }
+        bodyCapture.abort();
         subresourceObserver?.disconnect();
-        if (window.fetch === patchedFetch)
+        if (window.fetch === patchedFetch) {
             window.fetch = origFetch;
-        if (captureMethod(proto, 'open') === patchedOpen)
+        }
+        if (captureMethod(proto, 'open') === patchedOpen) {
             proto.open = origOpen;
-        if (captureMethod(proto, 'send') === patchedSend)
+        }
+        if (captureMethod(proto, 'send') === patchedSend) {
             proto.send = origSend;
+        }
         if (patchedEventSource !== undefined && window.EventSource === patchedEventSource) {
             window.EventSource = origEventSource;
         }