@merittdev/horus-lens 0.5.1 → 0.6.0

package/README.md

@@ -44,6 +44,22 @@ the reporter picks. Use `enabled={isPreviewEnv}` to force the overlay on (e.g. e
 preview deployment). Wrap children with `<Lens>` only when a descendant needs the
 `useLens()` hook for programmatic control.
 
+### React Native (initial implementation)
+
+```tsx
+import { Lens } from '@merittdev/horus-lens/react-native';
+
+<Lens enabled={isQA} accessId="lai_your_access_id"
+  origin="https://www.example.com" route={pathname} />
+```
+
+`enabled` defaults to false. This entry mounts a native issue sheet and captures
+fetch metadata, device/route context and explicitly supplied errors. Console
+capture is opt-in. Supply an origin already allowed by your Lens project.
+Screenshot preview, annotation tools and explicit visual recording are available with native capture support (react-native-view-shot and react-native-svg). Native recording uses image frames; DOM/component inspection and automatic input masking are browser-specific. See
+[the native SDK guide](https://github.com/Meritt-dev/horus-lens/blob/master/packages/react-native/README.md)
+for redaction, hooks and capture controls.
+
 ### Script tag
 
 Context can be pushed before the bundle even loads:

package/dist/browser.cjs

@@ -31,6 +31,260 @@ __export(browser_exports, {
 });
 module.exports = __toCommonJS(browser_exports);
 
+// ../core/dist/chunk-YBVE6CBL.js
+var SDK_NAME = "@merittdev/horus-lens";
+var SDK_VERSION = true ? "0.6.0" : "0.0.0-dev";
+var DEFAULT_ENDPOINT = "https://api.horus.sh";
+var DEFAULT_REPLAY_WINDOW_MS = 15e3;
+var DEFAULT_MAX_CONSOLE_ENTRIES = 200;
+var DEFAULT_MAX_NETWORK_ENTRIES = 100;
+var MAX_ERROR_ENTRIES = 100;
+var CONSOLE_TAIL_SIZE = 50;
+var NETWORK_TAIL_SIZE = 30;
+var MAX_SERIALIZED_ARG_CHARS = 2e3;
+var MAX_DOM_BYTES = 2 * 1024 * 1024;
+var MAX_TARGET_TEXT_CHARS = 200;
+var SCREENSHOT_TIMEOUT_MS = 2e4;
+var SCREENSHOT_RESOURCE_TIMEOUT_MS = 3500;
+var SCREENSHOT_MAX_SCALE = 2;
+var SCREENSHOT_MAX_PIXELS = 25e5;
+var AUTO_CAPTURE_COOLDOWN_MS = 10 * 60 * 1e3;
+var AUTO_CAPTURE_SESSION_CAP = 5;
+var MAX_MANUAL_RECORDING_MS = 12e4;
+var MAX_MANUAL_RECORDING_EVENTS = 1e4;
+var LENS_OVERLAY_HOST_ID = "__lens_root__";
+var RingBuffer = class {
+  constructor(capacity) {
+    this.capacity = capacity;
+    if (capacity <= 0) throw new Error("RingBuffer capacity must be > 0");
+  }
+  capacity;
+  items = [];
+  push(item) {
+    this.items.push(item);
+    if (this.items.length > this.capacity) {
+      this.items.splice(0, this.items.length - this.capacity);
+    }
+  }
+  /** Snapshot of current contents, oldest first. */
+  drain() {
+    return [...this.items];
+  }
+  tail(count) {
+    return this.items.slice(-count);
+  }
+  clear() {
+    this.items = [];
+  }
+  get size() {
+    return this.items.length;
+  }
+};
+var HttpError = class extends Error {
+  constructor(status, message) {
+    super(message);
+    this.status = status;
+    this.name = "HttpError";
+  }
+  status;
+};
+var Transport = class {
+  constructor(config2) {
+    this.config = config2;
+  }
+  config;
+  async initiate(assets) {
+    const body = {
+      accessId: this.config.accessId,
+      assets
+    };
+    return this.postJson(
+      `${this.config.endpoint}/v1/reports/initiate`,
+      body,
+      { retries: 0 }
+    );
+  }
+  /** Record a late-uploaded asset (background screenshot) on a finalized report. */
+  async attachAsset(reportId, asset) {
+    const body = {
+      accessId: this.config.accessId,
+      ...asset
+    };
+    await this.postJson(
+      `${this.config.endpoint}/v1/reports/${encodeURIComponent(reportId)}/assets`,
+      body
+    );
+  }
+  async uploadAsset(upload, blob2, signal) {
+    const session = this.config.signal;
+    const controller = session ? new AbortController() : void 0;
+    const abort = () => controller?.abort();
+    if (session?.aborted || signal?.aborted) abort();
+    session?.addEventListener("abort", abort);
+    if (controller) signal?.addEventListener("abort", abort);
+    try {
+      const response = await (this.config.fetch ?? fetch)(upload.url, {
+        method: upload.method,
+        headers: upload.headers,
+        body: blob2,
+        signal: controller?.signal ?? signal
+      });
+      if (!response.ok) {
+        throw new Error(
+          `Asset upload failed (${upload.kind}): ${response.status}`
+        );
+      }
+    } finally {
+      session?.removeEventListener("abort", abort);
+      if (controller) signal?.removeEventListener("abort", abort);
+    }
+  }
+  async finalize(reportId, metadata, uploadedAssets) {
+    const body = {
+      accessId: this.config.accessId,
+      metadata,
+      uploadedAssets
+    };
+    try {
+      return await this.postJson(
+        `${this.config.endpoint}/v1/reports/${reportId}/finalize`,
+        body
+      );
+    } catch (err) {
+      if (err instanceof HttpError && err.status === 409) {
+        return { reportId, status: "submitted" };
+      }
+      throw err;
+    }
+  }
+  async postJson(url2, body, opts = {}) {
+    const retries = opts.retries ?? 1;
+    let lastError;
+    for (let attempt = 0; attempt <= retries; attempt++) {
+      const controller = this.config.requestTimeoutMs || this.config.signal ? new AbortController() : void 0;
+      const abort = () => controller?.abort();
+      const session = this.config.signal;
+      if (session?.aborted) throw new Error("Capture session ended");
+      session?.addEventListener("abort", abort);
+      const timeout = controller && this.config.requestTimeoutMs ? setTimeout(() => controller.abort(), this.config.requestTimeoutMs) : void 0;
+      try {
+        const response = await (this.config.fetch ?? fetch)(url2, {
+          method: "POST",
+          headers: {
+            "content-type": "application/json",
+            ...this.config.origin ? { Origin: this.config.origin } : {}
+          },
+          body: JSON.stringify(body),
+          ...controller ? { signal: controller.signal } : {}
+        });
+        if (!response.ok) {
+          const text = await response.text().catch(() => "");
+          throw new HttpError(
+            response.status,
+            `Request to ${url2} failed: ${response.status} ${text}`.trim()
+          );
+        }
+        return await response.json();
+      } catch (err) {
+        lastError = err;
+        if (this.config.debug) {
+          console.warn(
+            `[lens] request failed (attempt ${attempt + 1}/${retries + 1})`,
+            err
+          );
+        }
+      } finally {
+        if (timeout !== void 0) clearTimeout(timeout);
+        session?.removeEventListener("abort", abort);
+      }
+    }
+    throw lastError;
+  }
+};
+var LEVELS = ["log", "info", "warn", "error", "debug"];
+function cap(value) {
+  return value.length > MAX_SERIALIZED_ARG_CHARS ? `${value.slice(0, MAX_SERIALIZED_ARG_CHARS)}\u2026[truncated]` : value;
+}
+function serializeArg(value) {
+  if (value === null) return "null";
+  if (value === void 0) return "undefined";
+  const type = typeof value;
+  if (type === "string") return cap(value);
+  if (type === "number" || type === "boolean" || type === "bigint" || type === "symbol") {
+    return String(value);
+  }
+  if (type === "function") {
+    return `[Function: ${value.name || "anonymous"}]`;
+  }
+  if (value instanceof Error) {
+    return cap(value.stack ? `${value.name}: ${value.message}
+${value.stack}` : `${value.name}: ${value.message}`);
+  }
+  try {
+    const seen = /* @__PURE__ */ new WeakSet();
+    const json2 = JSON.stringify(value, (_key, val) => {
+      if (typeof val === "bigint") return String(val);
+      if (typeof val === "function") return "[Function]";
+      if (typeof val === "object" && val !== null) {
+        if (seen.has(val)) return "[Circular]";
+        seen.add(val);
+      }
+      return val;
+    });
+    return cap(json2 ?? String(value));
+  } catch {
+    return cap(String(value));
+  }
+}
+function firstErrorStack(args) {
+  for (const arg of args) {
+    if (arg instanceof Error && arg.stack) return arg.stack;
+  }
+  return void 0;
+}
+function installConsole(consoleBuffer, errorBuffer) {
+  if (typeof console === "undefined") return () => {
+  };
+  const target = console;
+  const restores = [];
+  let active = true;
+  for (const level of LEVELS) {
+    const original = target[level];
+    if (typeof original !== "function") continue;
+    const wrapped = (...args) => {
+      if (!active) {
+        original.apply(console, args);
+        return;
+      }
+      try {
+        const serialized = args.map(serializeArg);
+        const timestamp = Date.now();
+        consoleBuffer.push({ level, args: serialized, timestamp });
+        if (level === "error") {
+          const stack = firstErrorStack(args);
+          const entry = {
+            message: serialized.join(" ") || "console.error",
+            source: "console.error",
+            timestamp
+          };
+          if (stack) entry.stack = stack;
+          errorBuffer.push(entry);
+        }
+      } catch {
+      }
+      original.apply(console, args);
+    };
+    target[level] = wrapped;
+    restores.push(() => {
+      if (target[level] === wrapped) target[level] = original;
+    });
+  }
+  return () => {
+    active = false;
+    for (const restore of restores) restore();
+  };
+}
+
 // ../../node_modules/.pnpm/rrweb@2.1.0/node_modules/rrweb/dist/rrweb.js
 var __defProp2 = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -11680,9 +11934,9 @@ var saveWebGLVar = (value, win, ctx) => {
   }
   return index2;
 };
