noibu-react-native 0.2.18 → 0.2.20

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes of the noibu-react-native SDK release series are documented in this file using
 the [Keep a CHANGELOG](https://keepachangelog.com/) principles.
 
+## 0.2.20
+
+### Added
+- ** ANDROID: WebView replay support (mobile transformer)**
+  - Integrates a WebView-specific transformer to convert rrweb full/incremental snapshots from WebViews into web events.
+  - Snapshots generated during transformation are now included at the top level of the transformed output, emitted immediately after the event that produced them.
+- **Live subscription emits multiple events when applicable**
+  - The native subscription path now routes events through `transformToWeb`, allowing multiple transformed events (e.g., WebView snapshots) to be emitted per native event.
+
+### Changed
+- **`transformToWeb`** now drains a small internal buffer of WebView snapshots produced during transformation and appends them to the resulting array in order.
+- **`nativeSessionRecorderSubscription`** (Android and iOS) now uses `transformToWeb([event])` and forwards each resulting event via the provided callback.
+
+
 ## 0.2.13
 
 ### Alpha support for iOS Session Replay in React Native

package/android/build.gradle

@@ -67,7 +67,7 @@ def kotlin_version = getExtOrDefault("kotlinVersion")
 dependencies {
   implementation "com.facebook.react:react-native:+"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-  implementation "com.noibu:sessionreplay-recorder:0.2.2"
+  implementation "com.noibu:sessionreplay-recorder:1.0.1"
 }
 
 if (isNewArchitectureEnabled()) {
@@ -76,4 +76,4 @@ if (isNewArchitectureEnabled()) {
     libraryName = "noibusessionreplay"
     codegenJavaPackageName = "com.noibu.sessionreplay.reactnative"
   }
-}
+}

package/android/src/main/java/com/noibu/sessionreplay/reactnative/NoibuSessionReplayModule.kt

@@ -6,11 +6,9 @@ import android.util.Log
 import com.facebook.react.bridge.*
 import com.facebook.react.modules.core.DeviceEventManagerModule
 
-import com.noibu.sessionreplay.SessionReplayConfig
-import com.noibu.sessionreplay.models.ApplicationFramework
-import com.noibu.sessionreplay.models.LogLevel
-
-import com.noibu.sessionreplay.SessionReplay
+// Update the import statements to point to the KMP shared module's package
+import com.noibu.mobile.android.sessionreplay.Noibu
+import com.noibu.mobile.android.sessionreplay.NoibuConfig
 
 class NoibuSessionReplayModule(reactContext: ReactApplicationContext) :
     ReactContextBaseJavaModule(reactContext) {
@@ -28,79 +26,19 @@ class NoibuSessionReplayModule(reactContext: ReactApplicationContext) :
     }
 
     @ReactMethod
-    fun initialize(
-        projectId: String,
-        userId: String?,
-        logLevel: String,
-        allowMeteredNetworkUsage: Boolean,
-        enableWebViewCapture: Boolean,
-        allowedDomains: ReadableArray,
-        disableOnLowEndDevices: Boolean,
-        enableDailyNetworkUsageLimit: Boolean,
-        maximumDailyNetworkUsageInMB: Double,
-        promise: Promise
-    ) {
-        val allowedActivities = listOf<String>(); // not supported
-        val disallowedActivities = listOf<String>(); // not supported
-
-        // We use two parameters because the react method parameters do not accept nullable primitive types.
-        // Moreover, the Long data type is not supported. Js numbers are translated into doubles.
-        val maximumDailyNetworkUsageInMBLong =
-            if (enableDailyNetworkUsageLimit) maximumDailyNetworkUsageInMB.toLong() else null
-
-        val config = SessionReplayConfig(
-            projectId,
-            userId,
-            LogLevel.valueOf(logLevel),
-            allowMeteredNetworkUsage,
-            enableWebViewCapture,
-            readableArrayToList(allowedDomains),
-            ApplicationFramework.ReactNative,
-            allowedActivities,
-            disallowedActivities,
-            disableOnLowEndDevices,
-            maximumDailyNetworkUsageInMBLong
+    fun initialize( promise: Promise ) {
+        val context = currentActivity?.applicationContext ?: reactContext?.applicationContext ?: return
+        val config = NoibuConfig(
+            sessionReplayEnabled = true,
+            maskAllTextInputs = false,
         )
-
-        Handler(Looper.getMainLooper()).post {
-          val context = currentActivity?.applicationContext ?: reactContext?.applicationContext ?: run {
-            promise.reject("ACTIVITY_NOT_AVAILABLE", "Current activity is not available.")
-            return@post
-          }
-            promise.resolve(
-                SessionReplay.initialize(
-                    context,
-                    config,
-                    currentActivity
-                ) { param ->
-                    Handler(Looper.getMainLooper()).post {
-                        val params = Arguments.createMap()
-                        params.putString("message", param)
-                        sendEvent("noibuRecordingEvent", params)
-                    }
-                }
-            )
+        Noibu.setup(context, config){ param ->
+            val params = Arguments.createMap()
+            params.putString("message", param)
+            sendEvent("noibuRecordingEvent", params)
+            true
         }
-    }
-
-    @ReactMethod
-    fun setCustomUserId(customUserId: String, promise: Promise) {
-        promise.resolve(SessionReplay.setCustomUserId(customUserId))
-    }
-
-    @ReactMethod
-    fun setCustomSessionId(customSessionId: String, promise: Promise) {
-        promise.resolve(SessionReplay.setCustomSessionId(customSessionId))
-    }
-
-    private fun readableArrayToList(arr: ReadableArray): List<String> {
-        val ret = mutableListOf<String>()
-
-        for (i in 0 until arr.size()) {
-            ret.add(arr.getString(i))
-        }
-
-        return ret
+        promise.resolve(true)
     }
 
     @ReactMethod
@@ -117,4 +55,4 @@ class NoibuSessionReplayModule(reactContext: ReactApplicationContext) :
         const val NAME = "NativeSessionRecorder"
         private var reactContext: ReactApplicationContext? = null
     }
-}
+}

