@reticlehq/browser 3.8.2 → 3.10.0

package/dist/dom/visibility.js

@@ -1,3 +1,4 @@
+import { RETICLE_OVERLAY_SELECTOR } from '@reticlehq/core';
 import { isHtmlElement } from './realm.js';
 import { parentAcrossShadowBoundary } from './shadow-registry.js';
 import { clippingBox, overflowAxes, scrolledInto, } from './paint-context.js';
@@ -16,17 +17,51 @@ function hiddenInsideClosedDetails(el) {
     const summary = Array.from(details.children).find((child) => HTML_SUMMARY_TAG === child.localName);
     return summary === undefined || !summary.contains(el);
 }
-function stalledFade(el) {
+export function stalledFade(el) {
     if (!el.ownerDocument.hidden || !('getAnimations' in el)) {
         return false;
     }
     return el.getAnimations().some((a) => 'running' === a.playState || a.pending);
 }
 const OVERLAY_ARIA_HIDDEN = 'data-aria-hidden';
+const OPEN_LAYER = '[role="dialog"], [role="alertdialog"], [role="menu"], [role="listbox"], dialog[open], [aria-modal="true"]';
+const NON_RENDERED_TAGS = ['script', 'style', 'template', 'noscript'];
+export function isNonRendered(el) {
+    return NON_RENDERED_TAGS.includes(el.tagName.toLowerCase());
+}
+const UNPAINTED_TAGS = new Set(['script', 'style', 'template', 'noscript', 'link', 'meta']);
 function hiddenByAnOverlay(el) {
-    return el.hasAttribute(OVERLAY_ARIA_HIDDEN);
+    if (el.hasAttribute(OVERLAY_ARIA_HIDDEN)) {
+        return true;
+    }
+    return hiddenByAModalManager(el);
+}
+function hiddenByAModalManager(el) {
+    const body = el.ownerDocument.body;
+    if (el.parentElement !== body) {
+        return false;
+    }
+    const others = Array.from(body.children).filter((child) => child !== el &&
+        !UNPAINTED_TAGS.has(child.localName) &&
+        !child.matches(RETICLE_OVERLAY_SELECTOR));
+    const open = others.filter((child) => 'true' !== child.getAttribute('aria-hidden'));
+    const layer = open[0];
+    return 1 === open.length && layer !== undefined && holdsOpenLayer(layer);
+}
+function holdsOpenLayer(portal) {
+    const layer = portal.matches(OPEN_LAYER) ? portal : portal.querySelector(OPEN_LAYER);
+    for (let node = layer; null !== node; node = node.parentElement) {
+        const style = node.ownerDocument.defaultView?.getComputedStyle(node) ?? null;
+        if (selfCssHidden(node, style)) {
+            return false;
+        }
+        if (node === portal) {
+            return true;
+        }
+    }
+    return false;
 }
-function selfCssHidden(el, style) {
+function selfCssHidden(el, style, includeVisibility = true) {
     if (isHtmlElement(el) && el.hidden) {
         return true;
     }
@@ -34,9 +69,7 @@ function selfCssHidden(el, style) {
         return true;
     }
     if (style !== null) {
-        if ('none' === style.display ||
-            'hidden' === style.visibility ||
-            'collapse' === style.visibility) {
+        if ('none' === style.display || (includeVisibility && visibilityHidden(style))) {
             return true;
         }
         if (0 === Number.parseFloat(style.opacity || '1') && !stalledFade(el)) {
@@ -48,6 +81,9 @@ function selfCssHidden(el, style) {
     }
     return false;
 }
+function visibilityHidden(style) {
+    return 'hidden' === style?.visibility || 'collapse' === style?.visibility;
+}
 function clippedAway(style) {
     const rect = /^rect\((.*)\)$/.exec(style.getPropertyValue('clip').trim());
     if (null !== rect && ('absolute' === style.position || 'fixed' === style.position)) {
@@ -75,7 +111,7 @@ function selfHidden(el, style) {
     if ('true' === el.getAttribute('aria-hidden') && !hiddenByAnOverlay(el)) {
         return true;
     }
-    return selfCssHidden(el, style);
+    return selfCssHidden(el, style, false);
 }
 export function isHiddenByAriaOnly(el) {
     let foundAriaHidden = false;
@@ -85,7 +121,7 @@ export function isHiddenByAriaOnly(el) {
             foundAriaHidden = true;
         }
         const style = current.ownerDocument.defaultView?.getComputedStyle(current) ?? null;
-        if (selfCssHidden(current, style)) {
+        if (selfCssHidden(current, style, current === el)) {
             return false;
         }
         current = parentAcrossShadowBoundary(current);
@@ -99,13 +135,63 @@ export function isRenderedOutsideAriaHidden(el) {
             return false;
         }
         const style = current.ownerDocument.defaultView?.getComputedStyle(current) ?? null;
-        if (selfCssHidden(current, style)) {
+        if (selfCssHidden(current, style, current === el)) {
             return false;
         }
         current = parentAcrossShadowBoundary(current);
     }
     return true;
 }
+const BACKFACE_VISIBILITY_HIDDEN = 'hidden';
+function localTransform(style) {
+    if ('undefined' === typeof DOMMatrix) {
+        return null;
+    }
+    try {
+        const transform = style?.transform;
+        return undefined === transform || '' === transform || 'none' === transform
+            ? new DOMMatrix()
+            : new DOMMatrix(transform);
+    }
+    catch {
+        return null;
+    }
+}
+function backFaceTowardViewer(matrix) {
+    return Number.isFinite(matrix.m33) && 0 > matrix.m33;
+}
+function backfaceHidden(el, memo) {
+    const chain = [];
+    let declares = false;
+    for (let current = el; null !== current; current = parentAcrossShadowBoundary(current)) {
+        const style = ownVisibilityInfo(current, memo).style;
+        if (BACKFACE_VISIBILITY_HIDDEN === style?.backfaceVisibility) {
+            declares = true;
+        }
+        chain.push(current);
+    }
+    if (!declares) {
+        return false;
+    }
+    let composed = null;
+    for (let index = chain.length - 1; index >= 0; index -= 1) {
+        const current = chain[index];
+        if (undefined === current) {
+            return false;
+        }
+        const style = ownVisibilityInfo(current, memo).style;
+        const local = localTransform(style);
+        if (null === local) {
+            return false;
+        }
+        composed = null === composed ? local : composed.multiply(local);
+        if (BACKFACE_VISIBILITY_HIDDEN === style?.backfaceVisibility &&
+            backFaceTowardViewer(composed)) {
+            return true;
+        }
+    }
+    return false;
+}
 const CLIPPING_OVERFLOW = new Set(['hidden', 'clip']);
 const SCROLLING_OVERFLOW = new Set(['auto', 'scroll']);
 const NON_CLIPPING_DISPLAY = new Set([
@@ -154,9 +240,32 @@ function visibilityInfoMemo(memo) {
     }
     return info;
 }
+function underKnownHidden(el, memo) {
+    for (let up = parentAcrossShadowBoundary(el); null !== up; up = parentAcrossShadowBoundary(up)) {
+        const known = memo.get(up);
+        if (known !== undefined) {
+            return known.hidden;
+        }
+    }
+    return false;
+}
 function ownVisibilityInfo(el, memo) {
     let info = memo.get(el);
     if (info === undefined) {
+        if (underKnownHidden(el, memo)) {
+            info = {
+                hidden: true,
+                style: null,
+                parent: null,
+                clipX: false,
+                clipY: false,
+                scrollX: false,
+                scrollY: false,
+                hasClipping: false,
+            };
+            memo.set(el, info);
+            return info;
+        }
         const style = el.ownerDocument.defaultView?.getComputedStyle(el) ?? null;
         if (selfHidden(el, style)) {
             info = {
@@ -305,6 +414,9 @@ function collapsed(el, memo) {
             (own.clipY && 0 === r.height) ||
             (own.clipX && own.clipY && r.width <= 1 && r.height <= 1)));
 }
+export function isHiddenSubtree(el, memo) {
+    return ownVisibilityInfo(el, visibilityInfoMemo(memo)).hidden;
+}
 export function isVisible(el, memo) {
     if (!el.isConnected) {
         return false;
@@ -314,7 +426,10 @@ export function isVisible(el, memo) {
         return cached;
     }
     const info = visibilityInfoMemo(memo);
-    const result = visibleBounds(el, info, undefined, true) !== null && !collapsed(el, info);
+    const result = !visibilityHidden(ownVisibilityInfo(el, info).style) &&
+        visibleBounds(el, info, undefined, true) !== null &&
+        !collapsed(el, info) &&
+        !backfaceHidden(el, info);
     if (memo !== undefined) {
         memo.set(el, result);
     }

package/dist/observers/canvas.d.ts

@@ -13,6 +13,7 @@ export declare function digestPixels(data: Uint8ClampedArray): {
 interface CanvasOptions {
     sample?: (canvas: HTMLCanvasElement) => CanvasSample | undefined;
     every?: (run: () => void, ms: number) => () => void;
+    onScreen?: (canvas: HTMLCanvasElement) => boolean;
 }
 export declare function canvasAfterAct(): void;
 export declare function installCanvas(emit: Emit, opts?: CanvasOptions): Teardown;

package/dist/observers/canvas.js

@@ -1,6 +1,7 @@
 import { CanvasTrigger, EventType } from '@reticlehq/core';
 export { CanvasTrigger };
 import { refs } from '../dom/addressing/refs.js';
+import { isInViewport } from '../dom/visibility.js';
 import { nativeSetInterval } from '../timers/native/native-timers.js';
 import { observeSafely, observeValue } from './types.js';
 const SIDE = 16;
@@ -47,6 +48,7 @@ export function canvasAfterAct() {
 export function installCanvas(emit, opts = {}) {
     const sample = opts.sample ?? sampleCanvas;
     const every = opts.every ?? nativeSetInterval;
+    const onScreen = opts.onScreen ?? ((canvas) => isInViewport(canvas));
     const last = new WeakMap();
     const look = (trigger) => {
         observeSafely(() => {
@@ -61,7 +63,14 @@ export function installCanvas(emit, opts = {}) {
                     continue;
                 }
                 last.set(canvas, digest);
-                emit(EventType.CANVAS_DIGEST, { digest, width: read.width, height: read.height, mean, trigger }, refs.refFor(canvas));
+                emit(EventType.CANVAS_DIGEST, {
+                    digest,
+                    width: read.width,
+                    height: read.height,
+                    mean,
+                    trigger,
+                    visible: onScreen(canvas),
+                }, refs.refFor(canvas));
             }
         });
     };

package/dist/observers/console.js

@@ -1,4 +1,4 @@
-import { EventType, TRANSPORT_LIMITS } from '@reticlehq/core';
+import { DROPPED_PRE_ATTACH_FIELD, EventType, PRE_ATTACH_FIELD, RETICLE_PRE_ATTACH_ERRORS, TRANSPORT_LIMITS, } from '@reticlehq/core';
 import { observeSafely } from './types.js';
 import { safeStringify } from '../security/serialization.js';
 import { requireCapturedMethod } from '../util/captured-method.js';
@@ -15,44 +15,48 @@ const METHOD_EVENT = {
 function stringifyArgs(args) {
     return args
         .map((a) => {
-        if ('string' === typeof a)
+        if ('string' === typeof a) {
             return a;
-        if (a instanceof Error)
+        }
+        if (a instanceof Error) {
             return a.message;
+        }
         return safeStringify(a);
     })
         .join(' ');
 }
 const MAX_STACK_LEN = TRANSPORT_LIMITS.MAX_STACK_LENGTH;
 function capStack(stack) {
-    if (stack === undefined || 0 === stack.length)
+    if (stack === undefined || 0 === stack.length) {
         return undefined;
+    }
     return stack.length > MAX_STACK_LEN ? stack.slice(0, MAX_STACK_LEN) : stack;
 }
-function firstErrorStack(args) {
-    for (const arg of args) {
-        if (arg instanceof Error)
-            return capStack(arg.stack);
-    }
-    return undefined;
+function stackOf(value) {
+    const stack = value instanceof Error ? capStack(value.stack) : undefined;
+    return stack === undefined ? {} : { stack };
 }
 export function installConsole(emit) {
     const methods = ['log', 'warn', 'error', 'info', 'debug'];
     const originals = new Map();
     const patched = new Map();
+    let marks = {};
+    const report = (method, args) => {
+        observeSafely(() => {
+            emit(METHOD_EVENT[method], {
+                ...marks,
+                message: stringifyArgs(args),
+                ...('error' === method ? stackOf(args.find((arg) => arg instanceof Error)) : {}),
+            });
+        });
+    };
     for (const method of methods) {
         const original = requireCapturedMethod(console, method);
         originals.set(method, original);
         const callOriginal = original.bind(console);
         const wrapper = (...args) => {
             callOriginal(...args);
-            observeSafely(() => {
-                const stack = 'error' === method ? firstErrorStack(args) : undefined;
-                emit(METHOD_EVENT[method], {
-                    message: stringifyArgs(args),
-                    ...(stack === undefined ? {} : { stack }),
-                });
-            });
+            report(method, args);
         };
         patched.set(method, wrapper);
         console[method] = wrapper;
@@ -60,9 +64,11 @@ export function installConsole(emit) {
     const repeats = createRepeatLimiter();
     const emitError = (payload) => {
         const decision = repeats.admit(payload);
-        if (!decision.emit)
+        if (!decision.emit) {
             return;
+        }
         emit(EventType.ERROR_UNCAUGHT, {
+            ...marks,
             ...payload,
             ...(undefined === decision.repeats ? {} : { repeats: decision.repeats }),
         });
@@ -70,8 +76,9 @@ export function installConsole(emit) {
     const onError = (event) => {
         if (!(event instanceof ErrorEvent)) {
             const target = event.target;
-            if (!(target instanceof Element) || target === document)
+            if (!(target instanceof Element) || target === document) {
                 return;
+            }
             const tag = target.tagName.toLowerCase();
             const url = target.getAttribute('src') ?? target.getAttribute('href') ?? '';
             observeSafely(() => {
@@ -81,37 +88,32 @@ export function installConsole(emit) {
             return;
         }
         observeSafely(() => {
-            const stack = capStack(event.error instanceof Error ? event.error.stack : undefined);
-            const payload = {
+            emitError({
                 message: event.message,
                 source: event.filename,
                 line: event.lineno,
-                ...(stack === undefined ? {} : { stack }),
-            };
-            emitError(payload);
+                ...stackOf(event.error),
+            });
         });
     };
     const onRejection = (event) => {
         observeSafely(() => {
             const reason = event.reason;
-            const stack = capStack(reason instanceof Error ? reason.stack : undefined);
-            const payload = {
+            emitError({
                 message: reason instanceof Error ? reason.message : String(reason),
                 kind: 'unhandledrejection',
-                ...(stack === undefined ? {} : { stack }),
-            };
-            emitError(payload);
+                ...stackOf(reason),
+            });
         });
     };
     const onViolation = (event) => {
-        const what = 0 === event.blockedURI.length ? 'inline content' : event.blockedURI;
+        const uri = event.blockedURI;
+        const what = 0 === uri.length ? 'inline content' : uri;
         const reportOnly = REPORT_ONLY === event.disposition;
         emit(reportOnly ? EventType.CONSOLE_WARN : EventType.CONSOLE_ERROR, {
-            message: reportOnly
-                ? `[Report Only] Content Security Policy directive: ${event.violatedDirective} would block ${what}`
-                : `Content Security Policy directive: ${event.violatedDirective} blocked ${what}`,
+            message: `${reportOnly ? '[Report Only] ' : ''}Content Security Policy directive: ${event.violatedDirective} ${reportOnly ? 'would block' : 'blocked'} ${what}`,
             kind: CSP_VIOLATION_EVENT,
-            ...(0 === event.blockedURI.length ? {} : { source: event.blockedURI }),
+            ...(0 === uri.length ? {} : { source: uri }),
         });
     };
     const listeners = new AbortController();
@@ -119,10 +121,19 @@ export function installConsole(emit) {
     window.addEventListener('error', onError, { capture: true, signal });
     window.addEventListener('unhandledrejection', onRejection, { signal });
     window.addEventListener(CSP_VIOLATION_EVENT, onViolation, { capture: true, signal });
+    observeSafely(() => {
+        const mark = { [PRE_ATTACH_FIELD]: true };
+        marks = mark;
+        globalThis[RETICLE_PRE_ATTACH_ERRORS]?.drain(onError, onRejection, report, (count) => {
+            mark[DROPPED_PRE_ATTACH_FIELD] = Number.isInteger(count) && count > 0 ? count : undefined;
+        });
+    });
+    marks = {};
     return () => {
         for (const [method, original] of originals) {
-            if (console[method] === patched.get(method))
+            if (console[method] === patched.get(method)) {
                 console[method] = original;
+            }
         }
         listeners.abort();
     };

package/dist/observers/dom.js

@@ -1,5 +1,5 @@
 import { readTestId, testIdSelector } from '../dom/addressing/testid-attr.js';
-import { EventType, REDACTED_VALUE, TruncationChannel } from '@reticlehq/core';
+import { EventType, LivePoliteness, REDACTED_VALUE, TruncationChannel } from '@reticlehq/core';
 import { getAccessibleName, getRole, isSensitiveField } from '../dom/a11y.js';
 import { isVisible } from '../dom/visibility.js';
 import { refs } from '../dom/addressing/refs.js';
@@ -108,6 +108,24 @@ const named = (el) => {
     const testid = testidNear(el);
     return testid === undefined ? {} : { testid };
 };
+const ALERT_REGION = '[role="alert"]';
+const LIVE_REGION = `[aria-live],${ALERT_REGION},[role="status"]`;
+const liveOf = (el) => {
+    const region = el.closest(LIVE_REGION);
+    if (null === region) {
+        return {};
+    }
+    const level = region.getAttribute('aria-live');
+    if (level === LivePoliteness.ASSERTIVE || level === LivePoliteness.POLITE) {
+        return { live: level };
+    }
+    if (level !== null) {
+        return {};
+    }
+    return {
+        live: region.matches(ALERT_REGION) ? LivePoliteness.ASSERTIVE : LivePoliteness.POLITE,
+    };
+};
 export function installDom(emit) {
     const stopRegistry = installShadowRegistry();
     const observer = new MutationObserver((records) => {
@@ -149,7 +167,7 @@ export function installDom(emit) {
                         ? REDACTED_VALUE
                         : (record.target.textContent ?? '').trim().slice(0, 80);
                     const old = hide ? undefined : capValue(record.oldValue?.trim() ?? null);
-                    emit(EventType.DOM_TEXT, { text, ...(old === undefined ? {} : { old }), ...named(parent) }, refs.refFor(parent));
+                    emit(EventType.DOM_TEXT, { text, ...(old === undefined ? {} : { old }), ...named(parent), ...liveOf(parent) }, refs.refFor(parent));
                 }
                 continue;
             }
@@ -164,7 +182,7 @@ export function installDom(emit) {
                         const hide = isSensitiveField(parent);
                         const text = hide ? REDACTED_VALUE : (parent.textContent ?? '').trim().slice(0, 80);
                         const old = hide ? undefined : capValue(textOf(record.removedNodes) ?? null);
-                        emit(EventType.DOM_TEXT, { text, ...(old === undefined ? {} : { old }), ...named(parent) }, refs.refFor(parent));
+                        emit(EventType.DOM_TEXT, { text, ...(old === undefined ? {} : { old }), ...named(parent), ...liveOf(parent) }, refs.refFor(parent));
                     }
                 }
             }
@@ -226,7 +244,13 @@ export function installDom(emit) {
                 }
                 const { role, name } = gone;
                 removed += 1;
-                emit(EventType.DOM_REMOVED, { role, name, region: regionKeyOf(record.target) });
+                const testid = readTestId(gone.el) ?? readTestId(node);
+                emit(EventType.DOM_REMOVED, {
+                    role,
+                    name,
+                    region: regionKeyOf(record.target),
+                    ...(null === testid ? {} : { testid }),
+                });
             }
         }
         if (dropped > 0) {

package/dist/observers/net-detail/resource-timing.d.ts

@@ -0,0 +1,12 @@
+import { EventType } from '@reticlehq/core';
+type EmitNet = (type: EventType, data: Record<string, unknown>) => void;
+export declare function absoluteUrl(raw: string): string;
+export interface ResourceTimingInput {
+    emit: EmitNet;
+    installedAt: number;
+    nextId: () => string;
+    reportedNetUrls: Set<string>;
+    patchedNetUrls: ReadonlySet<string>;
+}
+export declare function observeResourceTiming(input: ResourceTimingInput): PerformanceObserver | undefined;
+export {};

package/dist/observers/net-detail/resource-timing.js

@@ -0,0 +1,69 @@
+import { EventType } from '@reticlehq/core';
+import { netUrlFields } from './network-redact.js';
+const RESOURCE_CAP = 200;
+export function absoluteUrl(raw) {
+    try {
+        return new URL(raw, location.href).href;
+    }
+    catch {
+        return raw;
+    }
+}
+function statusFields(entry, withOk) {
+    const status = entry.responseStatus ?? 0;
+    if (status <= 0) {
+        return {};
+    }
+    return withOk ? { status, ok: status >= 200 && status < 400 } : { status };
+}
+export function observeResourceTiming(input) {
+    const { emit, installedAt, nextId, reportedNetUrls, patchedNetUrls } = input;
+    if ('undefined' === typeof PerformanceObserver) {
+        return undefined;
+    }
+    let subresourceEvents = 0;
+    let unpatchedEvents = 0;
+    const onEntry = (entry) => {
+        const type = entry.initiatorType || 'other';
+        const rawUrl = entry.name;
+        const patched = 'fetch' === type || 'xmlhttprequest' === type;
+        if (patched && entry.startTime >= installedAt) {
+            if (patchedNetUrls.has(absoluteUrl(rawUrl)) || unpatchedEvents >= RESOURCE_CAP) {
+                return;
+            }
+            unpatchedEvents += 1;
+            emit(EventType.NET_UNPATCHED, {
+                ...netUrlFields(rawUrl),
+                initiator: type,
+                ...statusFields(entry, false),
+            });
+            return;
+        }
+        if (reportedNetUrls.has(rawUrl) || subresourceEvents >= RESOURCE_CAP) {
+            return;
+        }
+        reportedNetUrls.add(rawUrl);
+        subresourceEvents += 1;
+        emit(EventType.NET_REQUEST, {
+            id: nextId(),
+            method: 'GET',
+            ...netUrlFields(rawUrl),
+            durationMs: Math.round(entry.duration),
+            initiator: type,
+            ...(entry.transferSize > 0 ? { transferSize: entry.transferSize } : {}),
+            ...statusFields(entry, true),
+        });
+    };
+    try {
+        const observer = new PerformanceObserver((list) => {
+            for (const raw of list.getEntries()) {
+                onEntry(raw);
+            }
+        });
+        observer.observe({ type: 'resource', buffered: true });
+        return observer;
+    }
+    catch {
+        return undefined;
+    }
+}

package/dist/observers/network.js

@@ -7,6 +7,7 @@ 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';
+import { absoluteUrl, observeResourceTiming } from './net-detail/resource-timing.js';
 export { redactUrl, netUrlFields };
 const ShapeToken = { NULL: '0', STRING: 's', NUMBER: 'n', BOOLEAN: 'b', OTHER: '?' };
 function shapeOf(value) {
@@ -228,6 +229,7 @@ export function installNetwork(emit, opts = {}) {
     }
     const owner = {};
     pageSlots()[PAGE_CAPTURE] = owner;
+    const installedAt = performance.now();
     const captureBodies = true === opts.captureBodies;
     const bodyCapture = new AbortController();
     const captureErrorBodies = false !== opts.captureErrorBodies;
@@ -239,8 +241,11 @@ export function installNetwork(emit, opts = {}) {
     }
     let seq = 0;
     const nextId = () => `n${++seq}`;
+    const reportedNetUrls = new Set();
+    const patchedNetUrls = new Set();
     window.fetch = async (input, init) => {
         const rawUrl = urlOf(input);
+        patchedNetUrls.add(absoluteUrl(rawUrl));
         if (true === opts.ignore?.(rawUrl)) {
             return callFetch(input, init);
         }
@@ -353,6 +358,7 @@ export function installNetwork(emit, opts = {}) {
                 rawUrl: String(url),
                 start: 0,
             });
+            patchedNetUrls.add(absoluteUrl(String(url)));
         });
         callOpen.call(this, method, url, ...rest);
     };
@@ -537,50 +543,13 @@ export function installNetwork(emit, opts = {}) {
         };
         navProto.sendBeacon = patchedBeacon;
     }
-    const reportedNetUrls = new Set();
-    let subresourceEvents = 0;
-    const SUBRESOURCE_CAP = 200;
-    let subresourceObserver;
-    if (typeof PerformanceObserver !== 'undefined') {
-        try {
-            const observer = new PerformanceObserver((list) => {
-                for (const raw of list.getEntries()) {
-                    const entry = raw;
-                    if (subresourceEvents >= SUBRESOURCE_CAP) {
-                        return;
-                    }
-                    const type = entry.initiatorType || 'other';
-                    if ('fetch' === type || 'xmlhttprequest' === type) {
-                        continue;
-                    }
-                    const rawUrl = entry.name;
-                    if (reportedNetUrls.has(rawUrl)) {
-                        continue;
-                    }
-                    reportedNetUrls.add(rawUrl);
-                    subresourceEvents += 1;
-                    emit(EventType.NET_REQUEST, {
-                        id: nextId(),
-                        method: 'GET',
-                        ...netUrlFields(rawUrl),
-                        durationMs: Math.round(entry.duration),
-                        initiator: type,
-                        ...(entry.transferSize > 0 ? { transferSize: entry.transferSize } : {}),
-                        ...((entry.responseStatus ?? 0) > 0
-                            ? {
-                                status: entry.responseStatus,
-                                ok: (entry.responseStatus ?? 0) >= 200 && (entry.responseStatus ?? 0) < 400,
-                            }
-                            : {}),
-                    });
-                }
-            });
-            subresourceObserver = observer;
-            observer.observe({ type: 'resource', buffered: true });
-        }
-        catch {
-        }
-    }
+    const subresourceObserver = observeResourceTiming({
+        emit,
+        installedAt,
+        nextId,
+        reportedNetUrls,
+        patchedNetUrls,
+    });
     return () => {
         if (pageSlots()[PAGE_CAPTURE] === owner) {
             delete pageSlots()[PAGE_CAPTURE];