clintplay-react-native 0.2.0 → 0.2.2

package/dist/index.mjs

@@ -49,7 +49,14 @@ var SessionManager = class {
   }
   create() {
     const ts = this.now();
-    return { sessionId: uuid(), startedAt: ts, lastActivity: ts, userId: null };
+    return {
+      sessionId: uuid(),
+      startedAt: ts,
+      lastActivity: ts,
+      userId: null,
+      tags: /* @__PURE__ */ new Set(),
+      metadata: {}
+    };
   }
   current() {
     return this.state;
@@ -57,6 +64,19 @@ var SessionManager = class {
   touch() {
     this.state.lastActivity = this.now();
   }
+  addTag(tag2) {
+    if (this.state.tags.has(tag2)) {
+      return false;
+    }
+    this.state.tags.add(tag2);
+    return true;
+  }
+  hasTag(tag2) {
+    return this.state.tags.has(tag2);
+  }
+  setMetadata(data) {
+    this.state.metadata = { ...this.state.metadata, ...data };
+  }
   setUser(userId) {
     const prev = this.state.userId;
     if (prev !== null && (userId === null || prev !== userId)) {
@@ -147,6 +167,8 @@ var Transport = class {
     return h;
   }
 };
+var SNAPSHOT_AFTER_INTERACTION_MS = 400;
+var UNCHANGED_RESEND_MS = 3e4;
 function mapAppState(state2) {
   if (state2 === "active") return "active";
   if (state2 === "background") return "background";
@@ -159,16 +181,25 @@ function createRecorder(deps) {
   const cleanups = [];
   let started = false;
   let wireframeTimer = null;
-  function takeWireframeSnapshot() {
+  let interactionTimer = null;
+  let lastNodesKey = null;
+  let lastSentAt = 0;
+  function takeWireframeSnapshot(force = false) {
     if (!deps.captureViewHierarchy) return;
     try {
       const raw = deps.captureViewHierarchy();
       if (!raw || typeof raw !== "string") return;
       const payload = JSON.parse(raw);
       if (payload && Array.isArray(payload.nodes)) {
+        if (force && payload.nodes.length === 0) return;
+        const key = JSON.stringify(payload.nodes);
+        const now = deps.now();
+        if (!force && key === lastNodesKey && now - lastSentAt < UNCHANGED_RESEND_MS) return;
+        lastNodesKey = key;
+        lastSentAt = now;
         deps.onEvent({
           type: "wireframe",
-          ts: deps.now(),
+          ts: now,
           version: typeof payload.version === "number" ? payload.version : 1,
           nodes: payload.nodes
         });
@@ -176,6 +207,20 @@ function createRecorder(deps) {
     } catch {
     }
   }
+  function scheduleWireframeSnapshot() {
+    if (!deps.captureWireframe || !deps.captureViewHierarchy) return;
+    if (interactionTimer) clearTimeout(interactionTimer);
+    interactionTimer = setTimeout(() => {
+      interactionTimer = null;
+      takeWireframeSnapshot();
+    }, SNAPSHOT_AFTER_INTERACTION_MS);
+  }
+  function cancelScheduledSnapshot() {
+    if (interactionTimer) {
+      clearTimeout(interactionTimer);
+      interactionTimer = null;
+    }
+  }
   function startWireframeTimer() {
     if (!deps.captureWireframe || !deps.captureViewHierarchy) return;
     if (wireframeTimer) return;
@@ -193,7 +238,11 @@ function createRecorder(deps) {
     }
   }
   return {
-    takeWireframeSnapshot,
+    takeWireframeSnapshot: () => takeWireframeSnapshot(),
+    scheduleWireframeSnapshot,
+    resetWireframeBaseline() {
+      lastNodesKey = null;
+    },
     start() {
       if (started) return;
       started = true;
@@ -217,7 +266,9 @@ function createRecorder(deps) {
           if (mapped === "active") {
             startWireframeTimer();
           } else {
+            if (wireframeTimer) takeWireframeSnapshot(true);
             stopWireframeTimer();
+            cancelScheduledSnapshot();
           }
         }
       });
@@ -275,6 +326,7 @@ function createRecorder(deps) {
       if (!started) return;
       started = false;
       stopWireframeTimer();
+      cancelScheduledSnapshot();
       for (const fn of cleanups.splice(0)) {
         try {
           fn();
@@ -879,7 +931,7 @@ function captureViewHierarchy() {
 }
 
 // package.json
-var version = "0.2.0";
+var version = "0.2.2";
 var CLINTPLAY_MASK_ID = "clintplay-mask";
 var ClintplayMaskView = React5.forwardRef(function ClintplayMaskView2({ children, testID, ...rest }, ref) {
   return /* @__PURE__ */ jsx(
@@ -1191,6 +1243,124 @@ function ClintplayNavigationTracker({
 // src/index.ts
 var SDK_VERSION = version;
 var state = null;
+var METADATA_MAX_KEYS = 50;
+var METADATA_MAX_DEPTH = 3;
+var METADATA_MAX_STRING_LENGTH = 1024;
+var METADATA_MAX_BYTES = 8192;
+var TAG_MAX_LENGTH = 128;
+var pendingMetadata = {};
+var pendingTags = /* @__PURE__ */ new Set();
+function sanitizeTag(rawTag) {
+  if (typeof rawTag !== "string") return null;
+  const trimmed = rawTag.trim();
+  if (trimmed.length === 0) return null;
+  const normalized = typeof trimmed.normalize === "function" ? trimmed.normalize("NFC") : trimmed;
+  return normalized.slice(0, TAG_MAX_LENGTH);
+}
+function isPlainObject(val) {
+  return typeof val === "object" && val !== null && !Array.isArray(val);
+}
+function sanitizeMetadataValue(val, depth, seen) {
+  if (val === null || val === void 0) {
+    return val;
+  }
+  if (typeof val === "function" || typeof val === "symbol") {
+    return void 0;
+  }
+  if (typeof val === "string") {
+    return val.slice(0, METADATA_MAX_STRING_LENGTH);
+  }
+  if (typeof val === "number") {
+    return Number.isFinite(val) ? val : null;
+  }
+  if (typeof val === "boolean") {
+    return val;
+  }
+  if (typeof val === "bigint") {
+    return val.toString();
+  }
+  if (val instanceof Date) {
+    return Number.isNaN(val.getTime()) ? null : val.toISOString();
+  }
+  if (typeof val === "object") {
+    if (seen.has(val)) {
+      return "[Circular]";
+    }
+    seen.add(val);
+    try {
+      if (depth > METADATA_MAX_DEPTH) {
+        return void 0;
+      }
+      if (Array.isArray(val)) {
+        const arr = [];
+        for (const item of val) {
+          const cleaned = sanitizeMetadataValue(item, depth + 1, seen);
+          if (cleaned !== void 0) {
+            arr.push(cleaned);
+          }
+        }
+        return arr;
+      }
+      const obj = {};
+      const entries = Object.entries(val);
+      let keyCount = 0;
+      for (const [k, v] of entries) {
+        if (k === "__proto__" || k === "constructor" || k === "prototype") {
+          continue;
+        }
+        if (keyCount >= METADATA_MAX_KEYS) {
+          break;
+        }
+        const cleaned = sanitizeMetadataValue(v, depth + 1, seen);
+        if (cleaned !== void 0) {
+          obj[k] = cleaned;
+          keyCount++;
+        }
+      }
+      return obj;
+    } finally {
+      seen.delete(val);
+    }
+  }
+  return void 0;
+}
+function sanitizeMetadata(data) {
+  if (!isPlainObject(data)) {
+    return null;
+  }
+  const seen = /* @__PURE__ */ new Set();
+  seen.add(data);
+  const result = {};
+  const entries = Object.entries(data);
+  let keyCount = 0;
+  for (const [k, v] of entries) {
+    if (k === "__proto__" || k === "constructor" || k === "prototype") {
+      continue;
+    }
+    if (keyCount >= METADATA_MAX_KEYS) {
+      break;
+    }
+    const cleaned = sanitizeMetadataValue(v, 1, seen);
+    if (cleaned !== void 0) {
+      result[k] = cleaned;
+      keyCount++;
+    }
+  }
+  try {
+    let json = JSON.stringify(result);
+    if (json.length > METADATA_MAX_BYTES) {
+      const keys = Object.keys(result);
+      while (keys.length > 0 && json.length > METADATA_MAX_BYTES) {
+        const lastKey = keys.pop();
+        delete result[lastKey];
+        json = JSON.stringify(result);
+      }
+    }
+  } catch {
+    return null;
+  }
+  return result;
+}
 function deviceInfo() {
   const os = Platform.OS;
   const platform = os === "ios" ? "ios" : os === "android" ? "android" : "web";
@@ -1279,10 +1449,18 @@ function init(rawConfig) {
     buffer,
     session,
     transport,
-    recorder: { start: () => {
-    }, stop: () => {
-    }, takeWireframeSnapshot: () => {
-    } },
+    recorder: {
+      start: () => {
+      },
+      stop: () => {
+      },
+      takeWireframeSnapshot: () => {
+      },
+      scheduleWireframeSnapshot: () => {
+      },
+      resetWireframeBaseline: () => {
+      }
+    },
     networkInterceptor: null,
     consoleInterceptor: null,
     offlineQueue: rawConfig.asyncStorage ? new OfflineQueue({
@@ -1327,17 +1505,40 @@ function init(rawConfig) {
       captureConsoleLog: rawConfig.captureConsoleLog
     });
   }
-  buffer.push({
-    type: "meta",
-    ts: Date.now(),
-    sessionId: session.current().sessionId,
-    sdkVersion: SDK_VERSION,
-    device: deviceInfo()
-  });
+  pushSessionMeta(local);
+  if (Object.keys(pendingMetadata).length > 0) {
+    local.session.setMetadata(pendingMetadata);
+    if (!excluded.has("metadata")) {
+      local.buffer.push({
+        type: "metadata",
+        ts: Date.now(),
+        data: pendingMetadata
+      });
+    }
+    pendingMetadata = {};
+  }
+  if (pendingTags.size > 0) {
+    for (const t of pendingTags) {
+      local.session.addTag(t);
+      if (!excluded.has("tag")) {
+        local.buffer.push({
+          type: "tag",
+          ts: Date.now(),
+          data: { tag: t }
+        });
+      }
+    }
+    pendingTags.clear();
+  }
   recorder.start();
   local.networkInterceptor?.start();
   local.consoleInterceptor?.start();
-  _setSink(onEvent);
+  _setSink((event) => {
+    onEvent(event);
+    if (event.type === "navigation" || event.type === "touch" && event.kind === "end") {
+      recorder.scheduleWireframeSnapshot();
+    }
+  });
   if (local.offlineQueue) {
     const q = local.offlineQueue;
     void q.hydrate().then(() => q.drain()).catch(
@@ -1348,13 +1549,7 @@ function init(rawConfig) {
     if (local.session.isStale()) {
       await flushOnce(local);
       if (local.session.rotateIfStale()) {
-        local.buffer.push({
-          type: "meta",
-          ts: Date.now(),
-          sessionId: local.session.current().sessionId,
-          sdkVersion: SDK_VERSION,
-          device: deviceInfo()
-        });
+        pushSessionMeta(local);
       }
     }
     void flushOnce(local);
@@ -1373,13 +1568,7 @@ function identify(userId, traits) {
   }
   const rotated = state.session.setUser(normalizedUserId);
   if (rotated) {
-    state.buffer.push({
-      type: "meta",
-      ts: Date.now(),
-      sessionId: state.session.current().sessionId,
-      sdkVersion: SDK_VERSION,
-      device: deviceInfo()
-    });
+    pushSessionMeta(state);
   }
   state.buffer.push({
     type: "identify",
@@ -1397,13 +1586,17 @@ function reset(options) {
   if (options?.clearOfflineQueue && state.offlineQueue) {
     void state.offlineQueue.clear();
   }
-  state.buffer.push({
+  pushSessionMeta(state);
+}
+function pushSessionMeta(s) {
+  s.buffer.push({
     type: "meta",
     ts: Date.now(),
-    sessionId: state.session.current().sessionId,
+    sessionId: s.session.current().sessionId,
     sdkVersion: SDK_VERSION,
     device: deviceInfo()
   });
+  s.recorder.resetWireframeBaseline();
 }
 function trackScreen(path, from) {
   if (!state?.active) return;
@@ -1414,9 +1607,7 @@ function trackScreen(path, from) {
     ...from ? { from } : {}
   });
   state.session.touch();
-  if (state.config.captureWireframe) {
-    state.recorder.takeWireframeSnapshot();
-  }
+  state.recorder.scheduleWireframeSnapshot();
 }
 function reportError(err) {
   if (!state?.active) return;
@@ -1430,11 +1621,54 @@ function reportError(err) {
     fatal: false
   });
 }
+function setMetadata(data) {
+  const sanitized = sanitizeMetadata(data);
+  if (!sanitized || Object.keys(sanitized).length === 0) return;
+  if (!state?.active) {
+    pendingMetadata = { ...pendingMetadata, ...sanitized };
+    return;
+  }
+  state.session.setMetadata(sanitized);
+  state.session.touch();
+  if (!state.excluded.has("metadata")) {
+    state.buffer.push({
+      type: "metadata",
+      ts: Date.now(),
+      data: sanitized
+    });
+    if (state.buffer.size() >= state.config.flushSize) {
+      void flushOnce(state);
+    }
+  }
+}
+function tag(tagName) {
+  const cleaned = sanitizeTag(tagName);
+  if (!cleaned) return;
+  if (!state?.active) {
+    pendingTags.add(cleaned);
+    return;
+  }
+  if (state.session.addTag(cleaned)) {
+    state.session.touch();
+    if (!state.excluded.has("tag")) {
+      state.buffer.push({
+        type: "tag",
+        ts: Date.now(),
+        data: { tag: cleaned }
+      });
+      if (state.buffer.size() >= state.config.flushSize) {
+        void flushOnce(state);
+      }
+    }
+  }
+}
 async function flush() {
   if (!state?.active) return;
   await flushOnce(state);
 }
 async function stop() {
+  pendingMetadata = {};
+  pendingTags.clear();
   if (!state?.active) return;
   const s = state;
   s.active = false;
@@ -1464,12 +1698,14 @@ var Clintplay = {
   reset,
   trackScreen,
   reportError,
+  setMetadata,
+  tag,
   flush,
   stop,
   current,
   _getState
 };
 
-export { CLINTPLAY_MASK_ID, Clintplay, ClintplayCaptureProvider, ClintplayMaskImage, ClintplayMaskTextInput, ClintplayMaskView, ClintplayNavigationTracker, SDK_VERSION, _resetLastTrackedRoute, createClintplayNavigationStateListener, formatEventForBatch, getActiveRouteName, init, sanitizeRoute, useClintplayNavigationTracking };
+export { CLINTPLAY_MASK_ID, Clintplay, ClintplayCaptureProvider, ClintplayMaskImage, ClintplayMaskTextInput, ClintplayMaskView, ClintplayNavigationTracker, METADATA_MAX_BYTES, METADATA_MAX_DEPTH, METADATA_MAX_KEYS, METADATA_MAX_STRING_LENGTH, SDK_VERSION, TAG_MAX_LENGTH, _resetLastTrackedRoute, createClintplayNavigationStateListener, formatEventForBatch, getActiveRouteName, init, sanitizeMetadata, sanitizeRoute, sanitizeTag, setMetadata, tag, useClintplayNavigationTracking };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map