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

package/README.md

@@ -56,7 +56,13 @@ Configure once while idle. Wire an automatic stop timer into your recording UI,
 
 React Navigation integration: call the function returned by `BugSession.navigationListener(navigationRef)` from both `NavigationContainer.onReady` and `onStateChange`. Expo Router apps can call `trackNavigation` when the committed pathname changes. Use `BugSession.Touchable` to instrument a Pressable, or `trackAction` directly. Send caught errors through `BugSession.captureError(error)`.
 
-`<BugSession.Trigger />` renders a floating logo button that starts and stops sessions. It is draggable by default, stays within screen bounds, and remembers its moved position across screen changes and trigger remounts while the app remains open. Render it once above the app navigator so it stays visible during navigation. Configure its initial corner with `position` (`bottom-right` by default; also `bottom-left`, `top-right`, or `top-left`) and adjust `offset` in points. Set `draggable={false}` to lock it. Pass `onError` to surface permission, recorder, and upload failures. Supply `children` to replace the default mark.
+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.
+
+`<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.
+
+While recording, the tab shows a pulsing dot, elapsed time and live microphone levels. Tap it for the options panel: **Draw on screen** and **Stop & send**. The panel hides itself after a few seconds so it stays out of the video as much as possible; the tab itself is part of the screen recording. Draw opens a pen layer over the app: testers circle the problem while narrating, then use Undo, Clear or Done. Drawings appear in the video, and each stroke is recorded as an `annotation` event with its bounds in screen points. After stopping, a toast at the top shows sending progress, then "Report sent" or "Not sent" with the reason; it also reflects `BugSession.start()`/`stop()` called directly. Recording stops automatically after `maxDurationSeconds` (default 150) so uploads stay within the recorder limit. Pass `onError` to also receive permission, recorder, and upload failures. With `react-native-screens` installed (included with Expo Router), the tab renders above native modals. Live levels and exact safe-area placement need `@bugsession/capture-native` 0.1.0-beta.4 or later in a rebuilt native app; older builds show static bars.
 
 Android uses `AndroidCapture` from `@bugsession/capture-native` plus an `audio` adapter implementing `prepare`, `start`, `stop` (returns a local URI), and `upload`. `prepare` must request microphone permission. `expo-audio` can provide this adapter. Android shows a system screen-capture prompt each session and a persistent capture notification; keep the app foregrounded through upload.
 

package/dist/capture.d.ts

@@ -14,6 +14,18 @@ export type NativeCaptureAdapter = {
     stop(): Promise<NativeRecording>;
     cancel(): Promise<void>;
     upload(url: string, uri: string, headers?: Record<string, string>): Promise<void>;
+    /** Optional: live microphone level (0-1) for the recording indicator. Returns an unsubscribe function. */
+    onAudioLevel?(listener: (level: number) => void): () => void;
+    /** Optional: safe-area insets in points, used to place the recording controls above the home indicator. */
+    safeAreaInsets?(): Promise<{
+        top: number;
+        bottom: number;
+    } | null>;
+    /** Optional: native app and device facts merged into each recording's metadata. */
+    appContext?(): Promise<{
+        application: Record<string, unknown>;
+        device: Record<string, unknown>;
+    } | null>;
 };
 export declare function alignNativeRecording(recording: NativeRecording, offsetMs: number, uncertaintyMs: number): {
     videoStartMs: number;

package/dist/core.d.ts

@@ -10,6 +10,8 @@ export declare class SessionClock {
     private epoch;
     constructor(source?: () => number);
     now(): number;
+    /** Monotonic source reading at which this clock reads zero. */
+    get origin(): number;
 }
 export declare class Collector {
     clock: SessionClock;
@@ -18,5 +20,35 @@ export declare class Collector {
     dropped: number;
     constructor(clock?: SessionClock, limit?: number);
     add(type: string, data: Record<string, unknown>): void;
+    addAt(type: string, data: Record<string, unknown>, timestampMs: number): void;
 }
-export declare function instrumentFetch(original: typeof fetch, collector: Collector): typeof fetch;
+export type TelemetrySink = {
+    add(type: string, data: Record<string, unknown>): void;
+    clock: {
+        now(): number;
+    };
+};
+export declare const MAX_PRE_RECORD_MS = 300000;
+/**
+ * Routes app events to the active session, or, between sessions, into a bounded
+ * in-memory buffer of the last `preRecordMs`. The buffer never leaves the device
+ * unless a recording starts. Timestamps are kept on one app-lifetime clock and
+ * converted to the session clock, so requests spanning the start stay consistent.
+ */
+export declare class Telemetry implements TelemetrySink {
+    private maxBuffered;
+    readonly clock: SessionClock;
+    private buffer;
+    private session;
+    private preRecordMs;
+    constructor(preRecordMs?: number, maxBuffered?: number, source?: () => number);
+    /** False when nothing would be kept, so callers can skip formatting work. */
+    get active(): boolean;
+    configure(preRecordMs: number, maxBuffered?: number): void;
+    add(type: string, data: Record<string, unknown>): void;
+    /** Routes events to `collector` and returns the buffered events on its clock (negative times). */
+    begin(collector: Collector): Evidence[];
+    end(): void;
+    private prune;
+}
+export declare function instrumentFetch(original: typeof fetch, collector: TelemetrySink): typeof fetch;

package/dist/core.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Collector = exports.SessionClock = void 0;
+exports.Telemetry = exports.MAX_PRE_RECORD_MS = exports.Collector = exports.SessionClock = void 0;
 exports.safeUrl = safeUrl;
 exports.safeText = safeText;
 exports.instrumentFetch = instrumentFetch;
@@ -29,6 +29,8 @@ class SessionClock {
         this.epoch = source();
     }
     now() { return Math.max(0, this.source() - this.epoch); }
+    /** Monotonic source reading at which this clock reads zero. */
+    get origin() { return this.epoch; }
 }
 exports.SessionClock = SessionClock;
 class Collector {
@@ -39,14 +41,75 @@ class Collector {
         this.dropped = 0;
     }
     add(type, data) {
+        this.addAt(type, data, this.clock.now());
+    }
+    addAt(type, data, timestampMs) {
         if (this.events.length >= this.limit) {
             this.dropped++;
             return;
         }
-        this.events.push({ ...data, type, timestampMs: this.clock.now() });
+        this.events.push({ ...data, type, timestampMs });
     }
 }
 exports.Collector = Collector;
+exports.MAX_PRE_RECORD_MS = 300000;
+/**
+ * Routes app events to the active session, or, between sessions, into a bounded
+ * in-memory buffer of the last `preRecordMs`. The buffer never leaves the device
+ * unless a recording starts. Timestamps are kept on one app-lifetime clock and
+ * converted to the session clock, so requests spanning the start stay consistent.
+ */
+class Telemetry {
+    constructor(preRecordMs = 60000, maxBuffered = 500, source = () => performance.now()) {
+        this.maxBuffered = maxBuffered;
+        this.buffer = [];
+        this.session = null;
+        this.clock = new SessionClock(source);
+        this.preRecordMs = Math.max(0, Math.min(preRecordMs, exports.MAX_PRE_RECORD_MS));
+    }
+    /** False when nothing would be kept, so callers can skip formatting work. */
+    get active() { return !!this.session || this.preRecordMs > 0; }
+    configure(preRecordMs, maxBuffered = this.maxBuffered) {
+        this.preRecordMs = Math.max(0, Math.min(preRecordMs, exports.MAX_PRE_RECORD_MS));
+        this.maxBuffered = maxBuffered;
+        this.prune(this.clock.now());
+    }
+    add(type, data) {
+        const now = this.clock.now();
+        if (this.session) {
+            const { collector, offsetMs } = this.session;
+            collector.addAt(type, shiftRequestTime(data, offsetMs), now - offsetMs);
+            return;
+        }
+        if (this.preRecordMs <= 0)
+            return;
+        this.buffer.push({ ...data, type, timestampMs: now });
+        this.prune(now);
+    }
+    /** Routes events to `collector` and returns the buffered events on its clock (negative times). */
+    begin(collector) {
+        const offsetMs = collector.clock.origin - this.clock.origin;
+        this.prune(this.clock.now());
+        const before = this.buffer.map(e => ({ ...shiftRequestTime(e, offsetMs), timestampMs: e.timestampMs - offsetMs, preRecording: true }));
+        this.buffer = [];
+        this.session = { collector, offsetMs };
+        return before;
+    }
+    end() { this.session = null; }
+    prune(now) {
+        const cutoff = now - this.preRecordMs;
+        let drop = 0;
+        while (drop < this.buffer.length && this.buffer[drop].timestampMs < cutoff)
+            drop++;
+        drop = Math.max(drop, this.buffer.length - this.maxBuffered);
+        if (drop > 0)
+            this.buffer.splice(0, drop);
+    }
+}
+exports.Telemetry = Telemetry;
+function shiftRequestTime(data, offsetMs) {
+    return typeof data.requestTimestampMs === 'number' ? { ...data, requestTimestampMs: data.requestTimestampMs - offsetMs } : data;
+}
 function instrumentFetch(original, collector) {
     return (async (input, init) => {
         const url = safeUrl(typeof input === 'string' ? input : input instanceof URL ? input.href : input.url);

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import { type PressableProps, type StyleProp, type ViewStyle } from 'react-native';
+import { type PressableProps } from 'react-native';
+export type { Annotation, BugSessionTriggerProps, IndicatorPhase } from './trigger';
 import { type NativeCaptureAdapter } from './capture';
 export type { NativeCaptureAdapter } from './capture';
-export { Collector, SessionClock, safeText, safeUrl } from './core';
+export { Collector, SessionClock, Telemetry, safeText, safeUrl } from './core';
 export type AudioAdapter = {
     prepare(): Promise<void>;
     start(): void;
@@ -16,15 +17,15 @@ export type BugSessionOptions = {
     capture?: NativeCaptureAdapter;
     device: Record<string, unknown>;
     application: Record<string, unknown>;
+    /**
+     * Seconds of app events (logs, errors, network metadata, actions, navigation; never video or audio)
+     * kept in memory before a recording starts and attached to it. Defaults to 60, max 300; 0 disables.
+     */
+    preRecordSeconds?: number;
 };
-export type BugSessionTriggerProps = {
-    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
-    offset?: number;
-    draggable?: boolean;
-    style?: StyleProp<ViewStyle>;
-    accessibilityLabel?: string;
-    children?: React.ReactNode;
-    onError?: (error: unknown) => void;
+export type BugSessionErrorBoundaryProps = {
+    error: Error;
+    retry: () => void | Promise<void>;
 };
 declare function captureError(error: unknown, source?: string): void;
 export declare const BugSession: {
@@ -38,6 +39,13 @@ export declare const BugSession: {
     }): void;
     trackNavigation(screen: string): void;
     captureError: typeof captureError;
+    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
+     * global error handler). In a route or layout file:
+     * `export const ErrorBoundary = BugSession.ErrorBoundary;`
+     */
+    ErrorBoundary({ error, retry }: BugSessionErrorBoundaryProps): React.JSX.Element;
     /** Use with NavigationContainer.onStateChange for non-Expo React Navigation apps. */
     navigationListener(ref: {
         getCurrentRoute(): {
@@ -48,5 +56,4 @@ export declare const BugSession: {
         name: string;
         screen?: string;
     }): React.JSX.Element;
-    Trigger({ position, offset, draggable, style, accessibilityLabel, children, onError }: BugSessionTriggerProps): React.JSX.Element;
 };

package/dist/index.js

@@ -3,31 +3,73 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BugSession = exports.safeUrl = exports.safeText = exports.SessionClock = exports.Collector = void 0;
+exports.BugSession = exports.safeUrl = exports.safeText = exports.Telemetry = exports.SessionClock = exports.Collector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
+const trigger_1 = require("./trigger");
 const core_1 = require("./core");
 const capture_1 = require("./capture");
 var core_2 = require("./core");
 Object.defineProperty(exports, "Collector", { enumerable: true, get: function () { return core_2.Collector; } });
 Object.defineProperty(exports, "SessionClock", { enumerable: true, get: function () { return core_2.SessionClock; } });
+Object.defineProperty(exports, "Telemetry", { enumerable: true, get: function () { return core_2.Telemetry; } });
 Object.defineProperty(exports, "safeText", { enumerable: true, get: function () { return core_2.safeText; } });
 Object.defineProperty(exports, "safeUrl", { enumerable: true, get: function () { return core_2.safeUrl; } });
 const globals = globalThis;
 let options;
 let collector = null;
+const telemetry = new core_1.Telemetry();
+let installed = false;
+let preRecordEvents = [];
 let session = null;
 let state = 'idle';
-let restore = null;
 let currentScreen = 'Home';
 let rawFetch;
-let triggerPosition = null;
-const triggerSize = 58;
-function clampTriggerPosition(point, width, height) {
+// Status shown by the trigger's indicator; also reflects start()/stop() called directly by the app.
+let phase = { kind: 'idle' };
+let phaseTimer;
+const phaseListeners = new Set();
+function setPhase(next) {
+    phase = next;
+    clearTimeout(phaseTimer);
+    if (next.kind === 'sent' || next.kind === 'failed')
+        phaseTimer = setTimeout(() => setPhase({ kind: 'idle' }), next.kind === 'sent' ? 3000 : 6000);
+    phaseListeners.forEach(listener => listener());
+}
+function compact(values) {
+    return Object.fromEntries(Object.entries(values).filter(([, value]) => value !== undefined && value !== null && value !== ''));
+}
+/**
+ * App and device facts for the recording's metadata. Native values (bundle id, hardware
+ * model) come from the capture module when available; values passed to configure() win.
+ */
+async function recordingContext() {
+    const constants = (react_native_1.Platform.constants ?? {});
+    const rn = constants.reactNativeVersion;
+    const screen = react_native_1.Dimensions.get('screen');
+    let locale;
+    let timeZone;
+    try {
+        ({ locale, timeZone } = Intl.DateTimeFormat().resolvedOptions());
+    }
+    catch { /* Intl unavailable */ }
+    const device = {
+        platform: react_native_1.Platform.OS,
+        osVersion: react_native_1.Platform.OS === 'android' ? constants.Release : String(react_native_1.Platform.Version),
+        screen: { width: Math.round(screen.width), height: Math.round(screen.height), scale: screen.scale },
+        locale, timeZone,
+        ...(react_native_1.Platform.OS === 'android' ? { model: constants.Model, manufacturer: constants.Manufacturer } : { idiom: constants.interfaceIdiom }),
+    };
+    const application = {
+        reactNative: rn ? `${rn.major}.${rn.minor}.${rn.patch}` : undefined,
+        jsEngine: globals.HermesInternal ? 'hermes' : 'jsc',
+        buildType: __DEV__ ? 'development' : 'release',
+    };
+    const native = await options.capture?.appContext?.().catch(() => null) ?? null;
     return {
-        left: Math.max(0, Math.min(point.left, Math.max(0, width - triggerSize))),
-        top: Math.max(0, Math.min(point.top, Math.max(0, height - triggerSize))),
+        device: compact({ ...device, ...native?.device, ...options.device }),
+        application: compact({ ...application, ...native?.application, ...options.application }),
     };
 }
 function authHeaders() {
@@ -54,42 +96,71 @@ async function request(path, data) {
         throw new Error(`Recorder ${response.status}: ${await response.text()}`);
     return response.json();
 }
-function install(c) {
-    const originalFetch = globalThis.fetch;
-    const wrappedFetch = (0, core_1.instrumentFetch)(rawFetch, c);
-    globalThis.fetch = wrappedFetch;
-    const originals = { log: console.log, warn: console.warn, error: console.error };
-    for (const level of ['log', 'warn', 'error']) {
+// Installed once at configure() for the app's lifetime, so events from before a
+// recording starts can be attached to it (see Telemetry).
+function install() {
+    installed = true;
+    globalThis.fetch = (0, core_1.instrumentFetch)(rawFetch, telemetry);
+    for (const level of ['log', 'info', 'debug', 'warn', 'error']) {
+        const original = console[level];
         console[level] = (...args) => {
-            c.add(level === 'error' ? 'error' : 'log', { level, message: args.map(core_1.safeText).join(' '), source: 'console', stack: args.find(a => a instanceof Error)?.stack ? (0, core_1.safeText)(args.find(a => a instanceof Error).stack) : undefined });
-            originals[level](...args);
+            if (telemetry.active) {
+                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 });
+            }
+            original(...args);
         };
     }
     const utils = globals.ErrorUtils;
     const handler = utils?.getGlobalHandler();
-    const onError = (error, fatal) => {
-        captureError(error, fatal ? 'fatal' : 'uncaught');
-        handler?.(error, fatal);
-    };
     if (utils && handler)
-        utils.setGlobalHandler(onError);
-    return () => {
-        if (globalThis.fetch === wrappedFetch)
-            globalThis.fetch = originalFetch;
-        for (const level of ['log', 'warn', 'error'])
-            console[level] = originals[level];
-        if (utils?.getGlobalHandler() === onError && handler)
-            utils.setGlobalHandler(handler);
-    };
+        utils.setGlobalHandler((error, fatal) => {
+            captureError(error, fatal ? 'fatal' : 'uncaught');
+            handler(error, fatal);
+        });
+    // React Native only tracks unhandled rejections in development, and reports them
+    // through ExceptionsManager rather than the global handler. Track them in every
+    // build, and keep React Native's development behavior (LogBox) by forwarding.
+    globals.HermesInternal?.enablePromiseRejectionTracker?.({
+        allRejections: true,
+        onUnhandled: (id, rejection) => {
+            captureError(rejection instanceof Error ? rejection : new Error(rejectionMessage(rejection)), 'unhandled-rejection');
+            if (__DEV__)
+                handler?.(new Error(`Uncaught (in promise, id: ${id}): "${rejectionMessage(rejection)}"`), false);
+        },
+        onHandled: id => {
+            if (__DEV__)
+                console.warn(`Promise rejection handled (id: ${id})`);
+        },
+    });
+}
+function rejectionMessage(rejection) {
+    if (rejection instanceof Error)
+        return rejection.toString();
+    if (typeof rejection === 'string')
+        return rejection;
+    try {
+        return JSON.stringify(rejection) ?? String(rejection);
+    }
+    catch {
+        return String(rejection);
+    }
 }
 function captureError(error, source = 'boundary') {
-    collector?.add('error', { source, message: (0, core_1.safeText)(error), stack: error instanceof Error ? (0, core_1.safeText)(error.stack ?? '') : undefined, screen: currentScreen });
+    if (!telemetry.active)
+        return;
+    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 = {
     configure(config) {
         if (state !== 'idle')
             throw new Error('Cannot configure an active BugSession');
         options = { ...config, recorderUrl: config.recorderUrl.replace(/\/$/, '') };
+        telemetry.configure((config.preRecordSeconds ?? 60) * 1000);
+        if (!installed) {
+            rawFetch = globalThis.fetch.bind(globalThis);
+            install();
+        }
     },
     get status() { return state; },
     async start() {
@@ -104,7 +175,7 @@ exports.BugSession = {
         if (state !== 'idle')
             throw new Error(`BugSession is ${state}`);
         state = 'starting';
-        rawFetch = globalThis.fetch.bind(globalThis);
+        setPhase({ kind: 'starting' });
         let createdId = null;
         let audioStarted = false;
         const isIOS = react_native_1.Platform.OS === 'ios';
@@ -119,7 +190,8 @@ exports.BugSession = {
             const best = await calibrate(clock, async () => (await request('/clock')).monoMs);
             collector = new core_1.Collector(clock);
             const captureBackend = isIOS ? 'replaykit' : useNativeCapture ? 'mediaprojection' : 'adb';
-            const result = await request('/sessions/start', { device: options.device, application: options.application, captureBackend, startedAt: new Date(Date.now() - clock.now()).toISOString() });
+            const context = await recordingContext();
+            const result = await request('/sessions/start', { device: context.device, application: context.application, captureBackend, startedAt: new Date(Date.now() - clock.now()).toISOString() });
             createdId = result.id;
             const nativeStart = useNativeCapture ? await options.capture.start() : undefined;
             const audioStartMs = clock.now();
@@ -136,8 +208,9 @@ exports.BugSession = {
                 uncertaintyMs: best.rtt / 2, captureBackend,
                 ...(nativeClock ? { nativeOffsetMs: nativeClock.offset, nativeUncertaintyMs: nativeClock.rtt / 2 } : {}),
             };
-            restore = install(collector);
+            preRecordEvents = telemetry.begin(collector);
             state = 'recording';
+            setPhase({ kind: 'recording', startedAt: Date.now() });
             collector.add('navigation', { from: null, to: currentScreen });
             return session.id;
         }
@@ -148,9 +221,12 @@ exports.BugSession = {
                 await options.audio.stop().catch(() => null);
             if (createdId)
                 await request(`/sessions/${createdId}/abort`, {}).catch(() => { });
+            telemetry.end();
+            preRecordEvents = [];
             collector = null;
             session = null;
             state = 'idle';
+            setPhase({ kind: 'failed', message: (0, core_1.safeText)(error) });
             throw error;
         }
     },
@@ -158,11 +234,14 @@ exports.BugSession = {
         if (state !== 'recording' || !session || !collector)
             throw new Error('No recording is active');
         state = 'stopping';
+        setPhase({ kind: 'uploading' });
         const c = collector;
         const active = session;
         c.add('session-stop', {});
-        restore?.();
-        restore = null;
+        telemetry.end();
+        // Sent separately from `events` so recorders that predate pre-record support ignore them.
+        const before = preRecordEvents;
+        preRecordEvents = [];
         try {
             let media;
             if (active.captureBackend === 'replaykit') {
@@ -192,16 +271,19 @@ exports.BugSession = {
                 await options.audio.upload(`${options.recorderUrl}/sessions/${active.id}/audio`, uri, authHeaders());
                 media = { ...active, audioEndMs };
             }
-            return await request(`/sessions/${active.id}/stop`, {
-                durationMs: c.clock.now(), events: c.events, droppedEvents: c.dropped,
+            const result = await request(`/sessions/${active.id}/stop`, {
+                durationMs: c.clock.now(), events: c.events, droppedEvents: c.dropped, preRecordEvents: before,
                 media,
             });
+            setPhase({ kind: 'sent' });
+            return result;
         }
         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: (0, core_1.safeText)(error), events: c.events, media: active, durationMs: c.clock.now() }).catch(() => { });
+            await request(`/sessions/${active.id}/abort`, { reason: (0, core_1.safeText)(error), events: c.events, preRecordEvents: before, media: active, durationMs: c.clock.now() }).catch(() => { });
+            setPhase({ kind: 'failed', message: (0, core_1.safeText)(error) });
             throw error;
         }
         finally {
@@ -211,14 +293,40 @@ exports.BugSession = {
         }
     },
     trackAction(action) {
-        collector?.add('action', { target: (0, core_1.safeText)(action.name), screen: (0, core_1.safeText)(action.screen ?? currentScreen) });
+        if (telemetry.active)
+            telemetry.add('action', { target: (0, core_1.safeText)(action.name), screen: (0, core_1.safeText)(action.screen ?? currentScreen) });
     },
     trackNavigation(screen) {
-        if (currentScreen !== screen)
-            collector?.add('navigation', { from: currentScreen, to: screen });
+        if (currentScreen !== screen && telemetry.active)
+            telemetry.add('navigation', { from: currentScreen, to: screen });
         currentScreen = screen;
     },
     captureError,
+    Trigger: (0, trigger_1.createTrigger)({
+        getPhase: () => phase,
+        subscribe(listener) { phaseListeners.add(listener); return () => { phaseListeners.delete(listener); }; },
+        async toggle() {
+            if (state === 'recording')
+                await exports.BugSession.stop();
+            else if (state === 'idle')
+                await exports.BugSession.start();
+        },
+        fail(error) { if (phase.kind !== 'failed')
+            setPhase({ kind: 'failed', message: (0, core_1.safeText)(error) }); },
+        onAudioLevel: listener => options?.capture?.onAudioLevel?.(listener) ?? null,
+        safeAreaInsets: async () => options?.capture?.safeAreaInsets ? options.capture.safeAreaInsets() : null,
+        annotate(annotation) { if (state === 'recording')
+            telemetry.add('annotation', { ...annotation, screen: currentScreen }); },
+    }),
+    /**
+     * Expo Router error boundary that reports render errors (which never reach the
+     * global error handler). In a route or layout file:
+     * `export const ErrorBoundary = BugSession.ErrorBoundary;`
+     */
+    ErrorBoundary({ error, retry }) {
+        react_1.default.useEffect(() => { captureError(error, 'render'); }, [error]);
+        return (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.boundary, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.boundaryTitle, children: "Something went wrong" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.boundaryMessage, children: error.message }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", onPress: () => { void retry(); }, style: styles.boundaryRetry, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.boundaryRetryText, children: "Try again" }) })] });
+    },
     /** Use with NavigationContainer.onStateChange for non-Expo React Navigation apps. */
     navigationListener(ref) {
         return () => { const route = ref.getCurrentRoute(); if (route)
@@ -227,79 +335,11 @@ exports.BugSession = {
     Touchable({ name, screen, onPress, ...props }) {
         return (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ...props, onPress: e => { exports.BugSession.trackAction({ name, screen }); onPress?.(e); } });
     },
-    Trigger({ position = 'bottom-right', offset = 24, draggable = true, style, accessibilityLabel, children, onError }) {
-        const { width, height } = (0, react_native_1.useWindowDimensions)();
-        const [point, setPoint] = react_1.default.useState(() => triggerPosition
-            ? clampTriggerPosition(triggerPosition, width, height)
-            : clampTriggerPosition({
-                left: position.includes('right') ? width - triggerSize - offset : offset,
-                top: position.includes('bottom') ? height - triggerSize - offset : offset,
-            }, width, height));
-        const pointRef = react_1.default.useRef(point);
-        pointRef.current = point;
-        const drag = react_1.default.useRef(null);
-        if (!drag.current)
-            drag.current = new react_native_1.Animated.ValueXY();
-        const dragStart = react_1.default.useRef(point);
-        react_1.default.useEffect(() => {
-            const next = clampTriggerPosition(pointRef.current, width, height);
-            pointRef.current = next;
-            setPoint(next);
-            if (triggerPosition)
-                triggerPosition = next;
-            drag.current?.setValue({ x: 0, y: 0 });
-        }, [width, height]);
-        const responder = react_1.default.useMemo(() => react_native_1.PanResponder.create({
-            onStartShouldSetPanResponder: () => false,
-            onMoveShouldSetPanResponder: (_, gesture) => draggable && Math.hypot(gesture.dx, gesture.dy) > 7,
-            onPanResponderGrant: () => { dragStart.current = pointRef.current; },
-            onPanResponderMove: (_, gesture) => {
-                const next = clampTriggerPosition({ left: dragStart.current.left + gesture.dx, top: dragStart.current.top + gesture.dy }, width, height);
-                drag.current?.setValue({ x: next.left - dragStart.current.left, y: next.top - dragStart.current.top });
-            },
-            onPanResponderRelease: (_, gesture) => {
-                const next = clampTriggerPosition({ left: dragStart.current.left + gesture.dx, top: dragStart.current.top + gesture.dy }, width, height);
-                triggerPosition = next;
-                pointRef.current = next;
-                setPoint(next);
-                drag.current?.setValue({ x: 0, y: 0 });
-            },
-            onPanResponderTerminate: (_, gesture) => {
-                const next = clampTriggerPosition({ left: dragStart.current.left + gesture.dx, top: dragStart.current.top + gesture.dy }, width, height);
-                triggerPosition = next;
-                pointRef.current = next;
-                setPoint(next);
-                drag.current?.setValue({ x: 0, y: 0 });
-            },
-        }), [draggable, width, height]);
-        const [busy, setBusy] = react_1.default.useState(false);
-        const recording = state === 'recording';
-        const toggle = async () => {
-            if (busy)
-                return;
-            setBusy(true);
-            try {
-                if (state === 'recording')
-                    await exports.BugSession.stop();
-                else
-                    await exports.BugSession.start();
-            }
-            catch (error) {
-                onError?.(error);
-            }
-            finally {
-                setBusy(false);
-            }
-        };
-        return (0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "box-none", style: styles.triggerLayer, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { ...(draggable ? responder.panHandlers : {}), style: [styles.triggerPosition, { left: point.left, top: point.top, transform: drag.current?.getTranslateTransform() }], children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: accessibilityLabel ?? (recording ? 'Stop BugSession recording' : 'Start BugSession recording'), accessibilityHint: draggable ? 'Drag to move the BugSession button' : undefined, accessibilityState: { busy, selected: recording }, disabled: busy, onPress: () => { void toggle(); }, style: [styles.trigger, recording && styles.triggerRecording, style], children: children ?? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.triggerMark, children: "b" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.triggerDot, recording && styles.triggerDotRecording] })] }) }) }) });
-    },
 };
 const styles = react_native_1.StyleSheet.create({
-    triggerLayer: { ...react_native_1.StyleSheet.absoluteFill, zIndex: 9999 },
-    triggerPosition: { position: 'absolute' },
-    trigger: { width: 58, height: 58, borderRadius: 29, backgroundColor: '#173B34', alignItems: 'center', justifyContent: 'center', elevation: 8, shadowColor: '#000', shadowOpacity: 0.24, shadowRadius: 8, shadowOffset: { width: 0, height: 4 } },
-    triggerRecording: { backgroundColor: '#B9382F' },
-    triggerMark: { color: '#F4F4EC', fontSize: 31, fontWeight: '800', lineHeight: 38 },
-    triggerDot: { position: 'absolute', right: 9, bottom: 9, width: 10, height: 10, borderRadius: 5, backgroundColor: '#D8F36A', borderWidth: 1, borderColor: '#173B34' },
-    triggerDotRecording: { backgroundColor: '#FFF', borderColor: '#B9382F' },
+    boundary: { flex: 1, justifyContent: 'center', padding: 24, gap: 12, backgroundColor: '#FFFFFF' },
+    boundaryTitle: { fontSize: 22, fontWeight: '700', color: '#111111' },
+    boundaryMessage: { fontSize: 15, color: '#555555' },
+    boundaryRetry: { alignSelf: 'flex-start', paddingVertical: 10, paddingHorizontal: 16, borderRadius: 8, backgroundColor: '#173B34' },
+    boundaryRetryText: { color: '#F4F4EC', fontWeight: '700' },
 });