@bugsession/react-native 0.1.0-beta.4 → 0.1.0-beta.5

package/README.md

@@ -58,7 +58,11 @@ React Navigation integration: call the function returned by `BugSession.navigati
 
 Render errors are caught by Expo Router before they reach the global handler. Export the SDK's boundary from your root layout so they are captured: `export const ErrorBoundary = BugSession.ErrorBoundary;`. Unhandled promise rejections are captured in every build; in development they still reach LogBox.
 
-`configure()` installs fetch, console (`log`, `info`, `debug`, `warn`, `error`), error and rejection hooks for the app's lifetime. By default the SDK keeps the last 60 seconds of these app events (at most 500; never video or audio) in memory. When a recording starts, they are attached with negative timestamps and `preRecording: true`, so a bug that happened just before the tester pressed record keeps its context. Nothing leaves the device unless a recording starts. Set `preRecordSeconds` (maximum 300) to change the window, or `0` to collect only while recording. Recorders deployed before pre-record support accept the recording and ignore these events.
+`configure()` installs fetch, XMLHttpRequest (axios and most HTTP clients), console (`log`, `info`, `debug`, `warn`, `error`), error and rejection hooks for the app's lifetime; each request is recorded once, and the SDK's own uploads are skipped. By default the SDK keeps the last 60 seconds of these app events (at most 500; never video or audio) in memory. When a recording starts, they are attached with negative timestamps and `preRecording: true`, so a bug that happened just before the tester pressed record keeps its context. After Stop, events keep being collected for `postRecordSeconds` (default 5, maximum 30, `0` disables) while the video uploads, and are attached with `postRecording: true`, so the response to the tester's last tap is kept. Nothing leaves the device unless a recording starts. Set `preRecordSeconds` (maximum 300) to change the earlier window, or `0` to collect only while recording. Recorders deployed before pre- or post-record support accept the recording and ignore these events.
+
+Failed requests (status 400 or higher, text or JSON responses) include `responseExcerpt`: the first 1,000 characters of the response body, with JSON fields named like passwords, tokens, secrets, keys, cookies and sessions masked, plus the usual bearer and URL redaction. Successful responses and request bodies are never captured.
+
+Wrap your navigator once in `<BugSession.Capture>` to record every tap as an `action` event with `auto: true`, the tap position in points, the current screen and, when one can be read, the touched element's label (accessibility label, `aria-label`, title, placeholder, visible text or `testID`; never a text field's value). It only observes touches and never blocks gestures. `BugSession.Touchable` and `trackAction` remain available for explicit names.
 
 `<BugSession.Trigger />` renders a slim tab docked to a screen edge, so it never covers bottom buttons or tab bars. Tap it to start recording. Drag it along the edge or across to the other side; it remembers its placement while the app is open. Render it once above the app navigator. `position` picks the initial edge and half (`bottom-right` by default), `offset` the distance from the top or bottom safe area, and `draggable={false}` locks it. Supply `children` to replace the idle record mark.
 

package/dist/core.d.ts

@@ -51,4 +51,22 @@ export declare class Telemetry implements TelemetrySink {
     end(): void;
     private prune;
 }
+/** Response excerpt for a failed request: text only, at most 1000 characters, secrets masked. */
+export declare function safeBody(text: unknown): string | undefined;
+/** Requests to these URLs (the recorder itself) are never recorded. */
+export declare function ignoreRequests(match: (url: string) => boolean): void;
 export declare function instrumentFetch(original: typeof fetch, collector: TelemetrySink): typeof fetch;
+type XhrLike = {
+    open(method: string, url: string | URL, ...rest: unknown[]): void;
+    send(body?: unknown): void;
+    addEventListener(type: string, listener: () => void): void;
+    status: number;
+    responseType?: string;
+    responseText?: string;
+    getResponseHeader?(name: string): string | null;
+};
+/** Records XMLHttpRequest traffic (axios and most HTTP libraries) that does not go through fetch. */
+export declare function instrumentXhr(Xhr: {
+    prototype: XhrLike;
+} | undefined, collector: TelemetrySink): void;
+export {};

package/dist/core.js

@@ -3,7 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Telemetry = exports.MAX_PRE_RECORD_MS = exports.Collector = exports.SessionClock = void 0;
 exports.safeUrl = safeUrl;
 exports.safeText = safeText;
+exports.safeBody = safeBody;
+exports.ignoreRequests = ignoreRequests;
 exports.instrumentFetch = instrumentFetch;
+exports.instrumentXhr = instrumentXhr;
 function safeUrl(input) {
     try {
         const u = new URL(input, 'http://relative.invalid');
@@ -110,14 +113,48 @@ exports.Telemetry = Telemetry;
 function shiftRequestTime(data, offsetMs) {
     return typeof data.requestTimestampMs === 'number' ? { ...data, requestTimestampMs: data.requestTimestampMs - offsetMs } : data;
 }
+/** Response excerpt for a failed request: text only, at most 1000 characters, secrets masked. */
+function safeBody(text) {
+    if (typeof text !== 'string' || !text.trim())
+        return undefined;
+    return safeText(text.slice(0, 4000)
+        .replace(/("(?:[\w-]*(?:password|passwd|secret|token|authorization|cookie|api[-_]?key|session)[\w-]*)"\s*:\s*)("(?:[^"\\]|\\.)*"|[^,}\s]+)/gi, '$1"[redacted]"'))
+        .slice(0, 1000);
+}
+const textual = /json|text|xml|html|problem/i;
+const sdkRequests = { ignored: (_url) => false };
+/** Requests to these URLs (the recorder itself) are never recorded. */
+function ignoreRequests(match) { sdkRequests.ignored = match; }
+// React Native's fetch is built on XMLHttpRequest. While a fetch call creates its
+// request synchronously, the XHR hook skips it so each request is recorded once.
+let insideFetch = 0;
 function instrumentFetch(original, collector) {
     return (async (input, init) => {
-        const url = safeUrl(typeof input === 'string' ? input : input instanceof URL ? input.href : input.url);
+        const rawUrl = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url;
         const method = (init?.method ?? (typeof input === 'object' && 'method' in input ? input.method : 'GET')).toUpperCase();
         const start = collector.clock.now();
+        let pending;
+        insideFetch++;
+        try {
+            pending = original(input, init);
+        }
+        finally {
+            insideFetch--;
+        }
+        if (sdkRequests.ignored(rawUrl))
+            return pending;
+        const url = safeUrl(rawUrl);
         try {
-            const response = await original(input, init);
-            collector.add('network', { requestTimestampMs: start, method, url, status: response.status, durationMs: collector.clock.now() - start });
+            const response = await pending;
+            const durationMs = collector.clock.now() - start;
+            let responseExcerpt;
+            if (response.status >= 400 && textual.test(response.headers?.get?.('content-type') ?? 'text')) {
+                responseExcerpt = await Promise.race([
+                    response.clone().text().then(safeBody, () => undefined),
+                    new Promise(resolve => setTimeout(() => resolve(undefined), 500)),
+                ]);
+            }
+            collector.add('network', { requestTimestampMs: start, method, url, status: response.status, durationMs, ...(responseExcerpt ? { responseExcerpt } : {}) });
             return response;
         }
         catch (error) {
@@ -126,3 +163,40 @@ function instrumentFetch(original, collector) {
         }
     });
 }
+/** Records XMLHttpRequest traffic (axios and most HTTP libraries) that does not go through fetch. */
+function instrumentXhr(Xhr, collector) {
+    if (!Xhr?.prototype?.open || !Xhr.prototype.send)
+        return;
+    const proto = Xhr.prototype;
+    const open = proto.open, send = proto.send;
+    const meta = new WeakMap();
+    proto.open = function (method, url, ...rest) {
+        const href = String(url);
+        if (!insideFetch && !sdkRequests.ignored(href))
+            meta.set(this, { method: String(method || 'GET').toUpperCase(), url: safeUrl(href) });
+        else
+            meta.delete(this);
+        return open.call(this, method, url, ...rest);
+    };
+    proto.send = function (body) {
+        const request = meta.get(this);
+        if (request) {
+            const start = collector.clock.now();
+            let error;
+            for (const type of ['error', 'timeout', 'abort'])
+                this.addEventListener(type, () => { error ?? (error = `Request ${type}`); });
+            this.addEventListener('loadend', () => {
+                const status = error || !this.status ? null : this.status;
+                let responseExcerpt;
+                try {
+                    if (status !== null && status >= 400 && (!this.responseType || this.responseType === 'text') && textual.test(this.getResponseHeader?.('content-type') ?? 'text'))
+                        responseExcerpt = safeBody(this.responseText);
+                }
+                catch { /* response not readable */ }
+                collector.add('network', { requestTimestampMs: start, method: request.method, url: request.url, status, durationMs: collector.clock.now() - start, client: 'xhr',
+                    ...(error ? { error } : {}), ...(responseExcerpt ? { responseExcerpt } : {}) });
+            });
+        }
+        return send.call(this, body);
+    };
+}

package/dist/index.d.ts

@@ -22,6 +22,11 @@ export type BugSessionOptions = {
      * kept in memory before a recording starts and attached to it. Defaults to 60, max 300; 0 disables.
      */
     preRecordSeconds?: number;
+    /**
+     * Seconds of app events still collected after the tester stops, while the video uploads,
+     * so a request or error that lands just after Stop is kept. Defaults to 5, max 30; 0 disables.
+     */
+    postRecordSeconds?: number;
 };
 export type BugSessionErrorBoundaryProps = {
     error: Error;
@@ -39,6 +44,13 @@ export declare const BugSession: {
     }): void;
     trackNavigation(screen: string): void;
     captureError: typeof captureError;
+    /**
+     * Wrap the app once (inside the navigator's container, around your screens) to record
+     * every tap automatically: position, current screen and the element's label when available.
+     */
+    Capture: ({ children, style, ...props }: import("react-native").ViewProps & {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
     Trigger: ({ position, offset, draggable, style, accessibilityLabel, children, onError, maxDurationSeconds }: import("./trigger").BugSessionTriggerProps) => React.JSX.Element;
     /**
      * Expo Router error boundary that reports render errors (which never reach the

package/dist/index.js

@@ -9,6 +9,7 @@ const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
 const trigger_1 = require("./trigger");
 const core_1 = require("./core");
+const touches_1 = require("./touches");
 const capture_1 = require("./capture");
 var core_2 = require("./core");
 Object.defineProperty(exports, "Collector", { enumerable: true, get: function () { return core_2.Collector; } });
@@ -22,6 +23,7 @@ let collector = null;
 const telemetry = new core_1.Telemetry();
 let installed = false;
 let preRecordEvents = [];
+const MAX_POST_RECORD_SECONDS = 30;
 let session = null;
 let state = 'idle';
 let currentScreen = 'Home';
@@ -100,11 +102,14 @@ async function request(path, data) {
 // recording starts can be attached to it (see Telemetry).
 function install() {
     installed = true;
+    // The recorder itself, and in development Metro's own symbolication and log requests.
+    (0, core_1.ignoreRequests)(url => (!!options && url.startsWith(options.recorderUrl)) || (__DEV__ && /\/(symbolicate|logs)(\?|$)/.test(url)));
     globalThis.fetch = (0, core_1.instrumentFetch)(rawFetch, telemetry);
+    (0, core_1.instrumentXhr)(globalThis.XMLHttpRequest, telemetry);
     for (const level of ['log', 'info', 'debug', 'warn', 'error']) {
         const original = console[level];
         console[level] = (...args) => {
-            if (telemetry.active) {
+            if (telemetry.active && !(level === 'error' && repeatsCapturedError(args))) {
                 const error = args.find((a) => a instanceof Error);
                 telemetry.add(level === 'error' ? 'error' : 'log', { level, message: args.map(core_1.safeText).join(' '), source: 'console', stack: error?.stack ? (0, core_1.safeText)(error.stack) : undefined, screen: currentScreen });
             }
@@ -146,9 +151,26 @@ function rejectionMessage(rejection) {
         return String(rejection);
     }
 }
+// React Native also prints captured errors (such as unhandled rejections in development)
+// through console.error; those repeats are skipped for a moment after capture.
+const recentErrors = [];
+function repeatsCapturedError(args) {
+    const now = Date.now();
+    while (recentErrors.length && now - recentErrors[0].at > 2000)
+        recentErrors.shift();
+    if (!recentErrors.length)
+        return false;
+    const printed = args.map(a => a instanceof Error ? a.message : typeof a === 'string' ? a : '').join(' ');
+    return recentErrors.some(e => e.message.length > 8 && printed.includes(e.message));
+}
 function captureError(error, source = 'boundary') {
     if (!telemetry.active)
         return;
+    const message = error instanceof Error ? error.message : typeof error === 'string' ? error : '';
+    if (message && repeatsCapturedError([message]))
+        return;
+    if (message)
+        recentErrors.push({ message: message.slice(0, 200), at: Date.now() });
     telemetry.add('error', { source, message: (0, core_1.safeText)(error), stack: error instanceof Error ? (0, core_1.safeText)(error.stack ?? '') : undefined, screen: currentScreen });
 }
 exports.BugSession = {
@@ -238,10 +260,20 @@ exports.BugSession = {
         const c = collector;
         const active = session;
         c.add('session-stop', {});
-        telemetry.end();
-        // Sent separately from `events` so recorders that predate pre-record support ignore them.
+        const stoppedAtMs = c.clock.now();
+        const postRecordMs = Math.max(0, Math.min(options.postRecordSeconds ?? 5, MAX_POST_RECORD_SECONDS)) * 1000;
+        // Sent separately from `events` so recorders that predate pre/post-record support ignore them.
         const before = preRecordEvents;
         preRecordEvents = [];
+        // App events keep flowing to this session while media uploads; anything after Stop is
+        // reported separately as post-recording evidence.
+        const split = () => {
+            telemetry.end();
+            return {
+                events: c.events.filter(e => e.timestampMs <= stoppedAtMs),
+                after: c.events.filter(e => e.timestampMs > stoppedAtMs && e.timestampMs <= stoppedAtMs + postRecordMs).slice(0, 1000).map(e => ({ ...e, postRecording: true })),
+            };
+        };
         try {
             let media;
             if (active.captureBackend === 'replaykit') {
@@ -271,8 +303,13 @@ exports.BugSession = {
                 await options.audio.upload(`${options.recorderUrl}/sessions/${active.id}/audio`, uri, authHeaders());
                 media = { ...active, audioEndMs };
             }
+            const remainingMs = stoppedAtMs + postRecordMs - c.clock.now();
+            if (remainingMs > 0)
+                await new Promise(resolve => setTimeout(resolve, remainingMs));
+            const { events, after } = split();
             const result = await request(`/sessions/${active.id}/stop`, {
-                durationMs: c.clock.now(), events: c.events, droppedEvents: c.dropped, preRecordEvents: before,
+                durationMs: stoppedAtMs, events, droppedEvents: c.dropped, preRecordEvents: before,
+                ...(after.length ? { postRecordEvents: after } : {}),
                 media,
             });
             setPhase({ kind: 'sent' });
@@ -282,11 +319,13 @@ exports.BugSession = {
             if (active.captureBackend !== 'adb')
                 await options.capture.cancel().catch(() => { });
             // Release the device recorder, but preserve partial files for recovery.
-            await request(`/sessions/${active.id}/abort`, { reason: (0, core_1.safeText)(error), events: c.events, preRecordEvents: before, media: active, durationMs: c.clock.now() }).catch(() => { });
+            const { events, after } = split();
+            await request(`/sessions/${active.id}/abort`, { reason: (0, core_1.safeText)(error), events, preRecordEvents: before, ...(after.length ? { postRecordEvents: after } : {}), media: active, durationMs: stoppedAtMs }).catch(() => { });
             setPhase({ kind: 'failed', message: (0, core_1.safeText)(error) });
             throw error;
         }
         finally {
+            telemetry.end();
             collector = null;
             session = null;
             state = 'idle';
@@ -302,6 +341,13 @@ exports.BugSession = {
         currentScreen = screen;
     },
     captureError,
+    /**
+     * Wrap the app once (inside the navigator's container, around your screens) to record
+     * every tap automatically: position, current screen and the element's label when available.
+     */
+    Capture: (0, touches_1.createCapture)(() => telemetry.active ? tap => {
+        telemetry.add('action', { target: (0, core_1.safeText)(tap.label ?? `Tap at (${tap.x}, ${tap.y})`), screen: currentScreen, x: tap.x, y: tap.y, auto: true });
+    } : null),
     Trigger: (0, trigger_1.createTrigger)({
         getPhase: () => phase,
         subscribe(listener) { phaseListeners.add(listener); return () => { phaseListeners.delete(listener); }; },

package/dist/tap-label.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Best-effort name for the touched element: walks up from the touched host component
+ * reading accessibility labels, test IDs, titles and visible text. Never reads input
+ * values. React internals differ between renderers, so every failure yields undefined.
+ */
+export declare function tapLabel(event: unknown): string | undefined;

package/dist/tap-label.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tapLabel = tapLabel;
+const LABEL_DEPTH = 12;
+const PRESSABLE_DEPTH = 4;
+const DESCENDANT_BUDGET = 40;
+function text(value) {
+    if (typeof value === 'string' || typeof value === 'number')
+        return String(value).trim() || undefined;
+    if (Array.isArray(value)) {
+        const joined = value.map(text).filter(Boolean).join(' ');
+        return joined || undefined;
+    }
+    return undefined;
+}
+/**
+ * Best-effort name for the touched element: walks up from the touched host component
+ * reading accessibility labels, test IDs, titles and visible text. Never reads input
+ * values. React internals differ between renderers, so every failure yields undefined.
+ */
+function tapLabel(event) {
+    try {
+        const native = event;
+        const target = native?._targetInst ?? native?.target?.__internalInstanceHandle;
+        let fiber = target;
+        for (let depth = 0; fiber && depth < LABEL_DEPTH; depth++, fiber = fiber.return) {
+            const label = ownLabel(fiber.memoizedProps);
+            if (label)
+                return label.slice(0, 80);
+            // A tap on a button's padding targets the button itself; its text is inside it.
+            if (depth < PRESSABLE_DEPTH && pressable(fiber.memoizedProps)) {
+                const inner = descendantText(fiber.child);
+                if (inner)
+                    return inner.slice(0, 80);
+            }
+        }
+    }
+    catch { /* renderer internals unavailable */ }
+    return undefined;
+}
+function ownLabel(props) {
+    if (!props || typeof props !== 'object')
+        return undefined;
+    return text(props.accessibilityLabel) ?? text(props['aria-label']) ?? text(props.title)
+        ?? (typeof props.placeholder === 'string' ? props.placeholder : undefined)
+        ?? (props.editable === undefined && props.value === undefined ? text(props.children) : undefined)
+        ?? text(props.testID);
+}
+function pressable(props) {
+    if (!props || typeof props !== 'object')
+        return false;
+    const role = props.accessibilityRole ?? props.role;
+    return typeof props.onPress === 'function' || typeof props.onClick === 'function' || role === 'button' || role === 'link'
+        || typeof props.onResponderRelease === 'function';
+}
+/** First readable text inside a pressable, breadth-first and bounded; never input values. */
+function descendantText(first) {
+    const queue = [];
+    for (let f = first; f; f = f.sibling)
+        queue.push(f);
+    for (let visited = 0; queue.length && visited < DESCENDANT_BUDGET; visited++) {
+        const fiber = queue.shift();
+        const props = fiber.memoizedProps;
+        if (props && typeof props === 'object' && props.editable === undefined && props.value === undefined) {
+            const label = text(props.accessibilityLabel) ?? text(props.children);
+            if (label)
+                return label;
+        }
+        for (let f = fiber.child; f; f = f.sibling)
+            queue.push(f);
+    }
+    return undefined;
+}

package/dist/touches.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { type ViewProps } from 'react-native';
+export type TapSink = (tap: {
+    label?: string;
+    x: number;
+    y: number;
+}) => void;
+/**
+ * Wraps the app once and records every tap (position, screen and the element's label
+ * when one can be read), so testers' steps appear in the timeline without per-button code.
+ * It only observes touches; it never becomes the responder or blocks gestures.
+ */
+export declare function createCapture(sink: () => TapSink | null): ({ children, style, ...props }: ViewProps & {
+    children?: React.ReactNode;
+}) => React.JSX.Element;

package/dist/touches.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCapture = createCapture;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const tap_label_1 = require("./tap-label");
+const TAP_MAX_MOVE = 10;
+const TAP_MAX_MS = 800;
+/**
+ * Wraps the app once and records every tap (position, screen and the element's label
+ * when one can be read), so testers' steps appear in the timeline without per-button code.
+ * It only observes touches; it never becomes the responder or blocks gestures.
+ */
+function createCapture(sink) {
+    return function Capture({ children, style, ...props }) {
+        const start = (0, react_1.useRef)(null);
+        return (0, jsx_runtime_1.jsx)(react_native_1.View, { ...props, style: [styles.fill, style], onTouchStartCapture: e => {
+                props.onTouchStartCapture?.(e);
+                start.current = e.nativeEvent.touches.length > 1 ? null : { x: e.nativeEvent.pageX, y: e.nativeEvent.pageY, at: Date.now() };
+            }, onTouchEndCapture: e => {
+                props.onTouchEndCapture?.(e);
+                const began = start.current;
+                start.current = null;
+                const add = sink();
+                if (!began || !add)
+                    return;
+                const { pageX, pageY } = e.nativeEvent;
+                if (Math.hypot(pageX - began.x, pageY - began.y) > TAP_MAX_MOVE || Date.now() - began.at > TAP_MAX_MS)
+                    return;
+                add({ label: (0, tap_label_1.tapLabel)(e), x: Math.round(pageX), y: Math.round(pageY) });
+            }, children: children });
+    };
+}
+const styles = react_native_1.StyleSheet.create({ fill: { flex: 1 } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bugsession/react-native",
-  "version": "0.1.0-beta.4",
+  "version": "0.1.0-beta.5",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/core.ts

@@ -94,14 +94,42 @@ function shiftRequestTime<T extends Record<string, unknown>>(data: T, offsetMs:
   return typeof data.requestTimestampMs === 'number' ? { ...data, requestTimestampMs: data.requestTimestampMs - offsetMs } : data;
 }
 
+/** Response excerpt for a failed request: text only, at most 1000 characters, secrets masked. */
+export function safeBody(text: unknown): string | undefined {
+  if (typeof text !== 'string' || !text.trim()) return undefined;
+  return safeText(text.slice(0, 4000)
+    .replace(/("(?:[\w-]*(?:password|passwd|secret|token|authorization|cookie|api[-_]?key|session)[\w-]*)"\s*:\s*)("(?:[^"\\]|\\.)*"|[^,}\s]+)/gi, '$1"[redacted]"'))
+    .slice(0, 1000);
+}
+const textual = /json|text|xml|html|problem/i;
+const sdkRequests = { ignored: (_url: string) => false };
+/** Requests to these URLs (the recorder itself) are never recorded. */
+export function ignoreRequests(match: (url: string) => boolean) { sdkRequests.ignored = match; }
+// React Native's fetch is built on XMLHttpRequest. While a fetch call creates its
+// request synchronously, the XHR hook skips it so each request is recorded once.
+let insideFetch = 0;
+
 export function instrumentFetch(original: typeof fetch, collector: TelemetrySink): typeof fetch {
   return (async (input: Parameters<typeof fetch>[0], init?: RequestInit) => {
-    const url = safeUrl(typeof input === 'string' ? input : input instanceof URL ? input.href : input.url);
+    const rawUrl = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url;
     const method = (init?.method ?? (typeof input === 'object' && 'method' in input ? input.method : 'GET')).toUpperCase();
     const start = collector.clock.now();
+    let pending: Promise<Response>;
+    insideFetch++;
+    try { pending = original(input, init); } finally { insideFetch--; }
+    if (sdkRequests.ignored(rawUrl)) return pending;
+    const url = safeUrl(rawUrl);
     try {
-      const response = await original(input, init);
-      collector.add('network', { requestTimestampMs: start, method, url, status: response.status, durationMs: collector.clock.now() - start });
+      const response = await pending;
+      const durationMs = collector.clock.now() - start;
+      let responseExcerpt: string | undefined;
+      if (response.status >= 400 && textual.test(response.headers?.get?.('content-type') ?? 'text')) {
+        responseExcerpt = await Promise.race([
+          response.clone().text().then(safeBody, () => undefined),
+          new Promise<undefined>(resolve => setTimeout(() => resolve(undefined), 500)),
+        ]);
+      }
+      collector.add('network', { requestTimestampMs: start, method, url, status: response.status, durationMs, ...(responseExcerpt ? { responseExcerpt } : {}) });
       return response;
     } catch (error) {
       collector.add('network', { requestTimestampMs: start, method, url, status: null, durationMs: collector.clock.now() - start, error: safeText(error) });
@@ -109,3 +137,42 @@ export function instrumentFetch(original: typeof fetch, collector: TelemetrySink
     }
   }) as typeof fetch;
 }
+
+type XhrLike = {
+  open(method: string, url: string | URL, ...rest: unknown[]): void;
+  send(body?: unknown): void;
+  addEventListener(type: string, listener: () => void): void;
+  status: number; responseType?: string; responseText?: string;
+  getResponseHeader?(name: string): string | null;
+};
+/** Records XMLHttpRequest traffic (axios and most HTTP libraries) that does not go through fetch. */
+export function instrumentXhr(Xhr: { prototype: XhrLike } | undefined, collector: TelemetrySink) {
+  if (!Xhr?.prototype?.open || !Xhr.prototype.send) return;
+  const proto = Xhr.prototype;
+  const open = proto.open, send = proto.send;
+  const meta = new WeakMap<object, { method: string; url: string }>();
+  proto.open = function (this: XhrLike, method: string, url: string | URL, ...rest: unknown[]) {
+    const href = String(url);
+    if (!insideFetch && !sdkRequests.ignored(href)) meta.set(this, { method: String(method || 'GET').toUpperCase(), url: safeUrl(href) });
+    else meta.delete(this);
+    return open.call(this, method, url, ...rest);
+  };
+  proto.send = function (this: XhrLike, body?: unknown) {
+    const request = meta.get(this);
+    if (request) {
+      const start = collector.clock.now();
+      let error: string | undefined;
+      for (const type of ['error', 'timeout', 'abort']) this.addEventListener(type, () => { error ??= `Request ${type}`; });
+      this.addEventListener('loadend', () => {
+        const status = error || !this.status ? null : this.status;
+        let responseExcerpt: string | undefined;
+        try {
+          if (status !== null && status >= 400 && (!this.responseType || this.responseType === 'text') && textual.test(this.getResponseHeader?.('content-type') ?? 'text')) responseExcerpt = safeBody(this.responseText);
+        } catch { /* response not readable */ }
+        collector.add('network', { requestTimestampMs: start, method: request.method, url: request.url, status, durationMs: collector.clock.now() - start, client: 'xhr',
+          ...(error ? { error } : {}), ...(responseExcerpt ? { responseExcerpt } : {}) });
+      });
+    }
+    return send.call(this, body);
+  };
+}

package/src/index.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { Dimensions, Pressable, StyleSheet, Text, View, type PressableProps, Platform } from 'react-native';
 import { createTrigger, type IndicatorPhase } from './trigger';
 export type { Annotation, BugSessionTriggerProps, IndicatorPhase } from './trigger';
-import { Collector, instrumentFetch, safeText, safeUrl, SessionClock, Telemetry, type Evidence } from './core';
+import { Collector, ignoreRequests, instrumentFetch, instrumentXhr, safeText, safeUrl, SessionClock, Telemetry, type Evidence } from './core';
+import { createCapture } from './touches';
 import { alignNativeRecording, type NativeCaptureAdapter } from './capture';
 export type { NativeCaptureAdapter } from './capture';
 export { Collector, SessionClock, Telemetry, safeText, safeUrl } from './core';
@@ -25,6 +26,11 @@ export type BugSessionOptions = {
    * kept in memory before a recording starts and attached to it. Defaults to 60, max 300; 0 disables.
    */
   preRecordSeconds?: number;
+  /**
+   * Seconds of app events still collected after the tester stops, while the video uploads,
+   * so a request or error that lands just after Stop is kept. Defaults to 5, max 30; 0 disables.
+   */
+  postRecordSeconds?: number;
 };
 export type BugSessionErrorBoundaryProps = { error: Error; retry: () => void | Promise<void> };
 type ErrorUtilsType = { getGlobalHandler(): (e: Error, fatal?: boolean) => void; setGlobalHandler(handler: (e: Error, fatal?: boolean) => void): void };
@@ -38,6 +44,7 @@ let collector: Collector | null = null;
 const telemetry = new Telemetry();
 let installed = false;
 let preRecordEvents: Evidence[] = [];
+const MAX_POST_RECORD_SECONDS = 30;
 let session: { id: string; videoStartMs: number; audioStartMs: number; uncertaintyMs: number; captureBackend: 'adb' | 'replaykit' | 'mediaprojection'; nativeOffsetMs?: number; nativeUncertaintyMs?: number } | null = null;
 let state: 'idle' | 'starting' | 'recording' | 'stopping' = 'idle';
 let currentScreen = 'Home';
@@ -108,11 +115,14 @@ async function request(path: string, data?: unknown) {
 // recording starts can be attached to it (see Telemetry).
 function install() {
   installed = true;
+  // The recorder itself, and in development Metro's own symbolication and log requests.
+  ignoreRequests(url => (!!options && url.startsWith(options.recorderUrl)) || (__DEV__ && /\/(symbolicate|logs)(\?|$)/.test(url)));
   globalThis.fetch = instrumentFetch(rawFetch, telemetry);
+  instrumentXhr((globalThis as { XMLHttpRequest?: Parameters<typeof instrumentXhr>[0] }).XMLHttpRequest, telemetry);
   for (const level of ['log', 'info', 'debug', 'warn', 'error'] as const) {
     const original = console[level];
     console[level] = (...args: unknown[]) => {
-      if (telemetry.active) {
+      if (telemetry.active && !(level === 'error' && repeatsCapturedError(args))) {
         const error = args.find((a): a is Error => a instanceof Error);
         telemetry.add(level === 'error' ? 'error' : 'log', { level, message: args.map(safeText).join(' '), source: 'console', stack: error?.stack ? safeText(error.stack) : undefined, screen: currentScreen });
       }
@@ -144,8 +154,21 @@ function rejectionMessage(rejection: unknown) {
   if (typeof rejection === 'string') return rejection;
   try { return JSON.stringify(rejection) ?? String(rejection); } catch { return String(rejection); }
 }
+// React Native also prints captured errors (such as unhandled rejections in development)
+// through console.error; those repeats are skipped for a moment after capture.
+const recentErrors: { message: string; at: number }[] = [];
+function repeatsCapturedError(args: unknown[]) {
+  const now = Date.now();
+  while (recentErrors.length && now - recentErrors[0].at > 2000) recentErrors.shift();
+  if (!recentErrors.length) return false;
+  const printed = args.map(a => a instanceof Error ? a.message : typeof a === 'string' ? a : '').join(' ');
+  return recentErrors.some(e => e.message.length > 8 && printed.includes(e.message));
+}
 function captureError(error: unknown, source = 'boundary') {
   if (!telemetry.active) return;
+  const message = error instanceof Error ? error.message : typeof error === 'string' ? error : '';
+  if (message && repeatsCapturedError([message])) return;
+  if (message) recentErrors.push({ message: message.slice(0, 200), at: Date.now() });
   telemetry.add('error', { source, message: safeText(error), stack: error instanceof Error ? safeText(error.stack ?? '') : undefined, screen: currentScreen });
 }
 
@@ -217,10 +240,20 @@ export const BugSession = {
     const c = collector;
     const active = session;
     c.add('session-stop', {});
-    telemetry.end();
-    // Sent separately from `events` so recorders that predate pre-record support ignore them.
+    const stoppedAtMs = c.clock.now();
+    const postRecordMs = Math.max(0, Math.min(options.postRecordSeconds ?? 5, MAX_POST_RECORD_SECONDS)) * 1000;
+    // Sent separately from `events` so recorders that predate pre/post-record support ignore them.
     const before = preRecordEvents;
     preRecordEvents = [];
+    // App events keep flowing to this session while media uploads; anything after Stop is
+    // reported separately as post-recording evidence.
+    const split = () => {
+      telemetry.end();
+      return {
+        events: c.events.filter(e => e.timestampMs <= stoppedAtMs),
+        after: c.events.filter(e => e.timestampMs > stoppedAtMs && e.timestampMs <= stoppedAtMs + postRecordMs).slice(0, 1000).map(e => ({ ...e, postRecording: true })),
+      };
+    };
     try {
       let media: Record<string, unknown>;
       if (active.captureBackend === 'replaykit') {
@@ -246,8 +279,12 @@ export const BugSession = {
         await options.audio!.upload(`${options.recorderUrl}/sessions/${active.id}/audio`, uri, authHeaders());
         media = { ...active, audioEndMs };
       }
+      const remainingMs = stoppedAtMs + postRecordMs - c.clock.now();
+      if (remainingMs > 0) await new Promise(resolve => setTimeout(resolve, remainingMs));
+      const { events, after } = split();
       const result = await request(`/sessions/${active.id}/stop`, {
-        durationMs: c.clock.now(), events: c.events, droppedEvents: c.dropped, preRecordEvents: before,
+        durationMs: stoppedAtMs, events, droppedEvents: c.dropped, preRecordEvents: before,
+        ...(after.length ? { postRecordEvents: after } : {}),
         media,
       });
       setPhase({ kind: 'sent' });
@@ -255,10 +292,11 @@ export const BugSession = {
     } catch (error) {
       if (active.captureBackend !== 'adb') await options.capture!.cancel().catch(() => {});
       // Release the device recorder, but preserve partial files for recovery.
-      await request(`/sessions/${active.id}/abort`, { reason: safeText(error), events: c.events, preRecordEvents: before, media: active, durationMs: c.clock.now() }).catch(() => {});
+      const { events, after } = split();
+      await request(`/sessions/${active.id}/abort`, { reason: safeText(error), events, preRecordEvents: before, ...(after.length ? { postRecordEvents: after } : {}), media: active, durationMs: stoppedAtMs }).catch(() => {});
       setPhase({ kind: 'failed', message: safeText(error) });
       throw error;
-    } finally { collector = null; session = null; state = 'idle'; }
+    } finally { telemetry.end(); collector = null; session = null; state = 'idle'; }
   },
   trackAction(action: { name: string; screen?: string }) {
     if (telemetry.active) telemetry.add('action', { target: safeText(action.name), screen: safeText(action.screen ?? currentScreen) });
@@ -268,6 +306,13 @@ export const BugSession = {
     currentScreen = screen;
   },
   captureError,
+  /**
+   * Wrap the app once (inside the navigator's container, around your screens) to record
+   * every tap automatically: position, current screen and the element's label when available.
+   */
+  Capture: createCapture(() => telemetry.active ? tap => {
+    telemetry.add('action', { target: safeText(tap.label ?? `Tap at (${tap.x}, ${tap.y})`), screen: currentScreen, x: tap.x, y: tap.y, auto: true });
+  } : null),
   Trigger: createTrigger({
     getPhase: () => phase,
     subscribe(listener) { phaseListeners.add(listener); return () => { phaseListeners.delete(listener); }; },

package/src/tap-label.ts

@@ -0,0 +1,69 @@
+/** Pure helpers for automatic tap capture; no React Native imports so they can be unit tested. */
+type Fiber = { memoizedProps?: Record<string, unknown> | null; return?: Fiber | null; child?: Fiber | null; sibling?: Fiber | null };
+
+const LABEL_DEPTH = 12;
+const PRESSABLE_DEPTH = 4;
+const DESCENDANT_BUDGET = 40;
+
+function text(value: unknown): string | undefined {
+  if (typeof value === 'string' || typeof value === 'number') return String(value).trim() || undefined;
+  if (Array.isArray(value)) {
+    const joined = value.map(text).filter(Boolean).join(' ');
+    return joined || undefined;
+  }
+  return undefined;
+}
+
+/**
+ * Best-effort name for the touched element: walks up from the touched host component
+ * reading accessibility labels, test IDs, titles and visible text. Never reads input
+ * values. React internals differ between renderers, so every failure yields undefined.
+ */
+export function tapLabel(event: unknown): string | undefined {
+  try {
+    const native = event as { _targetInst?: Fiber; target?: { __internalInstanceHandle?: Fiber } } | null;
+    const target = native?._targetInst ?? native?.target?.__internalInstanceHandle;
+    let fiber: Fiber | null | undefined = target;
+    for (let depth = 0; fiber && depth < LABEL_DEPTH; depth++, fiber = fiber.return) {
+      const label = ownLabel(fiber.memoizedProps);
+      if (label) return label.slice(0, 80);
+      // A tap on a button's padding targets the button itself; its text is inside it.
+      if (depth < PRESSABLE_DEPTH && pressable(fiber.memoizedProps)) {
+        const inner = descendantText(fiber.child);
+        if (inner) return inner.slice(0, 80);
+      }
+    }
+  } catch { /* renderer internals unavailable */ }
+  return undefined;
+}
+
+function ownLabel(props: Record<string, unknown> | null | undefined): string | undefined {
+  if (!props || typeof props !== 'object') return undefined;
+  return text(props.accessibilityLabel) ?? text(props['aria-label']) ?? text(props.title)
+    ?? (typeof props.placeholder === 'string' ? props.placeholder : undefined)
+    ?? (props.editable === undefined && props.value === undefined ? text(props.children) : undefined)
+    ?? text(props.testID);
+}
+
+function pressable(props: Record<string, unknown> | null | undefined) {
+  if (!props || typeof props !== 'object') return false;
+  const role = props.accessibilityRole ?? props.role;
+  return typeof props.onPress === 'function' || typeof props.onClick === 'function' || role === 'button' || role === 'link'
+    || typeof props.onResponderRelease === 'function';
+}
+
+/** First readable text inside a pressable, breadth-first and bounded; never input values. */
+function descendantText(first: Fiber | null | undefined): string | undefined {
+  const queue: Fiber[] = [];
+  for (let f = first; f; f = f.sibling) queue.push(f);
+  for (let visited = 0; queue.length && visited < DESCENDANT_BUDGET; visited++) {
+    const fiber = queue.shift()!;
+    const props = fiber.memoizedProps;
+    if (props && typeof props === 'object' && props.editable === undefined && props.value === undefined) {
+      const label = text(props.accessibilityLabel) ?? text(props.children);
+      if (label) return label;
+    }
+    for (let f = fiber.child; f; f = f.sibling) queue.push(f);
+  }
+  return undefined;
+}

package/src/touches.tsx

@@ -0,0 +1,37 @@
+import React, { useRef } from 'react';
+import { StyleSheet, View, type ViewProps } from 'react-native';
+import { tapLabel } from './tap-label';
+
+export type TapSink = (tap: { label?: string; x: number; y: number }) => void;
+
+const TAP_MAX_MOVE = 10;
+const TAP_MAX_MS = 800;
+/**
+ * Wraps the app once and records every tap (position, screen and the element's label
+ * when one can be read), so testers' steps appear in the timeline without per-button code.
+ * It only observes touches; it never becomes the responder or blocks gestures.
+ */
+export function createCapture(sink: () => TapSink | null) {
+  return function Capture({ children, style, ...props }: ViewProps & { children?: React.ReactNode }) {
+    const start = useRef<{ x: number; y: number; at: number } | null>(null);
+    return <View {...props} style={[styles.fill, style]}
+      onTouchStartCapture={e => {
+        props.onTouchStartCapture?.(e);
+        start.current = e.nativeEvent.touches.length > 1 ? null : { x: e.nativeEvent.pageX, y: e.nativeEvent.pageY, at: Date.now() };
+      }}
+      onTouchEndCapture={e => {
+        props.onTouchEndCapture?.(e);
+        const began = start.current;
+        start.current = null;
+        const add = sink();
+        if (!began || !add) return;
+        const { pageX, pageY } = e.nativeEvent;
+        if (Math.hypot(pageX - began.x, pageY - began.y) > TAP_MAX_MOVE || Date.now() - began.at > TAP_MAX_MS) return;
+        add({ label: tapLabel(e), x: Math.round(pageX), y: Math.round(pageY) });
+      }}>
+      {children}
+    </View>;
+  };
+}
+
+const styles = StyleSheet.create({ fill: { flex: 1 } });