package/dist/api/ClientConfig.js

@@ -1,7 +1,7 @@
 import { __awaiter } from 'tslib';
 import uuid from 'react-native-uuid';
 import { Severity } from 'noibu-metroplex-ts-bindings';
-import { MAX_METROPLEX_SOCKET_INNACTIVE_TIME, GET_SCRIPT_ID, GET_DEVICE_ENV } from '../constants.js';
+import { MAX_METROPLEX_SOCKET_INNACTIVE_TIME, GET_DEVICE_ENV, GET_SCRIPT_ID } from '../constants.js';
 import { stringifyJSON, getMaxSubstringAllowed, getUserAgent, postRequest } from '../utils/function.js';
 import Storage from '../storage/Storage.js';
 import { noibuLog } from '../utils/log.js';

package/dist/api/MetroplexSocket.d.ts

@@ -4,7 +4,7 @@ import { NoSeqNumSlidingMessage, RetryQueueWSMessage } from '../types/Metroplex'
 /**
  * Grab the video recorder type based on the device we run the app on.
  */
-export declare function getVideoRecorderType(): Promise<VideoRecorder.RRWeb | VideoRecorder.AndroidNative>;
+export declare function getVideoRecorderType(): Promise<VideoRecorder.RRWeb>;
 /**
  * Implements rolling window of specified size,
  * but only makes a cut once array length exceeds 150%.

package/dist/api/MetroplexSocket.js

@@ -1,10 +1,9 @@
 import { __awaiter } from 'tslib';
 import uuid from 'react-native-uuid';
-import { Platform } from 'react-native';
-import { MetroplexRoute, MetroplexMessageType, WorkRequestMessageType, EventType, Severity, InboundMessageType } from 'noibu-metroplex-ts-bindings';
+import { MetroplexRoute, WorkRequestMessageType, MetroplexMessageType, EventType, Severity, InboundMessageType } from 'noibu-metroplex-ts-bindings';
 import { getUserAgent, stringifyJSON } from '../utils/function.js';
 import { addSafeEventListener } from '../utils/eventlistener.js';
-import { GET_METROPLEX_BASE_SOCKET_URL, GET_METROPLEX_POST_URL, GET_MAX_METROPLEX_RECONNECTION_NUMBER, GET_METROPLEX_CONSECUTIVE_CONNECTION_DELAY, MAX_BEACON_PAYLOAD_SIZE, CURRENT_NOIBUJS_VERSION, GET_SCRIPT_ID } from '../constants.js';
+import { GET_METROPLEX_BASE_SOCKET_URL, GET_METROPLEX_POST_URL, GET_MAX_METROPLEX_RECONNECTION_NUMBER, GET_METROPLEX_CONSECUTIVE_CONNECTION_DELAY, MAX_BEACON_PAYLOAD_SIZE, GET_SCRIPT_ID, CURRENT_NOIBUJS_VERSION } from '../constants.js';
 import ClientConfig from './ClientConfig.js';
 import StoredMetrics from './StoredMetrics.js';
 import StoredPageVisit from './StoredPageVisit.js';
@@ -19,9 +18,6 @@ import { Singleton } from '../monitors/BaseMonitor.js';
  */
 function getVideoRecorderType() {
     return __awaiter(this, void 0, void 0, function* () {
-        if (Platform.OS === 'android') {
-            return 'AndroidNative';
-        }
         return 'RRWeb'; // should never happen
     });
 }

package/dist/api/StoredMetrics.js

@@ -1,7 +1,7 @@
 import { __awaiter } from 'tslib';
-import { CURRENT_NOIBUJS_VERSION, GET_METROPLEX_METRICS_URL } from '../constants.js';
+import { GET_METROPLEX_METRICS_URL, CURRENT_NOIBUJS_VERSION } from '../constants.js';
 import ClientConfig from './ClientConfig.js';
