@reticlehq/browser 3.7.0 → 3.8.1

package/dist/observers/field.js

@@ -1,13 +1,34 @@
 import { readTestId } from '../dom/addressing/testid-attr.js';
-import { EventType } from '@reticlehq/core';
+import { EventType, FieldChangeField, FieldChangeKind } from '@reticlehq/core';
 import { getAccessibleName, isSensitiveField } from '../dom/a11y.js';
 const MAX_VALUE_LEN = 160;
 const BURST_MS = 150;
+const CHECKBOX_TYPE = 'checkbox';
+const RADIO_TYPE = 'radio';
+let settledEmit;
 function isField(target) {
     return (target instanceof HTMLInputElement ||
         target instanceof HTMLTextAreaElement ||
         target instanceof HTMLSelectElement);
 }
+function isCheckable(element) {
+    return (element instanceof HTMLInputElement &&
+        (CHECKBOX_TYPE === element.type || RADIO_TYPE === element.type));
+}
+function readingOf(element) {
+    if (isCheckable(element))
+        return { value: element.value, checked: element.checked };
+    return { value: element.value };
+}
+function readingMoved(before, after) {
+    if (before.checked !== undefined || after.checked !== undefined) {
+        return before.checked !== after.checked;
+    }
+    return before.value !== after.value;
+}
+function clip(value) {
+    return value.length > MAX_VALUE_LEN ? `${value.slice(0, MAX_VALUE_LEN)}…` : value;
+}
 function fieldName(element) {
     const testid = readTestId(element);
     if (null !== testid && testid.length > 0)
@@ -20,21 +41,102 @@ function fieldName(element) {
     const id = element.getAttribute('id');
     return null !== id && id.length > 0 ? id : element.tagName.toLowerCase();
 }
+function fieldPayload(element, kind, after, before) {
+    const secret = isSensitiveField(element);
+    const payload = {
+        [FieldChangeField.FIELD]: fieldName(element),
+        [FieldChangeField.KIND]: kind,
+        [FieldChangeField.LENGTH]: after.value.length,
+    };
+    if (after.checked !== undefined)
+        payload[FieldChangeField.CHECKED] = after.checked;
+    if (before?.checked !== undefined)
+        payload[FieldChangeField.PREVIOUS_CHECKED] = before.checked;
+    if (secret) {
+        payload[FieldChangeField.REDACTED] = true;
+        return payload;
+    }
+    payload[FieldChangeField.VALUE] = clip(after.value);
+    if (before !== undefined && before.checked === undefined) {
+        payload[FieldChangeField.PREVIOUS] = clip(before.value);
+    }
+    return payload;
+}
+function settledProperty(el) {
+    return isCheckable(el) ? 'checked' : 'value';
+}
+function inheritedDescriptor(el, prop) {
+    for (let proto = Object.getPrototypeOf(el); proto !== null;) {
+        const found = Object.getOwnPropertyDescriptor(proto, prop);
+        if (found !== undefined)
+            return found;
+        proto = Object.getPrototypeOf(proto);
+    }
+    return undefined;
+}
+function watchWrites(el, prop) {
+    const own = Object.getOwnPropertyDescriptor(el, prop);
+    const target = own ?? inheritedDescriptor(el, prop);
+    const get = target === undefined ? undefined : Reflect.get(target, 'get');
+    const set = target === undefined ? undefined : Reflect.get(target, 'set');
+    let written = false;
+    const usable = 'function' === typeof get && 'function' === typeof set;
+    if (!usable || false === own?.configurable) {
+        return { stop: () => { }, written: () => written };
+    }
+    Object.defineProperty(el, prop, {
+        configurable: true,
+        enumerable: target?.enumerable ?? false,
+        get() {
+            return Reflect.apply(get, this, []);
+        },
+        set(next) {
+            written = true;
+            Reflect.apply(set, this, [next]);
+        },
+    });
+    let stopped = false;
+    return {
+        stop: () => {
+            if (stopped)
+                return;
+            stopped = true;
+            if (own === undefined)
+                Reflect.deleteProperty(el, prop);
+            else
+                Object.defineProperty(el, prop, own);
+        },
+        written: () => written,
+    };
+}
+export function watchActedField(el) {
+    if (!isField(el) || el instanceof HTMLSelectElement)
+        return undefined;
+    return { before: readingOf(el), ...watchWrites(el, settledProperty(el)) };
+}
+export function publishSettledField(el, acted) {
+    const emit = settledEmit;
+    if (acted === undefined)
+        return;
+    acted.stop();
+    if (emit === undefined || !isField(el) || !el.isConnected || !acted.written())
+        return;
+    const before = acted.before;
+    if (isSensitiveField(el) && before.checked === undefined)
+        return;
+    const after = readingOf(el);
+    if (!readingMoved(before, after))
+        return;
+    emit(EventType.FIELD_CHANGE, fieldPayload(el, FieldChangeKind.SETTLED, after, before));
+}
 export function installField(emit) {
     const ac = new AbortController();
     const { signal } = ac;
+    const previousEmit = settledEmit;
+    settledEmit = emit;
     const pending = new Map();
     const report = (element, kind) => {
-        const value = element.value;
-        const secret = isSensitiveField(element);
-        emit(EventType.FIELD_CHANGE, {
-            field: fieldName(element),
-            kind,
-            length: value.length,
-            ...(secret
-                ? { redacted: true }
-                : { value: value.length > MAX_VALUE_LEN ? `${value.slice(0, MAX_VALUE_LEN)}…` : value }),
-        });
+        emit(EventType.FIELD_CHANGE, fieldPayload(element, kind, readingOf(element)));
     };
     const clear = (element) => {
         const timer = pending.get(element);
@@ -49,7 +151,7 @@ export function installField(emit) {
         clear(element);
         pending.set(element, setTimeout(() => {
             pending.delete(element);
-            report(element, 'input');
+            report(element, FieldChangeKind.INPUT);
         }, BURST_MS));
     };
     const onChange = (event) => {
@@ -57,7 +159,7 @@ export function installField(emit) {
         if (!isField(element))
             return;
         clear(element);
-        report(element, 'change');
+        report(element, FieldChangeKind.CHANGE);
     };
     document.addEventListener('input', onInput, { signal, capture: true });
     document.addEventListener('change', onChange, { signal, capture: true });
@@ -65,6 +167,8 @@ export function installField(emit) {
         for (const timer of pending.values())
             clearTimeout(timer);
         pending.clear();
+        if (settledEmit === emit)
+            settledEmit = previousEmit;
         ac.abort();
     };
 }

package/dist/observers/install-all.js

@@ -17,6 +17,8 @@ import { installDialogs } from './dialogs.js';
 import { installAnimation } from './animation.js';
 import { installScroll } from './scroll.js';
 import { installHealth } from './health.js';
+import { installMedia } from './media.js';
+import { installCanvas } from './canvas.js';
 import { reportSdkFailure, SdkSite } from './sdk-failure.js';
 function guard(emit, site, install) {
     try {
@@ -65,5 +67,7 @@ export function installAllObservers(emit, options) {
         guard(emit, SdkSite.DOM_OBSERVER, () => installBlindSpots(emit)),
         guard(emit, SdkSite.HEALTH_OBSERVER, () => installHealth(emit)),
         guard(emit, SdkSite.DOM_OBSERVER, () => installContextOpen(emit)),
+        guard(emit, SdkSite.DOM_OBSERVER, () => installMedia(emit)),
+        guard(emit, SdkSite.DOM_OBSERVER, () => installCanvas(emit)),
     ];
 }

package/dist/observers/media.d.ts

@@ -0,0 +1,2 @@
+import { type Emit, type Teardown } from './types.js';
+export declare function installMedia(emit: Emit): Teardown;

package/dist/observers/media.js

@@ -0,0 +1,32 @@
+import { EventType, MediaEvent } from '@reticlehq/core';
+import { refs } from '../dom/addressing/refs.js';
+import { observeSafely } from './types.js';
+const TAGS = { VIDEO: 'video', AUDIO: 'audio' };
+export function installMedia(emit) {
+    const ac = new AbortController();
+    const onMedia = (event) => {
+        observeSafely(() => {
+            const el = event.target;
+            if (!(el instanceof HTMLMediaElement)) {
+                return;
+            }
+            const tag = TAGS[el.tagName];
+            if (tag === undefined) {
+                return;
+            }
+            const duration = Number.isFinite(el.duration) ? el.duration : undefined;
+            emit(EventType.MEDIA_STATE, {
+                event: event.type,
+                tag,
+                currentTime: el.currentTime,
+                ...(duration === undefined ? {} : { duration }),
+                readyState: el.readyState,
+                paused: el.paused,
+            }, refs.refFor(el));
+        });
+    };
+    for (const type of Object.values(MediaEvent)) {
+        document.addEventListener(type, onMedia, { capture: true, signal: ac.signal });
+    }
+    return () => ac.abort();
+}

package/dist/observers/net-detail/network-body.d.ts

@@ -1,5 +1,7 @@
+import { ResponseBodyReason } from '@reticlehq/core';
 export declare function isStreamingBody(contentType: string | null, contentLength: string | null): boolean;
 export declare function withBodyDeadline(read: Promise<string>): Promise<string | undefined>;
+export declare function skippedBodyReason(contentType: string | null): ResponseBodyReason | undefined;
 export declare function isCapturableType(contentType: string | null): boolean;
 export declare function setNetworkBodyMaxChars(chars: number): void;
 export declare function networkBodyMaxChars(): number;

package/dist/observers/net-detail/network-body.js

@@ -1,12 +1,14 @@
-import { REDACTED_VALUE } from '@reticlehq/core';
+import { REDACTED_VALUE, ResponseBodyReason } from '@reticlehq/core';
 import { isSensitiveKey, safeStringify, scrubKnownSecrets } from '../../security/serialization.js';
 import { nativeClearTimeout, nativeSetTimeout } from '../../timers/native/native-timers.js';
+import { isEventStream, redactEventStream } from './network-event-stream.js';
 const CAPTURABLE_CONTENT = /application\/json|text\/|application\/xml|x-www-form-urlencoded|graphql/i;
 const STREAMING_CONTENT = /event-stream|x-ndjson|application\/stream/i;
 const ENDLESS_BY_DESIGN = /event-stream/i;
 export function isStreamingBody(contentType, contentLength) {
-    if (contentType !== null && ENDLESS_BY_DESIGN.test(contentType))
+    if (contentType !== null && ENDLESS_BY_DESIGN.test(contentType)) {
         return false;
+    }
     return null === contentLength;
 }
 const BODY_READ_TIMEOUT_MS = 500;
@@ -21,15 +23,26 @@ export async function withBodyDeadline(read) {
         ]);
     }
     finally {
-        if (timer !== undefined)
+        if (timer !== undefined) {
             nativeClearTimeout(timer);
+        }
     }
 }
+export function skippedBodyReason(contentType) {
+    if (null === contentType) {
+        return undefined;
+    }
+    return STREAMING_CONTENT.test(contentType)
+        ? ResponseBodyReason.STREAMING
+        : ResponseBodyReason.NOT_TEXT;
+}
 export function isCapturableType(contentType) {
-    if (null === contentType)
+    if (null === contentType) {
         return false;
-    if (STREAMING_CONTENT.test(contentType))
+    }
+    if (STREAMING_CONTENT.test(contentType)) {
         return false;
+    }
     return CAPTURABLE_CONTENT.test(contentType);
 }
 const DEFAULT_BODY_CHARS = 8192;
@@ -37,8 +50,9 @@ const MAX_CONFIGURABLE_BODY_CHARS = 262144;
 const MIN_CONFIGURABLE_BODY_CHARS = 256;
 let bodyMaxChars = DEFAULT_BODY_CHARS;
 export function setNetworkBodyMaxChars(chars) {
-    if (!Number.isFinite(chars))
+    if (!Number.isFinite(chars)) {
         return;
+    }
     bodyMaxChars = Math.min(MAX_CONFIGURABLE_BODY_CHARS, Math.max(MIN_CONFIGURABLE_BODY_CHARS, Math.floor(chars)));
 }
 export function networkBodyMaxChars() {
@@ -53,7 +67,13 @@ const AUTH_SCHEME_TOKEN = /\b(Bearer|Basic)\s+(?=[A-Za-z0-9._~+/=-]{16,})(?=[A-Z
 function redactText(text) {
     return (text
         .replace(AUTH_SCHEME_TOKEN, (_m, scheme) => `${scheme} ${REDACTED_VALUE}`)
-        .replace(/([A-Za-z0-9_.-]+)(\s*[=:]\s*"?)([^&\s,;"}]+)/g, (match, key, sep) => isSensitiveKey(key) ? `${key}${sep}${REDACTED_VALUE}` : match));
+        .replace(/([A-Za-z0-9_.-]+)("?\s*[=:]\s*)("(?:\\.|[^"\\])*"?|[^&\s,;"}]+)/g, (match, key, sep, value) => {
+        if (!isSensitiveKey(key)) {
+            return match;
+        }
+        const redacted = value.startsWith('"') ? `"${REDACTED_VALUE}"` : REDACTED_VALUE;
+        return `${key}${sep}${redacted}`;
+    }));
 }
 const ERROR_BODY_CHARS = 4096;
 export function shouldCaptureErrorBody(status, enabled) {
@@ -61,8 +81,9 @@ export function shouldCaptureErrorBody(status, enabled) {
 }
 export function projectErrorBody(rawText, contentType) {
     const projected = projectBody(rawText, contentType);
-    if (projected.body.length <= ERROR_BODY_CHARS)
+    if (projected.body.length <= ERROR_BODY_CHARS) {
         return projected;
+    }
     return { body: projected.body.slice(0, ERROR_BODY_CHARS), truncated: true };
 }
 export function projectBody(rawText, contentType) {
@@ -70,6 +91,7 @@ export function projectBody(rawText, contentType) {
     const scanChars = scanWidth(!isJson);
     const oversized = rawText.length > scanChars;
     const text = oversized ? rawText.slice(0, scanChars) : rawText;
+    let incomplete = false;
     let out;
     if (isJson) {
         try {
@@ -79,10 +101,15 @@ export function projectBody(rawText, contentType) {
             out = redactText(text);
         }
     }
+    else if (isEventStream(contentType)) {
+        const projected = redactEventStream(text);
+        out = redactText(projected.body);
+        incomplete = projected.truncated;
+    }
     else {
         out = redactText(text);
     }
     out = scrubKnownSecrets(out);
-    const truncated = oversized || out.length > bodyMaxChars;
+    const truncated = incomplete || oversized || out.length > bodyMaxChars;
     return { body: out.length > bodyMaxChars ? out.slice(0, bodyMaxChars) : out, truncated };
 }

package/dist/observers/net-detail/network-event-stream.d.ts

@@ -0,0 +1,5 @@
+export declare function isEventStream(contentType: string | null): boolean;
+export declare function redactEventStream(text: string): {
+    body: string;
+    truncated: boolean;
+};

package/dist/observers/net-detail/network-event-stream.js

@@ -0,0 +1,55 @@
+import { REDACTED_VALUE } from '@reticlehq/core';
+import { sanitizeWithReport } from '../../security/serialization.js';
+const EVENT_STREAM_CONTENT = /^text\/event-stream(?:\s*;|\s*$)/i;
+const DATA_FIELD = 'data:';
+const DATA_NAME = 'data';
+const JSON_CONTAINER = /^[{[]/;
+const TEXT_MARKER = /^\[[A-Z_]+\]$/;
+export function isEventStream(contentType) {
+    return contentType !== null && EVENT_STREAM_CONTENT.test(contentType);
+}
+function isData(line) {
+    return DATA_NAME === line || line.startsWith(DATA_FIELD);
+}
+export function redactEventStream(text) {
+    let truncated = false;
+    const records = text.replace(/\r\n?/g, '\n').split('\n\n');
+    const body = records
+        .map((record) => {
+        const lines = record.split('\n');
+        const data = lines
+            .filter(isData)
+            .map((line) => line.slice(DATA_FIELD.length).replace(/^ /, ''))
+            .join('\n');
+        if (!JSON_CONTAINER.test(data.trimStart()) || TEXT_MARKER.test(data.trim())) {
+            return record;
+        }
+        let projected;
+        try {
+            const sanitized = sanitizeWithReport(JSON.parse(data));
+            projected = JSON.stringify(sanitized.value);
+            if (sanitized.truncation !== undefined) {
+                truncated = true;
+            }
+        }
+        catch {
+            projected = REDACTED_VALUE;
+            truncated = true;
+        }
+        let first = true;
+        return lines
+            .flatMap((line) => {
+            if (!isData(line)) {
+                return [line];
+            }
+            if (!first) {
+                return [];
+            }
+            first = false;
+            return [`${DATA_FIELD} ${projected}`];
+        })
+            .join('\n');
+    })
+        .join('\n\n');
+    return { body, truncated };
+}

package/dist/observers/net-detail/network-frames.d.ts

@@ -0,0 +1,2 @@
+export declare function frameFields(data: unknown, captureBodies: boolean): Record<string, unknown>;
+export declare function isBridgeSocket(url: string): boolean;

package/dist/observers/net-detail/network-frames.js

@@ -0,0 +1,39 @@
+import { RETICLE_WS_PATH } from '@reticlehq/core';
+import { projectBody } from './network-body.js';
+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;
+}
+export 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;
+}
+export function isBridgeSocket(url) {
+    try {
+        return new URL(url, location.href).pathname === RETICLE_WS_PATH;
+    }
+    catch {
+        return url.includes(RETICLE_WS_PATH);
+    }
+}

package/dist/observers/net-detail/network-response-body.d.ts

@@ -0,0 +1,3 @@
+import { isEventStream } from './network-event-stream.js';
+export { isEventStream };
+export declare function captureResponseBody(response: Response, contentType: string | null, captureBodies: boolean, signal: AbortSignal): Promise<Record<string, unknown>>;

package/dist/observers/net-detail/network-response-body.js

@@ -0,0 +1,97 @@
+import { ResponseBodyReason } from '@reticlehq/core';
+import { nativeClearTimeout, nativeSetTimeout } from '../../timers/native/native-timers.js';
+import { networkBodyMaxChars, projectBody, projectErrorBody, withBodyDeadline, } from './network-body.js';
+import { isEventStream } from './network-event-stream.js';
+export { isEventStream };
+const EVENT_STREAM_READ_MS = 10_000;
+const UTF8_MAX_BYTES_PER_CHAR = 4;
+const REDACTION_LOOKAHEAD = 2;
+async function readEventStream(clone, signal) {
+    if (signal.aborted || typeof clone.body?.getReader !== 'function') {
+        return undefined;
+    }
+    const reader = clone.body.getReader();
+    const decoder = new TextDecoder();
+    const limit = networkBodyMaxChars() * REDACTION_LOOKAHEAD;
+    let text = '';
+    let complete = false;
+    let stopped = false;
+    let stop = () => undefined;
+    const interrupted = new Promise((resolve) => {
+        stop = () => {
+            stopped = true;
+            resolve();
+        };
+    });
+    const timer = nativeSetTimeout(stop, EVENT_STREAM_READ_MS);
+    signal.addEventListener('abort', stop, { once: true });
+    try {
+        await Promise.race([
+            (async () => {
+                while (!stopped && !signal.aborted) {
+                    const next = await reader.read();
+                    if (stopped || signal.aborted) {
+                        return;
+                    }
+                    if (next.done) {
+                        text += decoder.decode();
+                        complete = true;
+                        return;
+                    }
+                    const remaining = limit - text.length;
+                    const bytes = next.value.subarray(0, remaining * UTF8_MAX_BYTES_PER_CHAR);
+                    const decoded = decoder.decode(bytes, { stream: true });
+                    text += decoded.slice(0, remaining);
+                    if (text.length >= limit || bytes.byteLength < next.value.byteLength) {
+                        return;
+                    }
+                }
+            })(),
+            interrupted,
+        ]);
+    }
+    catch {
+    }
+    finally {
+        nativeClearTimeout(timer);
+        signal.removeEventListener('abort', stop);
+        if (!complete) {
+            void reader.cancel().catch(() => undefined);
+        }
+        reader.releaseLock();
+    }
+    return !complete && 0 === text.length ? undefined : { text, complete };
+}
+export async function captureResponseBody(response, contentType, captureBodies, signal) {
+    const unreadable = captureBodies ? { responseBodyReason: ResponseBodyReason.UNREADABLE } : {};
+    if (isEventStream(contentType) && (!captureBodies || signal.aborted)) {
+        return unreadable;
+    }
+    try {
+        const clone = response.clone();
+        let text;
+        let incomplete = false;
+        if (isEventStream(contentType)) {
+            const stream = await readEventStream(clone, signal);
+            text = stream?.text;
+            incomplete = false === stream?.complete;
+        }
+        else {
+            text = await withBodyDeadline(clone.text());
+        }
+        if (undefined === text) {
+            return unreadable;
+        }
+        const projected = captureBodies
+            ? projectBody(text, contentType)
+            : projectErrorBody(text, contentType);
+        return {
+            responseBody: projected.body,
+            ...(incomplete || projected.truncated ? { responseBodyTruncated: true } : {}),
+            ...(captureBodies ? {} : { responseBodyReason: ResponseBodyReason.ERROR_STATUS }),
+        };
+    }
+    catch {
+        return unreadable;
+    }
+}