@astratest/react-native 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kiswani
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,9 @@
-# Temporary Holding Version
+# @astratest/react-native
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+```tsx
+import { AstraTest, AstraTestProvider } from "@astratest/react-native";
+AstraTest.start("pk_test_…", { appVersion: "1.4.0" });
+export default () => <AstraTestProvider><App /></AstraTestProvider>;
+```
+
+Records fetch / XMLHttpRequest calls, console output and uncaught errors. Install `react-native-view-shot` for screenshots; wrap password fields and anything private in `<AstraPrivate>`.

package/lib/capture.d.ts

@@ -0,0 +1,29 @@
+export type LogLine = {
+    level: string;
+    message: string;
+    at: number;
+};
+export type NetCall = {
+    method: string;
+    url: string;
+    status: number;
+    durationMs: number;
+    at: number;
+};
+export declare class Ring<T> {
+    private cap;
+    private q;
+    constructor(cap: number);
+    push(x: T): void;
+    all(): T[];
+}
+export declare const logs: Ring<LogLine>;
+export declare const network: Ring<NetCall>;
+export declare const setOwnHost: (h: string) => void;
+export declare function log(level: string, message: string): void;
+export declare function cleanUrl(u: string): string;
+export declare function record(method: string, url: string, status: number, durationMs: number): void;
+/** Mirrors console.* and uncaught JS errors into the report log. */
+export declare function patchConsole(): void;
+/** fetch() in React Native runs on XMLHttpRequest, so patching it records fetch, axios and the rest. */
+export declare function patchXhr(): void;