-import { getUserAgent, stringifyJSON } from '../utils/function.js';
+import { stringifyJSON, getUserAgent } from '../utils/function.js';
 import { addSafeEventListener } from '../utils/eventlistener.js';
 import { unwrapNoibuWrapped } from '../utils/object.js';
 import { Singleton } from '../monitors/BaseMonitor.js';

package/dist/constants.js

@@ -24,7 +24,7 @@ const CONTENT_TYPE = 'content-type';
  * Gets the script id from the cookie object, returns default if cannot be found
  */
 function GET_SCRIPT_ID() {
-    return "1.0.104-rn-sdk-0.2.18" ;
+    return "1.0.104-rn-sdk-0.2.20" ;
 }
 /**
  * Gets the max metro recon number

package/dist/entry/init.js

@@ -3,7 +3,7 @@ import uuid from 'react-native-uuid';
 import { MetroplexRoute, Severity } from 'noibu-metroplex-ts-bindings';
 import { KeyboardInputMonitor } from '../monitors/KeyboardInputMonitor.js';
 import { PageMonitor } from '../monitors/PageMonitor.js';
-import { GET_METROPLEX_BASE_SOCKET_URL, GET_METROPLEX_BASE_HTTP_URL } from '../constants.js';
+import { GET_METROPLEX_BASE_HTTP_URL, GET_METROPLEX_BASE_SOCKET_URL } from '../constants.js';
 import ClientConfig from '../api/ClientConfig.js';
 import { isNoibuJSAlreadyLoaded } from '../utils/function.js';
 import { PageVisitManager } from '../pageVisit/PageVisitManager.js';

package/dist/mobileTransformer/mobile-replay/index.js

@@ -1,7 +1,7 @@
 import Ajv from 'ajv';
 import mobileSchema from './schema/mobile/rr-mobile-schema.json.js';
 import webSchema from './schema/web/rr-web-schema.json.js';
-import { makeFullEvent, makeIncrementalEvent, makeMetaEvent, makeCustomEvent } from './transformer/transformers.js';
+import { _drainWebViewSnapshots, makeCustomEvent, makeMetaEvent, makeIncrementalEvent, makeFullEvent } from './transformer/transformers.js';
 
 //import { captureException, captureMessage } from '@sentry/react'
 //@ts-ignore
@@ -41,6 +41,20 @@ function transformEventToWeb(event, validateTransformation) {
     }
     return event;
 }
+function transformToWeb(mobileData) {
+    return mobileData.reduce((acc, event) => {
+        const transformed = transformEventToWeb(event);
+        const finalEvent = transformed ? transformed : event;
+        acc.push(finalEvent);
+        // Append any snapshots generated during this event's transformation
+        const snapshots = _drainWebViewSnapshots();
+        if (snapshots.length > 0) {
+            // Ensure snapshots have required fields; push as-is to preserve timestamps/order
+            snapshots.forEach((s) => acc.push(s));
+        }
+        return acc;
+    }, []);
+}
 function validateAgainstWebSchema(data) {
     const validationResult = webSchemaValidator(data);
     if (!validationResult) {
@@ -54,4 +68,4 @@ function validateAgainstWebSchema(data) {
     return validationResult;
 }
 
-export { transformEventToWeb, validateAgainstWebSchema };
+export { transformEventToWeb, transformToWeb, validateAgainstWebSchema };

package/dist/mobileTransformer/mobile-replay/mobile.types.d.ts

@@ -216,6 +216,13 @@ export type wireframeRectangle = wireframeBase & {
 export type wireframeWebView = wireframeBase & {
     type: 'web_view';
     url?: string;
+    /**
+     * @description Contains the rrweb meta and full snapshot events for the webview content, as a JSON string.
+     * The string is an array of two events: [metaEvent, fullSnapshotEvent].
+     */
+    rrwebFullSnapshot: {
+        node: any[];
+    };
 };
 export type wireframePlaceholder = wireframeBase & {
     type: 'placeholder';

package/dist/mobileTransformer/mobile-replay/schema/mobile/rr-mobile-schema.json.js

@@ -1539,6 +1539,18 @@ var definitions = {
 			},
 			y: {
 				type: "number"
+			},
+			rrwebFullSnapshot: {
+				description: "Contains the rrweb meta and full snapshot events for the webview content, as a JSON string. The string is an array of two events: [metaEvent, fullSnapshotEvent].",
+				type: "object",
+				properties: {
+					node: {
+						type: "string"
+					}
+				},
+				required: [
+					"node"
+				]
 			}
 		},
 		required: [

package/dist/mobileTransformer/mobile-replay/transformer/screen-chrome.js

@@ -1,6 +1,6 @@
 import { NodeType } from '../mobile.types.js';
 import { isLight } from './colors.js';
-import { _isPositiveInteger, makePlaceholderElement, KEYBOARD_ID, NAVIGATION_BAR_ID, STATUS_BAR_ID, BACKGROUND } from './transformers.js';
+import { _isPositiveInteger, makePlaceholderElement, NAVIGATION_BAR_ID, STATUS_BAR_ID, BACKGROUND, KEYBOARD_ID } from './transformers.js';
 import { asStyleString, makeStylesString } from './wireframeStyle.js';
 
 let navigationBackgroundColor = undefined;

package/dist/mobileTransformer/mobile-replay/transformer/transformers.d.ts

@@ -2,6 +2,7 @@ import { customEvent, fullSnapshotEvent, incrementalSnapshotEvent, metaEvent } f
 import { fullSnapshotEvent as MobileFullSnapshotEvent, keyboardEvent, metaEvent as MobileMetaEvent, MobileIncrementalSnapshotEvent, serializedNodeWithId, wireframe, wireframeDiv, wireframeNavigationBar, wireframeStatusBar } from '../mobile.types';
 import { ConversionContext, ConversionResult } from './types';
 export declare const BACKGROUND = "#f3f4ef";
+export declare function _drainWebViewSnapshots(): any[];
 export declare const NAVIGATION_BAR_ID = 8;
 export declare const KEYBOARD_ID = 10;
 export declare const STATUS_BAR_PARENT_ID = 11;

package/dist/mobileTransformer/mobile-replay/transformer/transformers.js

@@ -1,11 +1,20 @@
-import { IncrementalSource, EventType } from '../rrweb.js';
+import { EventType, IncrementalSource } from '../rrweb.js';
 import { isObject } from '../../utils.js';
 import { NodeType } from '../mobile.types.js';
-import { makeOpenKeyboardPlaceholder, makeStatusBar, makeNavigationBar } from './screen-chrome.js';
-import { makeHTMLStyles, makeBodyStyles, makeStylesString, asStyleString, makeMinimalStyles, makeDeterminateProgressStyles, makeIndeterminateProgressStyles, makePositionStyles, makeColorStyles } from './wireframeStyle.js';
+import { makeOpenKeyboardPlaceholder, makeNavigationBar, makeStatusBar } from './screen-chrome.js';
+import { makeBodyStyles, makeHTMLStyles, makeStylesString, asStyleString, makeDeterminateProgressStyles, makeIndeterminateProgressStyles, makeMinimalStyles, makePositionStyles, makeColorStyles } from './wireframeStyle.js';
+import { transform } from './webview-transformer.js';
 
 const BACKGROUND = '#f3f4ef';
 const FOREGROUND = '#35373e';
+// Buffer to collect snapshots generated during element transformations (e.g., WebView)
+// These are later drained and appended to the top-level transformed JSON.
+let __pendingWebViewSnapshots = [];
+function _drainWebViewSnapshots() {
+    const out = __pendingWebViewSnapshots;
+    __pendingWebViewSnapshots = [];
+    return out;
+}
 /**
  * generates a sequence of ids
  * from 100 to 9,999,999
@@ -183,11 +192,12 @@ function makeTextElement(wireframe, children, context) {
     };
 }
 function makeWebViewElement(wireframe, children, context) {
-    const labelledWireframe = Object.assign({}, wireframe);
-    if ('url' in wireframe) {
-        labelledWireframe.label = wireframe.url;
+    const webViewWireframe = wireframe;
+    const { frame, snapshots } = transform(webViewWireframe);
+    if (Array.isArray(snapshots) && snapshots.length > 0) {
+        __pendingWebViewSnapshots.push(...snapshots);
     }
-    return makePlaceholderElement(labelledWireframe, children, context);
+    return { result: frame, context };
 }
 function makePlaceholderElement(wireframe, children, context) {
     var _a, _b;
@@ -1151,4 +1161,4 @@ function makeCSSReset(context) {
     };
 }
 
-export { BACKGROUND, KEYBOARD_ID, NAVIGATION_BAR_ID, STATUS_BAR_ID, STATUS_BAR_PARENT_ID, _isPositiveInteger, dataURIOrPNG, makeCustomEvent, makeDivElement, makeFullEvent, makeIncrementalEvent, makeMetaEvent, makePlaceholderElement, stripBarsFromWireframes };
+export { BACKGROUND, KEYBOARD_ID, NAVIGATION_BAR_ID, STATUS_BAR_ID, STATUS_BAR_PARENT_ID, _drainWebViewSnapshots, _isPositiveInteger, dataURIOrPNG, makeCustomEvent, makeDivElement, makeFullEvent, makeIncrementalEvent, makeMetaEvent, makePlaceholderElement, stripBarsFromWireframes };

package/dist/mobileTransformer/mobile-replay/transformer/webview-transformer.d.ts

@@ -0,0 +1,9 @@
+import { wireframeWebView as WebView } from "../mobile.types";
+type Node = any;
+type Snapshot = any;
+type Result = {
+    frame: Node;
+    snapshots: Snapshot[];
+};
+export declare function transform(webView: WebView): Result;
+export {};

package/dist/mobileTransformer/mobile-replay/transformer/webview-transformer.js

@@ -0,0 +1,124 @@
+function transform(webView) {
+    const frameId = 999999999;
+    const rootId = frameId + 1;
+    const result = { frame: null, snapshots: [] };
+    try {
+        const snapshots = webView.rrwebFullSnapshot.node;
+        const fullSnapshotIndex = snapshots.findIndex((event) => event.type === 2);
+        const fullSnapshot = snapshots[fullSnapshotIndex];
+        const incrementalSnapshots = snapshots.filter((snapshot, index) => snapshot.type === 3 && index > fullSnapshotIndex);
+        const syntheticSnapshot = createSyntheticSnapshot(fullSnapshot, frameId, rootId);
+        incrementalSnapshots.forEach((snapshot) => patchIncrementalSnapshot(snapshot, rootId));
+        result.frame = createFrameNode(frameId);
+        ;
+        result.snapshots.push(syntheticSnapshot, ...incrementalSnapshots);
+    }
+    catch (error) {
+        console.error(error);
+    }
+    return result;
+}
+function createSyntheticSnapshot(snapshot, frameId, rootId) {
+    const childNodes = snapshot.data.node.childNodes;
+    const htmlNodeIndex = childNodes.findIndex((node) => node.type === 2 && node.tagName === "html");
+    const htmlNode = childNodes[htmlNodeIndex];
+    patch(htmlNode);
+    return {
+        type: 3,
+        data: {
+            source: 0,
+            adds: [
+                {
+                    parentId: frameId,
+                    nextId: null,
+                    node: {
+                        type: 0,
+                        childNodes: [htmlNode],
+                        id: rootId,
+                    }
+                }
+            ],
+            removes: [],
+            texts: [],
+            attributes: [],
+            isAttachIframe: true,
+        },
+        timestamp: snapshot.timestamp,
+    };
+    function patch(node) {
+        node.rootId = rootId;
+        if (node.id) {
+            node.id = rootId + node.id;
+        }
+        if (node.childNodes) {
+            node.childNodes.forEach(patch);
+        }
+    }
+}
+function patchIncrementalSnapshot(snapshot, rootId) {
+    const { data } = snapshot;
+    const { adds, removes, attributes, positions } = data;
+    if (data.id) {
+        data.id = rootId + data.id;
+    }
+    if (adds === null || adds === void 0 ? void 0 : adds.length) {
+        adds.forEach(patchAdd);
+    }
+    if (removes === null || removes === void 0 ? void 0 : removes.length) {
+        removes.forEach(patchRemove);
+    }
+    if (attributes === null || attributes === void 0 ? void 0 : attributes.length) {
+        attributes.forEach(patchAttribute);
+    }
+    if (positions === null || positions === void 0 ? void 0 : positions.length) {
+        positions.forEach(patchAttribute);
+    }
+    function patchNode(node) {
+        if (node.id) {
+            node.id = rootId + node.id;
+        }
+        if (node.rootId) {
+            node.rootId = rootId + node.rootId;
+        }
+        if (node.childNodes) {
+            node.childNodes.forEach(patchNode);
+        }
+    }
+    function patchAdd(add) {
+        if (add.parentId) {
+            add.parentId = rootId + add.parentId;
+        }
+        if (add.nextId) {
+            add.nextId = rootId + add.nextId;
+        }
+        if (add.node) {
+            patchNode(add.node);
+        }
+    }
+    function patchRemove(remove) {
+        if (remove.parentId) {
+            remove.parentId = rootId + remove.parentId;
+        }
+        if (remove.id) {
+            remove.id = rootId + remove.id;
+        }
+    }
+    function patchAttribute(attribute) {
+        if (attribute.id) {
+            attribute.id = rootId + attribute.id;
+        }
+    }
+}
+function createFrameNode(id) {
+    return {
+        type: 2,
+        tagName: "iframe",
+        attributes: {
+            style: "width: 100%; height: 100%;"
+        },
+        childNodes: [],
+        id: id,
+    };
+}
+
+export { transform };

package/dist/monitors/ErrorMonitor.js

@@ -1,4 +1,4 @@
-import { asString, isStackTrace } from '../utils/function.js';
+import { isStackTrace, asString } from '../utils/function.js';
 import { saveErrorToPagevisit } from '../pageVisit/pageVisitEventError.js';
 import { replace } from '../utils/object.js';
 import { Singleton } from './BaseMonitor.js';

package/dist/monitors/KeyboardInputMonitor.js

@@ -1,7 +1,7 @@
 import { EventDebouncer } from '../pageVisit/EventDebouncer.js';
 import { TextInput } from 'react-native';
 import { Singleton } from './BaseMonitor.js';
-import { EventType, UserStepType } from 'noibu-metroplex-ts-bindings';
+import { UserStepType, EventType } from 'noibu-metroplex-ts-bindings';
 
 /** @module KeyboardInputMonitor */
 /**

package/dist/pageVisit/HttpEventManager.js

@@ -8,9 +8,9 @@ import { MetroplexMessageType, EventType } from 'noibu-metroplex-ts-bindings';
 /** @module PageVisitEventHTTP */
 /** http event manager */
 // maximum number of HTTP data events including errors to collect per page visit
-const MAX_HTTP_DATA_IF_ERROR_EVENT_COUNT = 2800;
+const MAX_HTTP_DATA_IF_ERROR_EVENT_COUNT = 5000;
 // maximum number of HTTP data events to collect per page visit
-const MAX_HTTP_DATA_EVENT_COUNT = 2500;
+const MAX_HTTP_DATA_EVENT_COUNT = 5000;
 /** if no value or it's less than 0, fallback to 0 */
 const validate = (value) => (!value || value < 0 ? 0 : value);
 /** Saves the HTTP event to the pageVisit Queue */

package/dist/pageVisit/pageVisitEventError.js

@@ -1,5 +1,5 @@
 import { __awaiter } from 'tslib';
-import { isValidURL, getJSStack, stringifyJSON, getMaxSubstringAllowed, asString } from '../utils/function.js';
+import { isValidURL, stringifyJSON, getMaxSubstringAllowed, getJSStack, asString } from '../utils/function.js';
 import ClientConfig from '../api/ClientConfig.js';
 import StoredMetrics from '../api/StoredMetrics.js';
 import { EventDebouncer } from './EventDebouncer.js';

package/dist/sessionRecorder/SessionRecorder.d.ts

@@ -27,10 +27,6 @@ export default class SessionRecorder extends Singleton {
      * of the buffer if it exceeds max size
      */
     handleRecorderEvent(recorderEvent: RecorderEvent): Promise<void>;
-    /** Compress event */
-    private pack;
-    /** Compresses the snapshot */
-    private static compress;
     /** builds a log message with debug info */
     buildDebugMessage(eventName: string, totalVideoTime: number, sessionLength: number): string;
     /**

package/dist/sessionRecorder/SessionRecorder.js

@@ -1,6 +1,5 @@
 import { __awaiter } from 'tslib';
-import { strToU8, zlibSync, strFromU8 } from 'fflate';
-import { LogLevel, initialize, subscribeToNativeEvent } from './nativeSessionRecorderSubscription.js';
+import { initialize, subscribeToNativeEvent } from './nativeSessionRecorderSubscription.js';
 import StoredMetrics from '../api/StoredMetrics.js';
 import ClientConfig from '../api/ClientConfig.js';
 import { stringifyJSON } from '../utils/function.js';
@@ -8,7 +7,6 @@ import { MAX_TIME_FOR_UNSENT_DATA_MILLIS } from '../constants.js';
 import MetroplexSocket from '../api/MetroplexSocket.js';
 import { addSafeEventListener } from '../utils/eventlistener.js';
 import { noibuLog } from '../utils/log.js';
-import { Platform } from 'react-native';
 import { Singleton } from '../monitors/BaseMonitor.js';
 import { Severity, MetroplexMessageType } from 'noibu-metroplex-ts-bindings';
 
@@ -36,10 +34,7 @@ class SessionRecorder extends Singleton {
         this.freezingEvents = false;
         this.setupUnloadHandler();
         this.setupPostMetricsHandler();
-        const nativeSessionRecorderConfig = {
-            logLevel: LogLevel.Verbose,
-        };
-        initialize('abc1234', nativeSessionRecorderConfig);
+        initialize();
         addSafeEventListener(window, 'click', () => this.handleFragPost());
     }
     /** Sets up the page hide handler to try to push remaining video events */
@@ -147,9 +142,9 @@ class SessionRecorder extends Singleton {
                 ClientConfig.getInstance().postInternalError({ msg: `Detected time rewind. Client has been disabled.` }, true, Severity.ERROR, true);
                 return;
             }
-            const packedEvent = yield this.pack(recorderEvent.message);
+            //
             // Buffer the event for sending to metroplex
-            this.eventBuffer.push(packedEvent);
+            this.eventBuffer.push(recorderEvent.message);
             // Check if the event was a click or a double click. This is true if the root type is
             // incremental snapshot (3) and the data source is mouse interaction data (2).
             // Finally, we capture a click (2) or double click (4) event.
@@ -161,25 +156,6 @@ class SessionRecorder extends Singleton {
             }
         });
     }