-function serializeArg(value, win, ctx) {
+function serializeArg2(value, win, ctx) {
   if (value instanceof Array) {
-    return value.map((arg) => serializeArg(arg, win, ctx));
+    return value.map((arg) => serializeArg2(arg, win, ctx));
   } else if (value === null) {
     return value;
   } else if (value instanceof Float32Array || value instanceof Float64Array || value instanceof Int32Array || value instanceof Uint32Array || value instanceof Uint8Array || value instanceof Uint16Array || value instanceof Int16Array || value instanceof Int8Array || value instanceof Uint8ClampedArray) {
@@ -11708,7 +11962,7 @@ function serializeArg(value, win, ctx) {
     return {
       rr_type: name,
       args: [
-        serializeArg(value.buffer, win, ctx),
+        serializeArg2(value.buffer, win, ctx),
         value.byteOffset,
         value.byteLength
       ]
@@ -11731,7 +11985,7 @@ function serializeArg(value, win, ctx) {
     const name = value.constructor.name;
     return {
       rr_type: name,
-      args: [serializeArg(value.data, win, ctx), value.width, value.height]
+      args: [serializeArg2(value.data, win, ctx), value.width, value.height]
     };
   } else if (isInstanceOfWebGLObject(value, win) || typeof value === "object") {
     const name = value.constructor.name;
@@ -11744,7 +11998,7 @@ function serializeArg(value, win, ctx) {
   return value;
 }
 var serializeArgs = (args, win, ctx) => {
-  return args.map((arg) => serializeArg(arg, win, ctx));
+  return args.map((arg) => serializeArg2(arg, win, ctx));
 };
 var isInstanceOfWebGLObject = (value, win) => {
   const webGLConstructorNames = [
@@ -29081,26 +29335,6 @@ var ApiErrorSchema = external_exports.object({
 });
 
 // ../core/dist/index.js
-var SDK_NAME = "@merittdev/horus-lens";
-var SDK_VERSION = true ? "0.5.1" : "0.0.0-dev";
-var DEFAULT_ENDPOINT = "https://api.horus.sh";
-var DEFAULT_REPLAY_WINDOW_MS = 15e3;
-var DEFAULT_MAX_CONSOLE_ENTRIES = 200;
-var DEFAULT_MAX_NETWORK_ENTRIES = 100;
-var MAX_ERROR_ENTRIES = 100;
-var CONSOLE_TAIL_SIZE = 50;
-var NETWORK_TAIL_SIZE = 30;
-var MAX_SERIALIZED_ARG_CHARS = 2e3;
-var MAX_DOM_BYTES = 2 * 1024 * 1024;
-var MAX_TARGET_TEXT_CHARS = 200;
-var SCREENSHOT_TIMEOUT_MS = 2e4;
-var SCREENSHOT_MAX_SCALE = 2;
-var SCREENSHOT_MAX_PIXELS = 25e5;
-var AUTO_CAPTURE_COOLDOWN_MS = 10 * 60 * 1e3;
-var AUTO_CAPTURE_SESSION_CAP = 5;
-var MAX_MANUAL_RECORDING_MS = 12e4;
-var MAX_MANUAL_RECORDING_EVENTS = 1e4;
-var LENS_OVERLAY_HOST_ID = "__lens_root__";
 function autoCaptureSignature(message) {
   return message.toLowerCase().replace(/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/g, "<uuid>").replace(/\d+/g, "<n>").replace(/\s+/g, " ").trim();
 }
@@ -29179,189 +29413,6 @@ function startAutoCapture(client, options = {}) {
     window.removeEventListener("unhandledrejection", onRejection);
   };
 }
-var RingBuffer = class {
-  constructor(capacity) {
-    this.capacity = capacity;
-    if (capacity <= 0) throw new Error("RingBuffer capacity must be > 0");
-  }
-  capacity;
-  items = [];
-  push(item) {
-    this.items.push(item);
-    if (this.items.length > this.capacity) {
-      this.items.splice(0, this.items.length - this.capacity);
-    }
-  }
-  /** Snapshot of current contents, oldest first. */
-  drain() {
-    return [...this.items];
-  }
-  tail(count) {
-    return this.items.slice(-count);
-  }
-  clear() {
-    this.items = [];
-  }
-  get size() {
-    return this.items.length;
-  }
-};
-var HttpError = class extends Error {
-  constructor(status, message) {
-    super(message);
-    this.status = status;
-    this.name = "HttpError";
-  }
-  status;
-};
-var Transport = class {
-  constructor(config2) {
-    this.config = config2;
-  }
-  config;
-  async initiate(assets) {
-    const body = { accessId: this.config.accessId, assets };
-    return this.postJson(
-      `${this.config.endpoint}/v1/reports/initiate`,
-      body,
-      { retries: 0 }
-    );
-  }
-  /** Record a late-uploaded asset (background screenshot) on a finalized report. */
-  async attachAsset(reportId, asset) {
-    const body = { accessId: this.config.accessId, ...asset };
-    await this.postJson(`${this.config.endpoint}/v1/reports/${encodeURIComponent(reportId)}/assets`, body);
-  }
-  async uploadAsset(upload, blob2, signal) {
-    const response = await fetch(upload.url, {
-      method: upload.method,
-      headers: upload.headers,
-      body: blob2,
-      signal
-    });
-    if (!response.ok) {
-      throw new Error(`Asset upload failed (${upload.kind}): ${response.status}`);
-    }
-  }
-  async finalize(reportId, metadata, uploadedAssets) {
-    const body = { accessId: this.config.accessId, metadata, uploadedAssets };
-    try {
-      return await this.postJson(
-        `${this.config.endpoint}/v1/reports/${reportId}/finalize`,
-        body
-      );
-    } catch (err) {
-      if (err instanceof HttpError && err.status === 409) {
-        return { reportId, status: "submitted" };
-      }
-      throw err;
-    }
-  }
-  async postJson(url2, body, opts = {}) {
-    const retries = opts.retries ?? 1;
-    let lastError;
-    for (let attempt = 0; attempt <= retries; attempt++) {
-      try {
-        const response = await fetch(url2, {
-          method: "POST",
-          headers: { "content-type": "application/json" },
-          body: JSON.stringify(body)
-        });
-        if (!response.ok) {
-          const text = await response.text().catch(() => "");
-          throw new HttpError(
-            response.status,
-            `Request to ${url2} failed: ${response.status} ${text}`.trim()
-          );
-        }
-        return await response.json();
-      } catch (err) {
-        lastError = err;
-        if (this.config.debug) {
-          console.warn(`[lens] request failed (attempt ${attempt + 1}/${retries + 1})`, err);
-        }
-      }
-    }
-    throw lastError;
-  }
-};
-var LEVELS = ["log", "info", "warn", "error", "debug"];
-function cap(value) {
-  return value.length > MAX_SERIALIZED_ARG_CHARS ? `${value.slice(0, MAX_SERIALIZED_ARG_CHARS)}\u2026[truncated]` : value;
-}
-function serializeArg2(value) {
-  if (value === null) return "null";
-  if (value === void 0) return "undefined";
-  const type = typeof value;
-  if (type === "string") return cap(value);
-  if (type === "number" || type === "boolean" || type === "bigint" || type === "symbol") {
-    return String(value);
-  }
-  if (type === "function") {
-    return `[Function: ${value.name || "anonymous"}]`;
-  }
-  if (value instanceof Error) {
-    return cap(value.stack ? `${value.name}: ${value.message}
-${value.stack}` : `${value.name}: ${value.message}`);
-  }
-  try {
-    const seen = /* @__PURE__ */ new WeakSet();
-    const json2 = JSON.stringify(value, (_key, val) => {
-      if (typeof val === "bigint") return String(val);
-      if (typeof val === "function") return "[Function]";
-      if (typeof val === "object" && val !== null) {
-        if (seen.has(val)) return "[Circular]";
-        seen.add(val);
-      }
-      return val;
-    });
-    return cap(json2 ?? String(value));
-  } catch {
-    return cap(String(value));
-  }
-}
-function firstErrorStack(args) {
-  for (const arg of args) {
-    if (arg instanceof Error && arg.stack) return arg.stack;
-  }
-  return void 0;
-}
-function installConsole(consoleBuffer, errorBuffer) {
-  if (typeof console === "undefined") return () => {
-  };
-  const target = console;
-  const restores = [];
-  for (const level of LEVELS) {
-    const original = target[level];
-    if (typeof original !== "function") continue;
-    const wrapped = (...args) => {
-      try {
-        const serialized = args.map(serializeArg2);
-        const timestamp = Date.now();
-        consoleBuffer.push({ level, args: serialized, timestamp });
-        if (level === "error") {
-          const stack = firstErrorStack(args);
-          const entry = {
-            message: serialized.join(" ") || "console.error",
-            source: "console.error",
-            timestamp
-          };
-          if (stack) entry.stack = stack;
-          errorBuffer.push(entry);
-        }
-      } catch {
-      }
-      original.apply(console, args);
-    };
-    target[level] = wrapped;
-    restores.push(() => {
-      target[level] = original;
-    });
-  }
-  return () => {
-    for (const restore of restores) restore();
-  };
-}
 function nowMs() {
   return typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
 }
@@ -29648,6 +29699,14 @@ var ReplayRecorder = class {
   }
 };
 var SVG_RASTERIZE_TIMEOUT_MS = 3e3;
+function isOffscreenMedia(node2) {
+  if (!(node2 instanceof HTMLImageElement) && !(node2 instanceof HTMLIFrameElement) && !(typeof HTMLVideoElement !== "undefined" && node2 instanceof HTMLVideoElement)) {
+    return false;
+  }
+  const r = node2.getBoundingClientRect();
+  if (r.width === 0 && r.height === 0) return false;
+  return r.bottom < 0 || r.top > window.innerHeight || r.right < 0 || r.left > window.innerWidth;
+}
 function computeCropRect(crop, scale, rasterWidth, rasterHeight) {
   let sx = Math.round(crop.x * scale);
   let sy = Math.round(crop.y * scale);
@@ -29689,12 +29748,22 @@ async function captureScreenshot(excludeHost, crop, composite) {
           transformOrigin: "top left"
         }
       } : {},
-      // Exclude the overlay from the capture CLONE — never hide the live node.
-      filter: (node2) => node2 !== excludeHost,
-      // Per-resource fetch budget: a single slow cross-origin image must not
-      // consume the whole capture window.
+      // Exclude the overlay from the capture CLONE (never hide the live node),
+      // and — for a plain viewport report — drop images/iframes entirely outside
+      // the viewport so we don't fetch dozens of off-screen cross-origin assets.
+      filter: (node2) => {
+        if (node2 === excludeHost) return false;
+        if (viewportOnly && isOffscreenMedia(node2)) return false;
+        return true;
+      },
+      // Skip web-font download/embed. On font-heavy pages (multiple custom
+      // families) this is a dominant, flaky cost; fallback fonts are fine for a
+      // bug-report screenshot and capture becomes far more reliable.
+      font: false,
       fetch: { requestInit: { cache: "force-cache" }, bypassingCache: false },
-      timeout: SCREENSHOT_TIMEOUT_MS - 1e3
+      // PER-RESOURCE cap (NOT the overall budget): a hanging asset fails fast to
+      // a placeholder instead of stalling the whole capture.
+      timeout: SCREENSHOT_RESOURCE_TIMEOUT_MS
     });
     const started = Date.now();
     const timeout = new Promise((resolve) => {