package/lib/capture.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setOwnHost = exports.network = exports.logs = exports.Ring = void 0;
+exports.log = log;
+exports.cleanUrl = cleanUrl;
+exports.record = record;
+exports.patchConsole = patchConsole;
+exports.patchXhr = patchXhr;
+class Ring {
+    constructor(cap) {
+        this.cap = cap;
+        this.q = [];
+    }
+    push(x) { this.q.push(x); if (this.q.length > this.cap)
+        this.q.splice(0, this.q.length - this.cap); }
+    all() { return this.q.slice(); }
+}
+exports.Ring = Ring;
+exports.logs = new Ring(200);
+exports.network = new Ring(100);
+let ownHost = "astratest.dev";
+const setOwnHost = (h) => { ownHost = h; };
+exports.setOwnHost = setOwnHost;
+const str = (a) => {
+    if (typeof a === "string")
+        return a;
+    if (a instanceof Error)
+        return `${a.name}: ${a.message}`;
+    try {
+        return JSON.stringify(a);
+    }
+    catch {
+        return String(a);
+    }
+};
+function log(level, message) {
+    const m = message.slice(0, 2000);
+    if (!m.trim() || m.startsWith("[AstraTest]"))
+        return;
+    exports.logs.push({ level, message: m, at: Date.now() });
+}
+function cleanUrl(u) {
+    return u.split("#")[0].split("?")[0].slice(0, 500);
+}
+function record(method, url, status, durationMs) {
+    if (url.includes(ownHost))
+        return;
+    exports.network.push({ method: method.toUpperCase(), url: cleanUrl(url), status, durationMs, at: Date.now() });
+}
+let consolePatched = false;
+/** Mirrors console.* and uncaught JS errors into the report log. */
+function patchConsole() {
+    if (consolePatched)
+        return;
+    consolePatched = true;
+    for (const level of ["log", "info", "warn", "error"]) {
+        const orig = console[level].bind(console);
+        console[level] = (...args) => { log(level === "info" ? "log" : level, args.map(str).join(" ")); orig(...args); };
+    }
+    const EU = globalThis.ErrorUtils;
+    if (EU) {
+        const prev = EU.getGlobalHandler();
+        EU.setGlobalHandler((e, fatal) => { log("error", `${fatal ? "Fatal: " : ""}${str(e)}`); prev(e, fatal); });
+    }
+}
+let xhrPatched = false;
+/** fetch() in React Native runs on XMLHttpRequest, so patching it records fetch, axios and the rest. */
+function patchXhr() {
+    if (xhrPatched)
+        return;
+    const X = globalThis.XMLHttpRequest;
+    if (!X)
+        return;
+    xhrPatched = true;
+    const open = X.prototype.open, send = X.prototype.send;
+    X.prototype.open = function (method, url, ...rest) {
+        this.__astra = { m: method, u: String(url), t: 0 };
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return open.call(this, method, url, ...rest);
+    };
+    X.prototype.send = function (body) {
+        const a = this.__astra;
+        if (a) {
+            a.t = Date.now();
+            this.addEventListener("loadend", () => record(a.m, a.u, this.status, Date.now() - a.t));
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return send.call(this, body);
+    };
+}

package/lib/index.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+export type AstraTestOptions = {
+    /** Your app's version, such as "1.4.0". */
+    appVersion?: string;
+    /** Your build number. */
+    build?: string;
+    /** Show the floating Report button. Defaults to true for pk_test_ keys, false for pk_live_. */
+    showButton?: boolean;
+    /** Record fetch / XMLHttpRequest calls (method, URL without query, status, timing). */
+    captureNetwork?: boolean;
+    /** Attach console output and uncaught errors to reports. */
+    captureLogs?: boolean;
+    /** Where reports are sent. */
+    host?: string;
+};
+export type SentReport = {
+    ref: string;
+    url?: string;
+    title?: string;
+};
+export declare const AstraTest: {
+    /** Starts Astra Test. Call once, before your app renders. Then wrap your app in <AstraTestProvider>. */
+    start(key: string, options?: AstraTestOptions): void;
+    /** Says who is testing, so reports show their name and they can be asked if a fix works. */
+    identify(user: {
+        id?: string;
+        email?: string;
+        name?: string;
+    }): void;
+    /** The test case being run, such as "UAT-02". */
+    setTestCase(ref?: string): void;
+    /** The screen the user is on, such as "Checkout". Call it from your navigation's state listener. */
+    setScreen(name?: string): void;
+    /** Adds a line to the log attached to reports. */
+    log(message: string, level?: string): void;
+    /** Opens the report sheet. */
+    showReport(): void;
+    /** Sends a report without the sheet, for example from your own feedback form. */
+    send(description: string): Promise<SentReport>;
+};
+/** Covers its children in report screenshots. Wrap password fields and anything private in it. */
+export declare function AstraPrivate({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** Wrap your whole app in this, inside your providers. Adds the Report button and the report sheet. */
+export declare function AstraTestProvider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export default AstraTest;

package/lib/index.js

@@ -0,0 +1,241 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AstraTest = void 0;
+exports.AstraPrivate = AstraPrivate;
+exports.AstraTestProvider = AstraTestProvider;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const capture_1 = require("./capture");
+const COBALT = "#2F55D4", MIDNIGHT = "#0E1A3D";
+const s = { options: {}, reporter: {} };
+// react-native-view-shot is optional: with it, reports carry a screenshot.
+let captureRef;
+try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    captureRef = require("react-native-view-shot").captureRef;
+}
+catch {
+    captureRef = undefined;
+}
+exports.AstraTest = {
+    /** Starts Astra Test. Call once, before your app renders. Then wrap your app in <AstraTestProvider>. */
+    start(key, options = {}) {
+        if (s.key)
+            return;
+        if (!/^pk_(test|live)_[0-9a-f]{24}$/.test(key)) {
+            console.warn("[AstraTest] That isn't a project key. Copy it from SDK setup in Astra Test.");
+            return;
+        }
+        s.key = key;
+        s.options = options;
+        try {
+            (0, capture_1.setOwnHost)(new URL(options.host ?? "https://astratest.dev").host);
+        }
+        catch { /* keep default */ }
+        if (options.captureLogs !== false)
+            (0, capture_1.patchConsole)();
+        if (options.captureNetwork !== false)
+            (0, capture_1.patchXhr)();
+        if (options.appVersion)
+            post("/v1/builds", { key, platform: react_native_1.Platform.OS, version: options.appVersion, build: options.build ?? "" }).catch(() => undefined);
+    },
+    /** Says who is testing, so reports show their name and they can be asked if a fix works. */
+    identify(user) {
+        s.reporter = Object.fromEntries(Object.entries(user).filter(([, v]) => !!v));
+    },
+    /** The test case being run, such as "UAT-02". */
+    setTestCase(ref) { s.testCase = ref; },
+    /** The screen the user is on, such as "Checkout". Call it from your navigation's state listener. */
+    setScreen(name) { s.screen = name; },
+    /** Adds a line to the log attached to reports. */
+    log(message, level = "log") { (0, capture_1.log)(level, message); },
+    /** Opens the report sheet. */
+    showReport() { s.open?.(); },
+    /** Sends a report without the sheet, for example from your own feedback form. */
+    async send(description) { return send(description, await s.capture?.()); },
+};
+function payload(description, screenshot) {
+    const { width, height } = react_native_1.Dimensions.get("window");
+    const screen = s.screen ?? "App";
+    let locale = "en";
+    try {
+        locale = Intl.DateTimeFormat().resolvedOptions().locale;
+    }
+    catch { /* Intl missing */ }
+    return {
+        key: s.key,
+        description,
+        page: { url: `app://react-native/${screen}`, title: screen },
+        device: {
+            platform: react_native_1.Platform.OS,
+            os: `${react_native_1.Platform.OS === "ios" ? "iOS" : react_native_1.Platform.OS === "android" ? "Android" : react_native_1.Platform.OS} ${react_native_1.Platform.Version}`,
+            browser: `React Native${react_native_1.Platform.constants?.reactNativeVersion ? ` ${react_native_1.Platform.constants.reactNativeVersion.major}.${react_native_1.Platform.constants.reactNativeVersion.minor}` : ""}`,
+            viewport: `${Math.round(width)} × ${Math.round(height)}`,
+            locale,
+            appVersion: s.options.appVersion,
+            build: s.options.build,
+        },
+        console: capture_1.logs.all().slice(-60),
+        network: capture_1.network.all().slice(-60),
+        reporter: Object.keys(s.reporter).length ? s.reporter : undefined,
+        testCaseRef: s.testCase,
+        screenshot,
+    };
+}
+async function post(path, body) {
+    const res = await fetch(`${s.options.host ?? "https://astratest.dev"}${path}`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body) });
+    const j = (await res.json().catch(() => ({})));
+    if (!res.ok)
+        throw new Error(j.error ?? `Couldn't send the report (${res.status})`);
+    return j;
+}
+async function send(description, screenshot) {
+    if (!s.key)
+        throw new Error("Astra Test isn't started");
+    const j = await post("/v1/reports", payload(description, screenshot));
+    if (!j.ref)
+        throw new Error(j.error ?? "Couldn't send the report");
+    return { ref: j.ref, url: j.url, title: j.title };
+}
+const Masking = (0, react_1.createContext)(false);
+/** Covers its children in report screenshots. Wrap password fields and anything private in it. */
+function AstraPrivate({ children }) {
+    const masking = (0, react_1.useContext)(Masking);
+    return react_1.default.createElement(react_native_1.View, null,
+        children,
+        masking && react_1.default.createElement(react_native_1.View, { style: [react_native_1.StyleSheet.absoluteFill, { backgroundColor: "#000" }] }));
+}
+/** Wrap your whole app in this, inside your providers. Adds the Report button and the report sheet. */
+function AstraTestProvider({ children }) {
+    const root = (0, react_1.useRef)(null);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [masking, setMasking] = (0, react_1.useState)(false);
+    const [shot, setShot] = (0, react_1.useState)();
+    const [text, setText] = (0, react_1.useState)("");
+    const [sending, setSending] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)();
+    const [sent, setSent] = (0, react_1.useState)();
+    const capture = (0, react_1.useCallback)(async () => {
+        if (!captureRef || !root.current)
+            return undefined;
+        setMasking(true);
+        await new Promise((r) => setTimeout(r, 60));
+        try {
+            const b64 = await captureRef(root.current, { format: "jpg", quality: 0.7, result: "base64" });
+            return `data:image/jpeg;base64,${b64}`;
+        }
+        catch {
+            return undefined;
+        }
+        finally {
+            setMasking(false);
+        }
+    }, []);
+    const show = (0, react_1.useCallback)(async () => {
+        if (!s.key || open)
+            return;
+        setShot(await capture());
+        setText("");
+        setError(undefined);
+        setSent(undefined);
+        setOpen(true);
+    }, [capture, open]);
+    (0, react_1.useEffect)(() => { s.open = show; s.capture = capture; return () => { s.open = undefined; s.capture = undefined; }; }, [show, capture]);
+    const submit = async () => {
+        const t = text.trim();
+        if (t.length < 3 || sending)
+            return;
+        setSending(true);
+        setError(undefined);
+        try {
+            setSent(await send(t, shot));
+        }
+        catch (e) {
+            setError(e.message);
+        }
+        finally {
+            setSending(false);
+        }
+    };
+    const showButton = !!s.key && (s.options.showButton ?? s.key.startsWith("pk_test_"));
+    const nNet = capture_1.network.all().length, nLog = capture_1.logs.all().length;
+    return (react_1.default.createElement(Masking.Provider, { value: masking },
+        react_1.default.createElement(react_native_1.View, { ref: root, collapsable: false, style: { flex: 1 } }, children),
+        showButton && !open && (react_1.default.createElement(react_native_1.Pressable, { accessibilityLabel: "Report an issue", onPress: show, style: st.fab },
+            react_1.default.createElement(react_native_1.Text, { style: st.fabText }, "\u2726  Report"))),
+        react_1.default.createElement(react_native_1.Modal, { visible: open, transparent: true, animationType: "slide", onRequestClose: () => setOpen(false) },
+            react_1.default.createElement(react_native_1.KeyboardAvoidingView, { behavior: react_native_1.Platform.OS === "ios" ? "padding" : undefined, style: st.backdrop },
+                react_1.default.createElement(react_native_1.Pressable, { style: react_native_1.StyleSheet.absoluteFill, onPress: () => setOpen(false) }),
+                react_1.default.createElement(react_native_1.View, { style: st.sheet }, sent ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(react_native_1.Text, { style: st.sent },
+                        "\u2713  Sent as ",
+                        sent.ref),
+                    react_1.default.createElement(react_native_1.Text, { style: st.muted }, "Thanks. We'll let you know when it's fixed."),
+                    react_1.default.createElement(react_native_1.Pressable, { onPress: () => setOpen(false), style: st.done },
+                        react_1.default.createElement(react_native_1.Text, { style: { color: COBALT, fontWeight: "600" } }, "Done")))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(react_native_1.View, { style: st.row },
+                        react_1.default.createElement(react_native_1.Text, { style: st.title }, "Report an issue"),
+                        react_1.default.createElement(react_native_1.Pressable, { onPress: () => setOpen(false) },
+                            react_1.default.createElement(react_native_1.Text, { style: { color: COBALT } }, "Cancel"))),
+                    react_1.default.createElement(react_native_1.Text, { style: st.label },
+                        "What happened",
+                        s.screen ? ` on ${s.screen}` : "",
+                        "?"),
+                    react_1.default.createElement(react_native_1.TextInput, { value: text, onChangeText: setText, placeholder: "Say it in your own words", multiline: true, style: st.input, autoFocus: true }),
+                    react_1.default.createElement(react_native_1.Text, { style: st.muted },
+                        "Attached: ",
+                        [shot ? "Screenshot" : null, nNet ? `${nNet} requests` : null, nLog ? `${nLog} log lines` : null, "device details"].filter(Boolean).join(" · ")),
+                    error && react_1.default.createElement(react_native_1.Text, { style: st.error }, error),
+                    react_1.default.createElement(react_native_1.Pressable, { onPress: submit, disabled: sending || text.trim().length < 3, style: [st.send, { opacity: sending || text.trim().length < 3 ? 0.45 : 1 }] },
+                        react_1.default.createElement(react_native_1.Text, { style: st.sendText }, sending ? "Sending…" : "Send report")))))))));
+}
+const st = react_native_1.StyleSheet.create({
+    fab: { position: "absolute", right: 16, bottom: 40, backgroundColor: MIDNIGHT, paddingHorizontal: 16, paddingVertical: 10, borderRadius: 999, elevation: 6, shadowColor: "#000", shadowOpacity: 0.25, shadowRadius: 8, shadowOffset: { width: 0, height: 3 } },
+    fabText: { color: "#fff", fontWeight: "600", fontSize: 14 },
+    backdrop: { flex: 1, justifyContent: "flex-end", backgroundColor: "rgba(0,0,0,0.4)" },
+    sheet: { backgroundColor: "#fff", borderTopLeftRadius: 18, borderTopRightRadius: 18, padding: 20, paddingBottom: 34, gap: 10 },
+    row: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
+    title: { fontSize: 18, fontWeight: "700", color: "#0F1115" },
+    label: { fontSize: 12, color: "#646B78", marginTop: 6 },
+    input: { minHeight: 90, borderWidth: 1, borderColor: "#8A909C", borderRadius: 8, padding: 10, fontSize: 15, textAlignVertical: "top" },
+    muted: { fontSize: 12, color: "#646B78" },
+    error: { fontSize: 13, color: "#B42318" },
+    send: { backgroundColor: COBALT, borderRadius: 10, height: 46, alignItems: "center", justifyContent: "center", marginTop: 4 },
+    sendText: { color: "#fff", fontWeight: "600", fontSize: 15 },
+    sent: { fontSize: 17, fontWeight: "700", color: "#0E7C66" },
+    done: { alignSelf: "flex-end", padding: 8 },
+});
+exports.default = exports.AstraTest;

