clintplay-react-native 0.1.0 → 0.2.0

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.1.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.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.
 
 ## Install
 

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

@@ -328,7 +328,7 @@ class ClintplayRNModule(reactContext: ReactApplicationContext) :
 
   companion object {
     const val NAME = "ClintplayRN"
-    private const val VERSION = "0.1.0"
+    private const val VERSION = "0.2.0"
     private const val FALLBACK_JSON = "{\"version\":1,\"nodes\":[]}"
 
     private val NO_METHOD_SENTINEL = Any()

package/dist/index.d.mts

@@ -2,6 +2,25 @@ import React from 'react';
 import { ViewProps, View, TextInputProps, TextInput, ImageProps, Image, StyleProp, ViewStyle } from 'react-native';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+interface SessionState {
+    sessionId: string;
+    startedAt: number;
+    lastActivity: number;
+    userId: string | null;
+}
+declare class SessionManager {
+    private state;
+    private readonly now;
+    constructor(now?: () => number);
+    private create;
+    current(): SessionState;
+    touch(): void;
+    setUser(userId: string | null): boolean;
+    isStale(): boolean;
+    rotateIfStale(): boolean;
+    reset(): void;
+}
+
 type EventType = 'meta' | 'screen' | 'lifecycle' | 'navigation' | 'touch' | 'error' | 'log' | 'identify' | 'network' | 'wireframe';
 interface DeviceInfo {
     platform: 'ios' | 'android' | 'web';
@@ -59,8 +78,10 @@ interface LogEvent {
 interface IdentifyEvent {
     type: 'identify';
     ts: number;
-    userId: string | null;
-    traits?: Record<string, unknown>;
+    data: {
+        userId: string | null;
+        traits?: Record<string, unknown>;
+    };
 }
 interface NetworkEvent {
     type: 'network';
@@ -112,7 +133,8 @@ interface ReplayBatch {
     sdkVersion?: string;
 }
 interface ClintplayReactNativeConfig {
-    apiUrl: string;
+    apiUrl?: string;
+    endpoint?: string;
     apiKey?: string;
     projectId?: string;
     anonId?: string;
@@ -139,6 +161,107 @@ interface AsyncStorageLike {
     multiRemove(keys: readonly string[]): Promise<void>;
 }
 
+interface TransportConfig {
+    apiUrl: string;
+    apiKey?: string;
+    projectId?: string;
+    maxRetries?: number;
+    timeoutMs?: number;
+    backoffMs?: (attempt: number) => number;
+}
+interface TransportResult {
+    ok: boolean;
+    status?: number;
+    retryable?: boolean;
+}
+declare class Transport {
+    private readonly cfg;
+    constructor(cfg: TransportConfig);
+    sendDetailed(batch: ReplayBatch): Promise<TransportResult>;
+    send(batch: ReplayBatch): Promise<boolean>;
+    private headers;
+}
+
+interface Recorder {
+    start(): void;
+    stop(): void;
+    takeWireframeSnapshot(): void;
+}
+
+interface NetworkInterceptorDeps {
+    onEvent: (event: ReplayEvent) => void;
+    now: () => number;
+    sanitizeUrl?: (url: string) => string;
+    apiUrl?: string;
+}
+declare class NetworkInterceptor {
+    private readonly deps;
+    private originalFetch;
+    private wrappedFetch;
+    private originalXHROpen;
+    private wrappedXHROpen;
+    private originalXHRSend;
+    private wrappedXHRSend;
+    private started;
+    private isCallingFetchSync;
+    private readonly sanitize;
+    private readonly ingestOrigin;
+    private readonly ingestPath;
+    constructor(deps: NetworkInterceptorDeps);
+    private isSelfIngestUrl;
+    start(): void;
+    stop(): void;
+    private extractUrl;
+    private extractMethod;
+}
+
+interface ConsoleInterceptorDeps {
+    onEvent: (event: ReplayEvent) => void;
+    now: () => number;
+    maxMessageLength?: number;
+    captureConsoleLog?: boolean;
+}
+declare class ConsoleInterceptor {
+    private readonly deps;
+    private readonly originals;
+    private readonly wrapped;
+    private started;
+    private isEmitting;
+    private readonly maxLength;
+    constructor(deps: ConsoleInterceptorDeps);
+    start(): void;
+    private wrapMethod;
+    stop(): void;
+    private formatMessage;
+}
+
+type SendBatchResult = boolean | {
+    ok: boolean;
+    status?: number;
+    retryable?: boolean;
+};
+interface OfflineQueueDeps {
+    storage: AsyncStorageLike;
+    send: (batch: ReplayBatch) => Promise<SendBatchResult>;
+    maxBytes?: number;
+    keyPrefix?: string;
+    debug?: (msg: string) => void;
+}
+declare class OfflineQueue {
+    private readonly deps;
+    private currentBytes;
+    private seq;
+    private readonly prefix;
+    private readonly maxBytes;
+    private hydrationPromise;
+    constructor(deps: OfflineQueueDeps);
+    hydrate(force?: boolean): Promise<void>;
+    persist(batch: ReplayBatch): Promise<void>;
+    drain(): Promise<number>;
+    clear(): Promise<void>;
+    private evictUntilFits;
+}
+
 declare const CLINTPLAY_MASK_ID = "clintplay-mask";
 interface ClintplayMaskViewProps extends ViewProps {
     children?: React.ReactNode;
@@ -252,9 +375,20 @@ declare function _resetLastTrackedRoute(): void;
 declare function useClintplayNavigationTracking(routeNameOrPath?: string, options?: UseClintplayNavigationOptions): UseClintplayNavigationResult;
 
 declare const SDK_VERSION: string;
+interface InternalConfig {
+    apiUrl: string;
+    apiKey?: string;
+    projectId: string;
+    anonId?: string;
+    flushIntervalMs: number;
+    flushSize: number;
+    maxBufferSize: number;
+    debug: boolean;
+    captureWireframe: boolean;
+}
 declare function formatEventForBatch(event: ReplayEvent | BackendEvent, defaultSessionId: string): BackendEvent;
-declare function init(rawConfig: ClintplayReactNativeConfig): void;
-declare function identify(userId: string | null, traits?: Record<string, unknown>): void;
+declare function init(rawConfig: ClintplayReactNativeConfig): typeof Clintplay;
+declare function identify(userId: string | number | null, traits?: Record<string, unknown>): void;
 declare function reset(options?: {
     clearOfflineQueue?: boolean;
 }): void;
@@ -266,6 +400,19 @@ declare function current(): {
     sessionId: string;
     userId: string | null;
 } | null;
+declare function _getState(): {
+    buffer: readonly ReplayEvent[];
+    config: InternalConfig;
+    session: SessionManager;
+    transport: Transport;
+    recorder: Recorder;
+    networkInterceptor: NetworkInterceptor | null;
+    consoleInterceptor: ConsoleInterceptor | null;
+    offlineQueue: OfflineQueue | null;
+    flushTimer: ReturnType<typeof setInterval> | null;
+    excluded: ReadonlySet<EventType>;
+    active: boolean;
+} | null;
 declare const Clintplay: {
     init: typeof init;
     identify: typeof identify;
@@ -275,6 +422,7 @@ declare const Clintplay: {
     flush: typeof flush;
     stop: typeof stop;
     current: typeof current;
+    _getState: typeof _getState;
 };
 
-export { type BackendEvent, CLINTPLAY_MASK_ID, Clintplay, ClintplayCaptureProvider, type ClintplayCaptureProviderProps, ClintplayMaskImage, type ClintplayMaskImageProps, ClintplayMaskTextInput, type ClintplayMaskTextInputProps, ClintplayMaskView, type ClintplayMaskViewProps, ClintplayNavigationTracker, type ClintplayNavigationTrackerProps, type ClintplayReactNativeConfig, type DeviceInfo, type NavigationRouteLike, type NavigationStateLike, type NavigationStateListenerCallback, type NavigationStateListenerOptions, type ReplayBatch, type ReplayEvent, SDK_VERSION, type UseClintplayNavigationOptions, type UseClintplayNavigationResult, type WireframeEvent, type WireframeNode, _resetLastTrackedRoute, createClintplayNavigationStateListener, formatEventForBatch, getActiveRouteName, sanitizeRoute, useClintplayNavigationTracking };
+export { type BackendEvent, CLINTPLAY_MASK_ID, Clintplay, ClintplayCaptureProvider, type ClintplayCaptureProviderProps, ClintplayMaskImage, type ClintplayMaskImageProps, ClintplayMaskTextInput, type ClintplayMaskTextInputProps, ClintplayMaskView, type ClintplayMaskViewProps, ClintplayNavigationTracker, type ClintplayNavigationTrackerProps, type ClintplayReactNativeConfig, type DeviceInfo, type NavigationRouteLike, type NavigationStateLike, type NavigationStateListenerCallback, type NavigationStateListenerOptions, type ReplayBatch, type ReplayEvent, SDK_VERSION, type UseClintplayNavigationOptions, type UseClintplayNavigationResult, type WireframeEvent, type WireframeNode, _resetLastTrackedRoute, createClintplayNavigationStateListener, formatEventForBatch, getActiveRouteName, init, sanitizeRoute, useClintplayNavigationTracking };

package/dist/index.d.ts

@@ -2,6 +2,25 @@ import React from 'react';
 import { ViewProps, View, TextInputProps, TextInput, ImageProps, Image, StyleProp, ViewStyle } from 'react-native';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+interface SessionState {
+    sessionId: string;
+    startedAt: number;
+    lastActivity: number;
+    userId: string | null;
+}
+declare class SessionManager {
+    private state;
+    private readonly now;
+    constructor(now?: () => number);
+    private create;
+    current(): SessionState;
+    touch(): void;
+    setUser(userId: string | null): boolean;
+    isStale(): boolean;
+    rotateIfStale(): boolean;
+    reset(): void;
+}
+
 type EventType = 'meta' | 'screen' | 'lifecycle' | 'navigation' | 'touch' | 'error' | 'log' | 'identify' | 'network' | 'wireframe';
 interface DeviceInfo {
     platform: 'ios' | 'android' | 'web';
@@ -59,8 +78,10 @@ interface LogEvent {
 interface IdentifyEvent {
     type: 'identify';
     ts: number;
-    userId: string | null;
-    traits?: Record<string, unknown>;
+    data: {
+        userId: string | null;
+        traits?: Record<string, unknown>;
+    };
 }
 interface NetworkEvent {
     type: 'network';
@@ -112,7 +133,8 @@ interface ReplayBatch {
     sdkVersion?: string;
 }
 interface ClintplayReactNativeConfig {
-    apiUrl: string;
+    apiUrl?: string;
+    endpoint?: string;
     apiKey?: string;
     projectId?: string;
     anonId?: string;
@@ -139,6 +161,107 @@ interface AsyncStorageLike {
     multiRemove(keys: readonly string[]): Promise<void>;
 }
 
+interface TransportConfig {
+    apiUrl: string;
+    apiKey?: string;
+    projectId?: string;
+    maxRetries?: number;
+    timeoutMs?: number;
+    backoffMs?: (attempt: number) => number;
+}
+interface TransportResult {
+    ok: boolean;
+    status?: number;
+    retryable?: boolean;
+}
+declare class Transport {
+    private readonly cfg;
+    constructor(cfg: TransportConfig);
+    sendDetailed(batch: ReplayBatch): Promise<TransportResult>;
+    send(batch: ReplayBatch): Promise<boolean>;
+    private headers;
+}
+
+interface Recorder {
+    start(): void;
+    stop(): void;
+    takeWireframeSnapshot(): void;
+}
+
+interface NetworkInterceptorDeps {
+    onEvent: (event: ReplayEvent) => void;
+    now: () => number;
+    sanitizeUrl?: (url: string) => string;
+    apiUrl?: string;
+}
+declare class NetworkInterceptor {
+    private readonly deps;
+    private originalFetch;
+    private wrappedFetch;
+    private originalXHROpen;
+    private wrappedXHROpen;
+    private originalXHRSend;
+    private wrappedXHRSend;
+    private started;
+    private isCallingFetchSync;
+    private readonly sanitize;
+    private readonly ingestOrigin;
+    private readonly ingestPath;
+    constructor(deps: NetworkInterceptorDeps);
+    private isSelfIngestUrl;
+    start(): void;
+    stop(): void;
+    private extractUrl;
+    private extractMethod;
+}
+
+interface ConsoleInterceptorDeps {
+    onEvent: (event: ReplayEvent) => void;
+    now: () => number;
+    maxMessageLength?: number;
+    captureConsoleLog?: boolean;
+}
+declare class ConsoleInterceptor {
+    private readonly deps;
+    private readonly originals;
+    private readonly wrapped;
+    private started;
+    private isEmitting;
+    private readonly maxLength;
+    constructor(deps: ConsoleInterceptorDeps);
+    start(): void;
+    private wrapMethod;
+    stop(): void;
+    private formatMessage;
+}
+
+type SendBatchResult = boolean | {
+    ok: boolean;
+    status?: number;
+    retryable?: boolean;
+};
+interface OfflineQueueDeps {
+    storage: AsyncStorageLike;
+    send: (batch: ReplayBatch) => Promise<SendBatchResult>;
+    maxBytes?: number;
+    keyPrefix?: string;
+    debug?: (msg: string) => void;
+}
+declare class OfflineQueue {
+    private readonly deps;
+    private currentBytes;
+    private seq;
+    private readonly prefix;
+    private readonly maxBytes;
+    private hydrationPromise;
+    constructor(deps: OfflineQueueDeps);
+    hydrate(force?: boolean): Promise<void>;
+    persist(batch: ReplayBatch): Promise<void>;
+    drain(): Promise<number>;
+    clear(): Promise<void>;
+    private evictUntilFits;
+}
+
 declare const CLINTPLAY_MASK_ID = "clintplay-mask";
 interface ClintplayMaskViewProps extends ViewProps {
     children?: React.ReactNode;
@@ -252,9 +375,20 @@ declare function _resetLastTrackedRoute(): void;
 declare function useClintplayNavigationTracking(routeNameOrPath?: string, options?: UseClintplayNavigationOptions): UseClintplayNavigationResult;
 
 declare const SDK_VERSION: string;
+interface InternalConfig {
+    apiUrl: string;
+    apiKey?: string;
+    projectId: string;
+    anonId?: string;
+    flushIntervalMs: number;
+    flushSize: number;
+    maxBufferSize: number;
+    debug: boolean;
+    captureWireframe: boolean;
+}
 declare function formatEventForBatch(event: ReplayEvent | BackendEvent, defaultSessionId: string): BackendEvent;
-declare function init(rawConfig: ClintplayReactNativeConfig): void;
-declare function identify(userId: string | null, traits?: Record<string, unknown>): void;
+declare function init(rawConfig: ClintplayReactNativeConfig): typeof Clintplay;
+declare function identify(userId: string | number | null, traits?: Record<string, unknown>): void;
 declare function reset(options?: {
     clearOfflineQueue?: boolean;
 }): void;
@@ -266,6 +400,19 @@ declare function current(): {
     sessionId: string;
     userId: string | null;
 } | null;
+declare function _getState(): {
+    buffer: readonly ReplayEvent[];
+    config: InternalConfig;
+    session: SessionManager;
+    transport: Transport;
+    recorder: Recorder;
+    networkInterceptor: NetworkInterceptor | null;
+    consoleInterceptor: ConsoleInterceptor | null;
+    offlineQueue: OfflineQueue | null;
+    flushTimer: ReturnType<typeof setInterval> | null;
+    excluded: ReadonlySet<EventType>;
+    active: boolean;
+} | null;
 declare const Clintplay: {
     init: typeof init;
     identify: typeof identify;
@@ -275,6 +422,7 @@ declare const Clintplay: {
     flush: typeof flush;
     stop: typeof stop;
     current: typeof current;
+    _getState: typeof _getState;
 };
 
-export { type BackendEvent, CLINTPLAY_MASK_ID, Clintplay, ClintplayCaptureProvider, type ClintplayCaptureProviderProps, ClintplayMaskImage, type ClintplayMaskImageProps, ClintplayMaskTextInput, type ClintplayMaskTextInputProps, ClintplayMaskView, type ClintplayMaskViewProps, ClintplayNavigationTracker, type ClintplayNavigationTrackerProps, type ClintplayReactNativeConfig, type DeviceInfo, type NavigationRouteLike, type NavigationStateLike, type NavigationStateListenerCallback, type NavigationStateListenerOptions, type ReplayBatch, type ReplayEvent, SDK_VERSION, type UseClintplayNavigationOptions, type UseClintplayNavigationResult, type WireframeEvent, type WireframeNode, _resetLastTrackedRoute, createClintplayNavigationStateListener, formatEventForBatch, getActiveRouteName, sanitizeRoute, useClintplayNavigationTracking };
+export { type BackendEvent, CLINTPLAY_MASK_ID, Clintplay, ClintplayCaptureProvider, type ClintplayCaptureProviderProps, ClintplayMaskImage, type ClintplayMaskImageProps, ClintplayMaskTextInput, type ClintplayMaskTextInputProps, ClintplayMaskView, type ClintplayMaskViewProps, ClintplayNavigationTracker, type ClintplayNavigationTrackerProps, type ClintplayReactNativeConfig, type DeviceInfo, type NavigationRouteLike, type NavigationStateLike, type NavigationStateListenerCallback, type NavigationStateListenerOptions, type ReplayBatch, type ReplayEvent, SDK_VERSION, type UseClintplayNavigationOptions, type UseClintplayNavigationResult, type WireframeEvent, type WireframeNode, _resetLastTrackedRoute, createClintplayNavigationStateListener, formatEventForBatch, getActiveRouteName, init, sanitizeRoute, useClintplayNavigationTracking };

package/dist/index.js

@@ -885,7 +885,7 @@ function captureViewHierarchy() {
 }
 
 // package.json
-var version = "0.1.0";
+var version = "0.2.0";
 var CLINTPLAY_MASK_ID = "clintplay-mask";
 var ClintplayMaskView = React5__default.default.forwardRef(function ClintplayMaskView2({ children, testID, ...rest }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1255,13 +1255,14 @@ async function flushOnce(s) {
   }
 }
 function init(rawConfig) {
-  if (state?.active) return;
-  if (!rawConfig.apiUrl) return;
-  if (rawConfig.enabled === false) return;
+  if (state?.active) return Clintplay;
+  const apiUrl = rawConfig.apiUrl ?? rawConfig.endpoint;
+  if (!apiUrl) return Clintplay;
+  if (rawConfig.enabled === false) return Clintplay;
   const sampleRate = rawConfig.sampleRate ?? 1;
-  if (sampleRate < 1 && Math.random() > sampleRate) return;
+  if (sampleRate < 1 && Math.random() > sampleRate) return Clintplay;
   const config = {
-    apiUrl: rawConfig.apiUrl,
+    apiUrl,
     apiKey: rawConfig.apiKey,
     projectId: rawConfig.projectId ?? rawConfig.apiKey ?? "",
     anonId: rawConfig.anonId,
@@ -1365,15 +1366,18 @@ function init(rawConfig) {
     void flushOnce(local);
   }, config.flushIntervalMs);
   debugLog(config, "init", { sessionId: session.current().sessionId });
+  return Clintplay;
 }
 function identify(userId, traits) {
   if (!state?.active) return;
+  if (userId === void 0 || userId === "") return;
+  const normalizedUserId = userId === null ? null : String(userId);
   const prevUser = state.session.current().userId;
-  const isUserChange = prevUser !== null && (userId === null || prevUser !== userId);
+  const isUserChange = prevUser !== null && (normalizedUserId === null || prevUser !== normalizedUserId);
   if (isUserChange) {
     void flushOnce(state);
   }
-  const rotated = state.session.setUser(userId);
+  const rotated = state.session.setUser(normalizedUserId);
   if (rotated) {
     state.buffer.push({
       type: "meta",
@@ -1386,8 +1390,10 @@ function identify(userId, traits) {
   state.buffer.push({
     type: "identify",
     ts: Date.now(),
-    userId,
-    traits
+    data: {
+      userId: normalizedUserId,
+      traits: traits ?? {}
+    }
   });
 }
 function reset(options) {
@@ -1451,6 +1457,13 @@ function current() {
   const s = state.session.current();
   return { sessionId: s.sessionId, userId: s.userId };
 }
+function _getState() {
+  if (!state) return null;
+  return {
+    ...state,
+    buffer: state.buffer.peek()
+  };
+}
 var Clintplay = {
   init,
   identify,
@@ -1459,7 +1472,8 @@ var Clintplay = {
   reportError,
   flush,
   stop,
-  current
+  current,
+  _getState
 };
 
 exports.CLINTPLAY_MASK_ID = CLINTPLAY_MASK_ID;
@@ -1474,6 +1488,7 @@ exports._resetLastTrackedRoute = _resetLastTrackedRoute;
 exports.createClintplayNavigationStateListener = createClintplayNavigationStateListener;
 exports.formatEventForBatch = formatEventForBatch;
 exports.getActiveRouteName = getActiveRouteName;
+exports.init = init;
 exports.sanitizeRoute = sanitizeRoute;
 exports.useClintplayNavigationTracking = useClintplayNavigationTracking;
 //# sourceMappingURL=index.js.map