noibu-react-native 0.2.19 → 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,12 +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:1.0.0"
-//  Remove or comment out the old dependency
-//  implementation project(":new_sessionreplay")
-
-  // Add the dependency on the local KMP shared module
-//  implementation project(":sessionreplay:shared")
+  implementation "com.noibu:sessionreplay-recorder:1.0.1"
 }
 
 if (isNewArchitectureEnabled()) {

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

@@ -41,16 +41,6 @@ class NoibuSessionReplayModule(reactContext: ReactApplicationContext) :
         promise.resolve(true)
     }
 
-    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
-    }
-
     @ReactMethod
     fun addListener(eventName: String) {
         // Set up any upstream listeners or background tasks as necessary

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.19" ;
+    return "1.0.104-rn-sdk-0.2.20" ;
 }
 /**
  * Gets the max metro recon number

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 { makeCustomEvent, makeMetaEvent, makeIncrementalEvent, makeFullEvent } 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/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

@@ -3,9 +3,18 @@ import { isObject } from '../../utils.js';
 import { NodeType } from '../mobile.types.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/sessionRecorder/nativeSessionRecorderSubscription.js

@@ -1,7 +1,7 @@
 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.
@@ -63,12 +63,12 @@ function subscribeToNativeEvent(callback) {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         // const subscription = nativeModuleEmitter.addListener('noibuRecordingEvent', callback);
         nativeModuleEmitter.addListener('noibuRecordingEvent', event => {
-            let message = event.message;
+            const message = event.message;
             const _a = JSON.parse(message), { data } = _a, rest = __rest(_a, ["data"]);
-            noibuLog("New noibu recording event", rest);
-            const transformedEvent = transformEventToWeb(Object.assign({ data }, rest));
-            noibuLog("after transformation: ", transformedEvent);
-            callback({ message: transformedEvent });
+            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();
     }
@@ -79,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noibu-react-native",
-  "version": "0.2.19",
+  "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",
@@ -42,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",