package/package.json

@@ -1,6 +1,51 @@
 {
   "name": "@astratest/react-native",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "In-app bug reporting for Astra Test. Testers report from inside your app; a screenshot, requests, logs and device details are attached.",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "license": "MIT",
+  "homepage": "https://astratest.dev",
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "test": "node test/payload.test.mjs",
+    "prepublishOnly": "tsc && node test/payload.test.mjs"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.72",
+    "react-native-view-shot": ">=3.6"
+  },
+  "peerDependenciesMeta": {
+    "react-native-view-shot": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "react": "18.3.1",
+    "react-native": "0.76.5",
+    "typescript": "^5.6.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Kiswani/astra-test-react-native"
+  },
+  "keywords": [
+    "bug reporting",
+    "uat",
+    "feedback",
+    "react-native",
+    "astra test"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/capture.ts

@@ -0,0 +1,75 @@
+export type LogLine = { level: string; message: string; at: number };
+export type NetCall = { method: string; url: string; status: number; durationMs: number; at: number };
+
+export class Ring<T> {
+  private q: T[] = [];
+  constructor(private cap: number) {}
+  push(x: T) { this.q.push(x); if (this.q.length > this.cap) this.q.splice(0, this.q.length - this.cap); }
+  all() { return this.q.slice(); }
+}
+
+export const logs = new Ring<LogLine>(200);
+export const network = new Ring<NetCall>(100);
+let ownHost = "astratest.dev";
+export const setOwnHost = (h: string) => { ownHost = h; };
+
+const str = (a: unknown) => {
+  if (typeof a === "string") return a;
+  if (a instanceof Error) return `${a.name}: ${a.message}`;
+  try { return JSON.stringify(a); } catch { return String(a); }
+};
+
+export function log(level: string, message: string) {
+  const m = message.slice(0, 2000);
+  if (!m.trim() || m.startsWith("[AstraTest]")) return;
+  logs.push({ level, message: m, at: Date.now() });
+}
+
+export function cleanUrl(u: string) {
+  return u.split("#")[0].split("?")[0].slice(0, 500);
+}
+
+export function record(method: string, url: string, status: number, durationMs: number) {
+  if (url.includes(ownHost)) return;
+  network.push({ method: method.toUpperCase(), url: cleanUrl(url), status, durationMs, at: Date.now() });
+}
+
+let consolePatched = false;
+/** Mirrors console.* and uncaught JS errors into the report log. */
+export function patchConsole() {
+  if (consolePatched) return;
+  consolePatched = true;
+  for (const level of ["log", "info", "warn", "error"] as const) {
+    const orig = console[level].bind(console);
+    console[level] = (...args: unknown[]) => { log(level === "info" ? "log" : level, args.map(str).join(" ")); orig(...args); };
+  }
+  const EU = (globalThis as { ErrorUtils?: { getGlobalHandler(): (e: unknown, fatal?: boolean) => void; setGlobalHandler(h: (e: unknown, fatal?: boolean) => void): void } }).ErrorUtils;
+  if (EU) {
+    const prev = EU.getGlobalHandler();
+    EU.setGlobalHandler((e, fatal) => { log("error", `${fatal ? "Fatal: " : ""}${str(e)}`); prev(e, fatal); });
+  }
+}
+
+let xhrPatched = false;
+/** fetch() in React Native runs on XMLHttpRequest, so patching it records fetch, axios and the rest. */
+export function patchXhr() {
+  if (xhrPatched) return;
+  const X = (globalThis as { XMLHttpRequest?: { prototype: XMLHttpRequest } }).XMLHttpRequest;
+  if (!X) return;
+  xhrPatched = true;
+  const open = X.prototype.open, send = X.prototype.send;
+  X.prototype.open = function (this: XMLHttpRequest & { __astra?: { m: string; u: string; t: number } }, method: string, url: string | URL, ...rest: unknown[]) {
+    this.__astra = { m: method, u: String(url), t: 0 };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (open as any).call(this, method, url, ...rest);
+  } as typeof open;
+  X.prototype.send = function (this: XMLHttpRequest & { __astra?: { m: string; u: string; t: number } }, body?: unknown) {
+    const a = this.__astra;
+    if (a) {
+      a.t = Date.now();
+      this.addEventListener("loadend", () => record(a.m, a.u, this.status, Date.now() - a.t));
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (send as any).call(this, body);
+  };
+}

package/src/index.tsx

@@ -0,0 +1,209 @@
+import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { Dimensions, KeyboardAvoidingView, Modal, Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+import { log as addLog, logs, network, patchConsole, patchXhr, setOwnHost } from "./capture";
+
+export type AstraTestOptions = {
+  /** Your app's version, such as "1.4.0". */
+  appVersion?: string;
+  /** Your build number. */
+  build?: string;
+  /** Show the floating Report button. Defaults to true for pk_test_ keys, false for pk_live_. */
+  showButton?: boolean;
+  /** Record fetch / XMLHttpRequest calls (method, URL without query, status, timing). */
+  captureNetwork?: boolean;
+  /** Attach console output and uncaught errors to reports. */
+  captureLogs?: boolean;
+  /** Where reports are sent. */
+  host?: string;
+};
+
+export type SentReport = { ref: string; url?: string; title?: string };
+
+const COBALT = "#2F55D4", MIDNIGHT = "#0E1A3D";
+const s: { key?: string; options: AstraTestOptions; reporter: Record<string, string>; testCase?: string; screen?: string; open?: () => void; capture?: () => Promise<string | undefined> } = { options: {}, reporter: {} };
+
+// react-native-view-shot is optional: with it, reports carry a screenshot.
+let captureRef: ((ref: unknown, opts: object) => Promise<string>) | undefined;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  captureRef = require("react-native-view-shot").captureRef;
+} catch {
+  captureRef = undefined;
+}
+
+export const AstraTest = {
+  /** Starts Astra Test. Call once, before your app renders. Then wrap your app in <AstraTestProvider>. */
+  start(key: string, options: AstraTestOptions = {}) {
+    if (s.key) return;
+    if (!/^pk_(test|live)_[0-9a-f]{24}$/.test(key)) { console.warn("[AstraTest] That isn't a project key. Copy it from SDK setup in Astra Test."); return; }
+    s.key = key; s.options = options;
+    try { setOwnHost(new URL(options.host ?? "https://astratest.dev").host); } catch { /* keep default */ }
+    if (options.captureLogs !== false) patchConsole();
+    if (options.captureNetwork !== false) patchXhr();
+    if (options.appVersion) post("/v1/builds", { key, platform: Platform.OS, version: options.appVersion, build: options.build ?? "" }).catch(() => undefined);
+  },
+  /** Says who is testing, so reports show their name and they can be asked if a fix works. */
+  identify(user: { id?: string; email?: string; name?: string }) {
+    s.reporter = Object.fromEntries(Object.entries(user).filter(([, v]) => !!v)) as Record<string, string>;
+  },
+  /** The test case being run, such as "UAT-02". */
+  setTestCase(ref?: string) { s.testCase = ref; },
+  /** The screen the user is on, such as "Checkout". Call it from your navigation's state listener. */
+  setScreen(name?: string) { s.screen = name; },
+  /** Adds a line to the log attached to reports. */
+  log(message: string, level = "log") { addLog(level, message); },
+  /** Opens the report sheet. */
+  showReport() { s.open?.(); },
+  /** Sends a report without the sheet, for example from your own feedback form. */
+  async send(description: string): Promise<SentReport> { return send(description, await s.capture?.()); },
+};
+
+function payload(description: string, screenshot?: string) {
+  const { width, height } = Dimensions.get("window");
+  const screen = s.screen ?? "App";
+  let locale = "en";
+  try { locale = Intl.DateTimeFormat().resolvedOptions().locale; } catch { /* Intl missing */ }
+  return {
+    key: s.key,
+    description,
+    page: { url: `app://react-native/${screen}`, title: screen },
+    device: {
+      platform: Platform.OS,
+      os: `${Platform.OS === "ios" ? "iOS" : Platform.OS === "android" ? "Android" : Platform.OS} ${Platform.Version}`,
+      browser: `React Native${(Platform.constants as { reactNativeVersion?: { major: number; minor: number } })?.reactNativeVersion ? ` ${(Platform.constants as { reactNativeVersion: { major: number; minor: number } }).reactNativeVersion.major}.${(Platform.constants as { reactNativeVersion: { major: number; minor: number } }).reactNativeVersion.minor}` : ""}`,
+      viewport: `${Math.round(width)} × ${Math.round(height)}`,
+      locale,
+      appVersion: s.options.appVersion,
+      build: s.options.build,
+    },
+    console: logs.all().slice(-60),
+    network: network.all().slice(-60),
+    reporter: Object.keys(s.reporter).length ? s.reporter : undefined,
+    testCaseRef: s.testCase,
+    screenshot,
+  };
+}
+
+async function post(path: string, body: object) {
+  const res = await fetch(`${s.options.host ?? "https://astratest.dev"}${path}`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body) });
+  const j = (await res.json().catch(() => ({}))) as { ref?: string; url?: string; title?: string; error?: string };
+  if (!res.ok) throw new Error(j.error ?? `Couldn't send the report (${res.status})`);
+  return j;
+}
+
+async function send(description: string, screenshot?: string): Promise<SentReport> {
+  if (!s.key) throw new Error("Astra Test isn't started");
+  const j = await post("/v1/reports", payload(description, screenshot));
+  if (!j.ref) throw new Error(j.error ?? "Couldn't send the report");
+  return { ref: j.ref, url: j.url, title: j.title };
+}
+
+const Masking = createContext(false);
+
+/** Covers its children in report screenshots. Wrap password fields and anything private in it. */
+export function AstraPrivate({ children }: { children: React.ReactNode }) {
+  const masking = useContext(Masking);
+  return <View>{children}{masking && <View style={[StyleSheet.absoluteFill, { backgroundColor: "#000" }]} />}</View>;
+}
+
+/** Wrap your whole app in this, inside your providers. Adds the Report button and the report sheet. */
+export function AstraTestProvider({ children }: { children: React.ReactNode }) {
+  const root = useRef<View>(null);
+  const [open, setOpen] = useState(false);
+  const [masking, setMasking] = useState(false);
+  const [shot, setShot] = useState<string>();
+  const [text, setText] = useState("");
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState<string>();
+  const [sent, setSent] = useState<SentReport>();
+
+  const capture = useCallback(async () => {
+    if (!captureRef || !root.current) return undefined;
+    setMasking(true);
+    await new Promise((r) => setTimeout(r, 60));
+    try {
+      const b64 = await captureRef(root.current, { format: "jpg", quality: 0.7, result: "base64" });
+      return `data:image/jpeg;base64,${b64}`;
+    } catch {
+      return undefined;
+    } finally {
+      setMasking(false);
+    }
+  }, []);
+
+  const show = useCallback(async () => {
+    if (!s.key || open) return;
+    setShot(await capture());
+    setText(""); setError(undefined); setSent(undefined); setOpen(true);
+  }, [capture, open]);
+
+  useEffect(() => { s.open = show; s.capture = capture; return () => { s.open = undefined; s.capture = undefined; }; }, [show, capture]);
+
+  const submit = async () => {
+    const t = text.trim();
+    if (t.length < 3 || sending) return;
+    setSending(true); setError(undefined);
+    try { setSent(await send(t, shot)); } catch (e) { setError((e as Error).message); } finally { setSending(false); }
+  };
+
+  const showButton = !!s.key && (s.options.showButton ?? s.key.startsWith("pk_test_"));
+  const nNet = network.all().length, nLog = logs.all().length;
+
+  return (
+    <Masking.Provider value={masking}>
+      <View ref={root} collapsable={false} style={{ flex: 1 }}>{children}</View>
+      {showButton && !open && (
+        <Pressable accessibilityLabel="Report an issue" onPress={show} style={st.fab}>
+          <Text style={st.fabText}>✦  Report</Text>
+        </Pressable>
+      )}
+      <Modal visible={open} transparent animationType="slide" onRequestClose={() => setOpen(false)}>
+        <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined} style={st.backdrop}>
+          <Pressable style={StyleSheet.absoluteFill} onPress={() => setOpen(false)} />
+          <View style={st.sheet}>
+            {sent ? (
+              <>
+                <Text style={st.sent}>✓  Sent as {sent.ref}</Text>
+                <Text style={st.muted}>Thanks. We'll let you know when it's fixed.</Text>
+                <Pressable onPress={() => setOpen(false)} style={st.done}><Text style={{ color: COBALT, fontWeight: "600" }}>Done</Text></Pressable>
+              </>
+            ) : (
+              <>
+                <View style={st.row}>
+                  <Text style={st.title}>Report an issue</Text>
+                  <Pressable onPress={() => setOpen(false)}><Text style={{ color: COBALT }}>Cancel</Text></Pressable>
+                </View>
+                <Text style={st.label}>What happened{s.screen ? ` on ${s.screen}` : ""}?</Text>
+                <TextInput value={text} onChangeText={setText} placeholder="Say it in your own words" multiline style={st.input} autoFocus />
+                <Text style={st.muted}>Attached: {[shot ? "Screenshot" : null, nNet ? `${nNet} requests` : null, nLog ? `${nLog} log lines` : null, "device details"].filter(Boolean).join(" · ")}</Text>
+                {error && <Text style={st.error}>{error}</Text>}
+                <Pressable onPress={submit} disabled={sending || text.trim().length < 3} style={[st.send, { opacity: sending || text.trim().length < 3 ? 0.45 : 1 }]}>
+                  <Text style={st.sendText}>{sending ? "Sending…" : "Send report"}</Text>
+                </Pressable>
+              </>
+            )}
+          </View>
+        </KeyboardAvoidingView>
+      </Modal>
+    </Masking.Provider>
+  );
+}
+
+const st = StyleSheet.create({
+  fab: { position: "absolute", right: 16, bottom: 40, backgroundColor: MIDNIGHT, paddingHorizontal: 16, paddingVertical: 10, borderRadius: 999, elevation: 6, shadowColor: "#000", shadowOpacity: 0.25, shadowRadius: 8, shadowOffset: { width: 0, height: 3 } },
+  fabText: { color: "#fff", fontWeight: "600", fontSize: 14 },
+  backdrop: { flex: 1, justifyContent: "flex-end", backgroundColor: "rgba(0,0,0,0.4)" },
+  sheet: { backgroundColor: "#fff", borderTopLeftRadius: 18, borderTopRightRadius: 18, padding: 20, paddingBottom: 34, gap: 10 },
+  row: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" },
+  title: { fontSize: 18, fontWeight: "700", color: "#0F1115" },
+  label: { fontSize: 12, color: "#646B78", marginTop: 6 },
+  input: { minHeight: 90, borderWidth: 1, borderColor: "#8A909C", borderRadius: 8, padding: 10, fontSize: 15, textAlignVertical: "top" },
+  muted: { fontSize: 12, color: "#646B78" },
+  error: { fontSize: 13, color: "#B42318" },
+  send: { backgroundColor: COBALT, borderRadius: 10, height: 46, alignItems: "center", justifyContent: "center", marginTop: 4 },
+  sendText: { color: "#fff", fontWeight: "600", fontSize: 15 },
+  sent: { fontSize: 17, fontWeight: "700", color: "#0E7C66" },
+  done: { alignSelf: "flex-end", padding: 8 },
+});
+
+export default AstraTest;