-    /** Compress event */
-    pack(recorderEvent) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // return JSON.stringify(recorderEvent);
-            if (Platform.OS === 'ios') {
-                return recorderEvent;
-            }
-            else {
-                return SessionRecorder.compress(recorderEvent);
-            }
-        });
-    }
-    /** Compresses the snapshot */
-    static compress(snapshot) {
-        const uncompressedString = stringifyJSON(snapshot);
-        const uncompressedData = strToU8(uncompressedString);
-        const compressedData = zlibSync(uncompressedData, { level: 1 });
-        return strFromU8(compressedData, true);
-    }
     /** builds a log message with debug info */
     buildDebugMessage(eventName, totalVideoTime, sessionLength) {
         return JSON.stringify({ eventName, totalVideoTime, sessionLength });

package/dist/sessionRecorder/nativeSessionRecorderSubscription.d.ts

@@ -34,29 +34,8 @@ export interface SessionRecorderConfig {
 }
 /**
  * Initializes the Noibu - Session recording SDK if the API level is supported.
- * param projectId     [REQUIRED] The session recording project id to send data to.
- * param config   [OPTIONAL] The sessionreplay config, if not provided default values are used.
  */
-export declare function initialize(projectId: string, config?: SessionRecorderConfig): void;
-/**
- * Sets a custom user id that can be used to identify the user. It has less
- * restrictions than the userId parameter. You can pass any string and
- * you can filter on it on the dashboard side. If you need the most efficient
- * filtering on the dashboard, use the userId parameter if possible.
- * <p>
- * Note: custom user id cannot be null or empty, or consists only of whitespaces.
- * </p>
- * @param customUserId   The custom user id to set.
- */
-export declare function setCustomUserId(customUserId: string): void;
-/**
- * Sets a custom session id that can be used to identify the session.
- * <p>
- * Note: custom session id cannot be null or empty, or consists only of whitespaces.
- * </p>
- * @param customSessionId   The custom session id to set.
- */
-export declare function setCustomSessionId(customSessionId: string): void;
+export declare function initialize(): void;
 export type RecorderEvent = import('./types').RecorderEvent;
 export type UnsubscribeFn = import('./types').UnsubscribeFn;
 export declare function subscribeToNativeEvent(callback: (event: RecorderEvent) => void): UnsubscribeFn;

package/dist/sessionRecorder/nativeSessionRecorderSubscription.js

@@ -1,6 +1,7 @@
-import { Platform, NativeEventEmitter, NativeModules } from 'react-native';
+import { __rest } from 'tslib';
+import { NativeModules, Platform, NativeEventEmitter } from 'react-native';
 import { noibuLog } from '../utils/log.js';
-import { transformEventToWeb } from '../mobileTransformer/mobile-replay/index.js';
+import { transformToWeb } from '../mobileTransformer/mobile-replay/index.js';
 
 const LINKING_ERROR = `The package 'noibu-session-replay' doesn't seem to be linked. Make sure: \n\n` +
     // Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) + TODO: add back when iOS is supported.
@@ -22,19 +23,12 @@ var LogLevel;
 })(LogLevel || (LogLevel = {}));
 /**
  * Initializes the Noibu - Session recording SDK if the API level is supported.
- * param projectId     [REQUIRED] The session recording project id to send data to.
- * param config   [OPTIONAL] The sessionreplay config, if not provided default values are used.
  */
