clintplay-react-native 0.2.0 → 0.2.1

package/README.md

@@ -2,7 +2,7 @@
 
 Session capture SDK for React Native / Expo apps — companion to [`clintplay-sdk`](../sdk) (web). Captures lifecycle, screen dimensions, navigation, JS errors, network requests (Fetch & XHR/Axios), console output, touches (screen-relative & target-relative), and native visual wireframe replay on iOS and Android.
 
-> **Status:** `0.2.0` — Production-ready JS runtime and Native TurboModule. Supports native view hierarchy traversal on iOS (`ios/ClintplayRN.mm`) and Android (`android/.../ClintplayRNModule.kt`), visual wireframe session replay, network interception for `fetch` and `XMLHttpRequest`/Axios, automatic navigation tracking, and intelligent auto-masking for sensitive fields.
+> **Status:** `0.2.1` — Production-ready JS runtime and Native TurboModule. Supports native view hierarchy traversal on iOS (`ios/ClintplayRN.mm`) and Android (`android/.../ClintplayRNModule.kt`), visual wireframe session replay, network interception for `fetch` and `XMLHttpRequest`/Axios, automatic navigation tracking, and intelligent auto-masking for sensitive fields.
 
 ## Install
 
@@ -81,7 +81,7 @@ export default function RootLayout() {
 | `enabled` | `boolean` | `true` | Master killswitch. Set to `false` to disable all telemetry. |
 | `sampleRate` | `number` | `1.0` | Probabilistic sampling rate between `0.0` and `1.0`. |
 | `captureWireframe` | `boolean` | `false` | Enable native view-hierarchy visual wireframe capture for session replay. |
-| `wireframeIntervalMs` | `number` | `1000` | Wireframe snapshot interval in milliseconds. |
+| `wireframeIntervalMs` | `number` | `1000` | Wireframe snapshot interval in milliseconds. A snapshot identical to the previous one is not re-sent (an unchanged screen is re-sent every 30 s), and a snapshot is also taken ~400 ms after every touch end and navigation, so screens visited for less than the interval still reach the replay. |
 | `captureNetwork` | `boolean` | `true` | Intercept `globalThis.fetch` and `XMLHttpRequest` (including Axios) requests. |
 | `captureConsole` | `boolean` | `false` | Intercept `console.warn` and `console.error` logs. |
 | `captureConsoleLog` | `boolean` | `false` | Intercept `console.log` logs when `captureConsole: true`. |
@@ -104,7 +104,7 @@ export default function RootLayout() {
 | `network` | `fetch` & `XMLHttpRequest` / Axios | **On** | HTTP method, URL (sanitized), status code, duration, and errors. Protected against double-counting. |
 | `navigation` | Navigation Trackers & `trackScreen` | **On (Tracker)** | Screen path changes (`to`, `from`). Automatic via `<ClintplayNavigationTracker />` or React Navigation listener. |
 | `touch` | `<ClintplayCaptureProvider>` | **Provider** | Tap / touch gestures with both screen-relative coordinates (`screenX`, `screenY`) and target-relative coordinates (`x`, `y`). |
-| `wireframe` | Native TurboModule | **Opt-in** | Visual UI hierarchy snapshots (view rects, styles, text, masking) across iOS and Android. |
+| `wireframe` | Native TurboModule | **Opt-in** | Visual UI hierarchy snapshots (view rects, background colors, text with font size, color and alignment — plus weight on iOS, and bold on Android —, masking) across iOS and Android. Sent on change, after interactions, and every 30 s while unchanged. |
 | `log` | Console Interceptor | **Opt-in** | Console output (`warn`, `error`, and optional `log`). |
 | `identify` | `Clintplay.identify()` | **Manual** | Associating sessions with authenticated users and custom traits. |
 

package/android/src/main/java/digital/clint/clintplay/ClintplayRNModule.kt

@@ -2,13 +2,19 @@ package digital.clint.clintplay
 
 import android.app.Activity
 import android.content.Context
+import android.graphics.Typeface
 import android.graphics.drawable.ColorDrawable
 import android.graphics.drawable.Drawable
 import android.os.Build
 import android.os.Handler
 import android.os.Looper
 import android.text.InputType
+import android.text.Spanned
 import android.text.method.PasswordTransformationMethod
+import android.text.style.AbsoluteSizeSpan
+import android.text.style.ForegroundColorSpan
+import android.text.style.StyleSpan
+import android.view.Gravity
 import android.view.View
 import android.view.ViewGroup
 import android.view.WindowManager
@@ -112,6 +118,45 @@ class ClintplayRNModule(reactContext: ReactApplicationContext) :
     return false
   }
 
+  // React Native sets size and colour as spans on the text, so the spans at the first
+  // character win over the TextView's own defaults. Weight is only sent when bold is
+  // actually detected: RN carries it in its own CustomStyleSpan, which this does not read,
+  // and a guessed 400 would look measured. Best effort: the text alone already makes the
+  // replay readable.
+  private fun putTextStyle(node: JSONObject, view: TextView, density: Float) {
+    try {
+      val text = view.text
+      val safeDensity = if (density > 0f) density else 1f
+      var sizePx = view.textSize
+      var color = view.currentTextColor
+      var bold = view.typeface?.isBold == true
+      if (text is Spanned && text.isNotEmpty()) {
+        text.getSpans(0, 1, AbsoluteSizeSpan::class.java).lastOrNull()?.let { span ->
+          sizePx = if (span.dip) span.size * safeDensity else span.size.toFloat()
+        }
+        text.getSpans(0, 1, ForegroundColorSpan::class.java).lastOrNull()?.let { span ->
+          color = span.foregroundColor
+        }
+        if (text.getSpans(0, 1, StyleSpan::class.java).any { (it.style and Typeface.BOLD) != 0 }) {
+          bold = true
+        }
+      }
+      node.put("fontSize", round(sizePx / safeDensity * 10.0) / 10.0)
+      if (bold) node.put("fontWeight", 700)
+      node.put("color", formatColor(color))
+      val horizontal = Gravity.getAbsoluteGravity(view.gravity, view.layoutDirection) and
+        Gravity.HORIZONTAL_GRAVITY_MASK
+      node.put(
+        "textAlign",
+        when (horizontal) {
+          Gravity.CENTER_HORIZONTAL -> "center"
+          Gravity.RIGHT -> "right"
+          else -> "left"
+        },
+      )
+    } catch (_: Throwable) {}
+  }
+
   private fun serializeView(
     view: View?,
     nodeCounter: AtomicInteger,
@@ -206,6 +251,9 @@ class ClintplayRNModule(reactContext: ReactApplicationContext) :
     var extractedText: String? = null
     if (view is TextView) {
       extractedText = view.text?.toString()
+      if (!isMasked && !extractedText.isNullOrEmpty()) {
+        putTextStyle(nodeObj, view, density)
+      }
     }
 
     if (extractedText != null) {
@@ -328,7 +376,7 @@ class ClintplayRNModule(reactContext: ReactApplicationContext) :
 
   companion object {
     const val NAME = "ClintplayRN"
-    private const val VERSION = "0.2.0"
+    private const val VERSION = "0.2.1"
     private const val FALLBACK_JSON = "{\"version\":1,\"nodes\":[]}"
 
     private val NO_METHOD_SENTINEL = Any()

package/dist/index.d.mts

@@ -186,6 +186,10 @@ interface Recorder {
     start(): void;
     stop(): void;
     takeWireframeSnapshot(): void;
+    /** Captura depois que a interação assenta (toque, navegação). Chamadas próximas viram uma. */
+    scheduleWireframeSnapshot(): void;
+    /** A próxima captura é enviada mesmo igual à anterior (sessão nova precisa da tela). */
+    resetWireframeBaseline(): void;
 }
 
 interface NetworkInterceptorDeps {

package/dist/index.d.ts

@@ -186,6 +186,10 @@ interface Recorder {
     start(): void;
     stop(): void;
     takeWireframeSnapshot(): void;
+    /** Captura depois que a interação assenta (toque, navegação). Chamadas próximas viram uma. */
+    scheduleWireframeSnapshot(): void;
+    /** A próxima captura é enviada mesmo igual à anterior (sessão nova precisa da tela). */
+    resetWireframeBaseline(): void;
 }
 
 interface NetworkInterceptorDeps {

package/dist/index.js

@@ -153,6 +153,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";
@@ -165,16 +167,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
         });
@@ -182,6 +193,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;
@@ -199,7 +224,11 @@ function createRecorder(deps) {
     }
   }
   return {
-    takeWireframeSnapshot,
+    takeWireframeSnapshot: () => takeWireframeSnapshot(),
+    scheduleWireframeSnapshot,
+    resetWireframeBaseline() {
+      lastNodesKey = null;
+    },
     start() {
       if (started) return;
       started = true;
@@ -223,7 +252,9 @@ function createRecorder(deps) {
           if (mapped === "active") {
             startWireframeTimer();
           } else {
+            if (wireframeTimer) takeWireframeSnapshot(true);
             stopWireframeTimer();
+            cancelScheduledSnapshot();
           }
         }
       });
@@ -281,6 +312,7 @@ function createRecorder(deps) {
       if (!started) return;
       started = false;
       stopWireframeTimer();
+      cancelScheduledSnapshot();
       for (const fn of cleanups.splice(0)) {
         try {
           fn();
@@ -885,7 +917,7 @@ function captureViewHierarchy() {
 }
 
 // package.json
-var version = "0.2.0";
+var version = "0.2.1";
 var CLINTPLAY_MASK_ID = "clintplay-mask";
 var ClintplayMaskView = React5__default.default.forwardRef(function ClintplayMaskView2({ children, testID, ...rest }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1285,10 +1317,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({
@@ -1333,17 +1373,16 @@ function init(rawConfig) {
       captureConsoleLog: rawConfig.captureConsoleLog
     });
   }
-  buffer.push({
-    type: "meta",
-    ts: Date.now(),
-    sessionId: session.current().sessionId,
-    sdkVersion: SDK_VERSION,
-    device: deviceInfo()
-  });
+  pushSessionMeta(local);
   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(
@@ -1354,13 +1393,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);
@@ -1379,13 +1412,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",
@@ -1403,13 +1430,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;
@@ -1420,9 +1451,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;