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

package/README.md

@@ -4,7 +4,7 @@ Opt-in screen recording, microphone narration and bounded runtime telemetry for
 
 ## Compatibility
 
-The SDK supports React 18.3.1–19.x and React Native 0.76–0.88. Expo SDK 54–58 are supported; SDK 52–53 are best effort. CI builds Android against SDK 52, 53, 54, 57 and 58. Each Expo SDK selects its matching React and React Native versions; do not mix versions manually. iOS and Android require a native build and `@bugsession/capture-native`; Expo Go cannot capture screen video. Android uses MediaProjection and asks for screen-capture consent every session. The hosted recorder admits one session at a time.
+The SDK supports React 18.3.1–19.x and React Native 0.76–0.88. Expo SDK 54–58 are supported; SDK 52–53 are best effort. CI builds Android against SDK 52–58 and iOS simulators against SDK 52 and 54–58. Each Expo SDK selects its matching React and React Native versions; do not mix versions manually. iOS and Android require a native build and `@bugsession/capture-native`; Expo Go cannot capture screen video. Android uses MediaProjection and asks for screen-capture consent every session. The hosted recorder admits one session at a time.
 
 ## Install
 
@@ -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. Its default position is `bottom-right`; configure `position` as `bottom-left`, `top-right`, or `top-left`, and adjust `offset` in points. Render it as an overlay above the app navigator. 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,14 +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;
-    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: {
@@ -37,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(): {
@@ -47,5 +56,4 @@ export declare const BugSession: {
         name: string;
         screen?: string;
     }): React.JSX.Element;
-    Trigger({ position, offset, style, accessibilityLabel, children, onError }: BugSessionTriggerProps): React.JSX.Element;
 };

package/dist/index.js

@@ -3,25 +3,75 @@ 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;
+// 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 {
+        device: compact({ ...device, ...native?.device, ...options.device }),
+        application: compact({ ...application, ...native?.application, ...options.application }),
+    };
+}
 function authHeaders() {
     return options.recorderToken ? { Authorization: `Bearer ${options.recorderToken}` } : {};
 }
@@ -46,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() {
@@ -96,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';
@@ -111,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();
@@ -128,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;
         }
@@ -140,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;
         }
     },
@@ -150,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') {
@@ -184,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 {
@@ -203,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)
@@ -219,36 +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, style, accessibilityLabel, children, onError }) {
-        const [busy, setBusy] = react_1.default.useState(false);
-        const recording = state === 'recording';
-        const edge = position.includes('right') ? { right: offset } : { left: offset };
-        const vertical = position.includes('bottom') ? { bottom: offset } : { top: offset };
-        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, edge, vertical], children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: accessibilityLabel ?? (recording ? 'Stop BugSession recording' : 'Start BugSession recording'), 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: { position: 'absolute', zIndex: 9999 },
-    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' },
 });

package/dist/trigger.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type IndicatorPhase = {
+    kind: 'idle';
+} | {
+    kind: 'starting';
+} | {
+    kind: 'recording';
+    startedAt: number;
+} | {
+    kind: 'uploading';
+} | {
+    kind: 'sent';
+} | {
+    kind: 'failed';
+    message: string;
+};
+export type Annotation = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    screenWidth: number;
+    screenHeight: number;
+    points: number;
+};
+/** What the trigger needs from the SDK; injected to avoid a circular import. */
+export type TriggerController = {
+    getPhase(): IndicatorPhase;
+    subscribe(listener: () => void): () => void;
+    toggle(): Promise<void>;
+    fail(error: unknown): void;
+    annotate(annotation: Annotation): void;
+    onAudioLevel(listener: (level: number) => void): (() => void) | null;
+    safeAreaInsets(): Promise<{
+        top: number;
+        bottom: number;
+    } | null>;
+};
+export type BugSessionTriggerProps = {
+    /** Initial screen edge (left/right) and half (top/bottom) of the side tab. */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** Initial distance in points between the tab and the top or bottom safe area. */
+    offset?: number;
+    /** Drag the tab along either edge; it snaps to the nearer side. */
+    draggable?: boolean;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+    /** Replaces the idle tab's record mark. */
+    children?: React.ReactNode;
+    onError?: (error: unknown) => void;
+    /** Stops automatically so the upload stays under the recorder's limit. Defaults to 150. */
+    maxDurationSeconds?: number;
+};
+export declare function createTrigger(controller: TriggerController): ({ position, offset, draggable, style, accessibilityLabel, children, onError, maxDurationSeconds }: BugSessionTriggerProps) => React.JSX.Element;