-function initialize(projectId, config) {
+function initialize() {
     if (Platform.OS === 'ios') {
         return;
     }
-    if (!(typeof config === 'object' || typeof config === 'undefined')) {
-        throw Error('Invalid session recording initialization arguments. Please check the docs for assitance.');
-    }
     nativeModuleEmitter = new NativeEventEmitter(NativeSessionRecorder);
-    // applying default values
-    const { userId = null, logLevel = LogLevel.None, allowMeteredNetworkUsage = false, enableWebViewCapture = true, allowedDomains = ['*'], disableOnLowEndDevices = false, maximumDailyNetworkUsageInMB = null, } = config !== null && config !== void 0 ? config : {};
     if (!SupportedPlatforms.includes(Platform.OS)) {
         noibuLog(`Noibu - Session recording supports ${SupportedPlatforms.join(', ')} only for now.`);
         return;
@@ -43,10 +37,7 @@ function initialize(projectId, config) {
         noibuLog('Noibu - Session recording did not initialize properly.', LINKING_ERROR);
         return;
     }
-    // We use two parameters because the react method parameters do not accept nullable primitive types.
-    const enableDailyNetworkUsageLimit = maximumDailyNetworkUsageInMB != null;
-    const refinedMaximumDailyNetworkUsageInMB = maximumDailyNetworkUsageInMB !== null && maximumDailyNetworkUsageInMB !== void 0 ? maximumDailyNetworkUsageInMB : 0;
-    NativeSessionRecorder.initialize(projectId, userId, logLevel, allowMeteredNetworkUsage, enableWebViewCapture, allowedDomains, disableOnLowEndDevices, enableDailyNetworkUsageLimit, refinedMaximumDailyNetworkUsageInMB);
+    NativeSessionRecorder.initialize();
 }
 /**
  * Subscribes to a native event emitted by the Noibu Session Recorder.
@@ -70,7 +61,15 @@ function subscribeToNativeEvent(callback) {
             throw new Error('You have to initialize Noibu Session Recorder first');
         }
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        nativeModuleEmitter.addListener('noibuRecordingEvent', callback);
+        // const subscription = nativeModuleEmitter.addListener('noibuRecordingEvent', callback);
+        nativeModuleEmitter.addListener('noibuRecordingEvent', event => {
+            const message = event.message;
+            const _a = JSON.parse(message), { data } = _a, rest = __rest(_a, ["data"]);
+            noibuLog('New noibu recording event', rest);
+            const transformedEvents = transformToWeb([Object.assign(Object.assign({}, rest), { data })]);
+            noibuLog('after transformation: ', transformedEvents);
+            transformedEvents.forEach((e) => callback({ message: e }));
+        });
         // return () => subscription.remove();
     }
     if (Platform.OS === 'ios') {
@@ -80,11 +79,11 @@ function subscribeToNativeEvent(callback) {
         }
         nativeModuleEmitter.addListener('iosPOCRecordingEvent', event => {
             try {
-                const transformedEvent = transformEventToWeb(event.message);
-                callback({ message: transformedEvent });
+                const transformedEvents = transformToWeb([event.message]);
+                transformedEvents.forEach((e) => callback({ message: e }));
             }
             catch (e) {
-                noibuLog(`[Error] transformEventToWeb failed: ${e.message}`);
+                noibuLog(`[Error] transformToWeb failed: ${e.message}`);
             }
         });
         if (!isIOSInitialized) {

package/dist/sessionRecorder/types.d.ts

@@ -1,91 +1,4 @@
-type Color = {
-    a: number;
-    b: number;
-    r: number;
-    g: number;
-};
-type Paint = {
-    strokeJoin: number;
-    strokeWidth: number;
-    strokeCap: number;
-    color: Color;
-    dither: boolean;
-    blendMode: number;
-    style: number;
-    antiAlias: boolean;
-    strokeMiter: number;
-};
-type Rect = {
-    top: number;
-    left: number;
-    bottom: number;
-    right: number;
-};
-type Command = {
-    name?: string;
-    id?: number;
-    type: string;
-    isClipRectSource?: boolean;
-    rect?: Rect;
-    paintIndex?: number;
-    op?: number;
-    antiAlias?: boolean;
-    matrix?: number[];
-};
-type ViewNode = {
-    viewX: number;
-    visible: boolean;
-    processedText$delegate: {
-        _value: any;
-        initializer: any;
-    };
-    viewY: number;
-    viewWidth: number;
-    clickable: boolean;
-    viewHeight: number;
-    isMasked: boolean;
-    type: string;
-    renderNodeId: number;
-    isWebView: boolean;
-    ignoreClicks: boolean;
-    children: ViewNode[];
-    width: number;
-    x: number;
-    y: number;
-    id: number;
-    text: string;
-    height: number;
-    backgroundColor?: number;
-};
-type ViewHierarchy = {
-    root: ViewNode;
-    visibleFragments: any[];
-    timestamp: number;
-};
-type SubPicture = {
-    subPictures: any[];
-    images: any[];
-    screenWidth: number;
-    textBlobs: any[];
-    density: number;
-    vertices: any[];
-    screenHeight: number;
-    activityName: string;
-    paints: Paint[];
-    typefaces: any[];
-    viewHierarchy: ViewHierarchy;
-    paths: any[];
-    activityHashCode: number;
-    commands: Command[];
-    timestamp: number;
-};
 export type RecorderEvent = {
-    message: NativeFrames;
+    message: string;
 };
-export type NativeFrames = {
-    p: (number | boolean | SubPicture)[][];
-    a: (number[] | (number | string | string[])[])[];
-    e: (string | number)[];
-} | string;
 export type UnsubscribeFn = () => void;
-export {};

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "noibu-react-native",
-  "version": "0.2.18",
+  "version": "0.2.20",
   "targetNjsVersion": "1.0.104",
   "description": "React-Native SDK for NoibuJS to collect errors in React-Native applications",
   "main": "dist/entry/index.js",
   "types": "dist/entry/index.d.ts",
   "files": [
     "android",
+    "android/settings.gradle",
     "dist/*",
     "README.md",
     "CHANGELOG.md",
@@ -41,14 +42,12 @@
   },
   "optionalDependencies": {
     "@react-native-async-storage/async-storage": "^1.19.0",
-    "fflate": "^0.8.2",
     "react-native-navigation": ">=2.29.0",
     "react-native-url-polyfill": "^1.3.0",
     "react-native-uuid": "^2.0.1"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": "^1.19.0",
-    "fflate": "^0.8.2",
     "react": ">=16.13.1 <=18",
     "react-native": ">=0.63.0",
     "react-native-navigation": ">=2.29.0",
@@ -71,7 +70,7 @@
     "@tsconfig/react-native": "^3.0.2",
     "@types/jest": "^29.5.14",
     "@types/node": "^20.2.3",
-    "@types/react": "16.14.62",
+    "@types/react": "18.2.6",
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^8.19.1",
     "@typescript-eslint/parser": "^8.19.1",
@@ -83,7 +82,6 @@
     "eslint-plugin-jsdoc": "^50.6.1",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.3",
-    "fflate": "0.8.2",
     "jest": "^29.7.0",
     "prettier": "^3.4.2",
     "react": "16.13.1",