noibu-react-native 0.2.5 → 0.2.7

package/dist/monitors/BaseMonitor.js

@@ -1,8 +1,6 @@
 import { noibuLog } from '../utils/log.js';
 
-/**
- * Singleton pattern with our flavor
- */
+/** Singleton pattern with our flavor */
 class Singleton {
     /** returns singleton instance */
     static getInstance(...args) {
@@ -13,8 +11,15 @@ class Singleton {
         }
         return Singleton.instances.get(this);
     }
+    /** Destructor */
+    destroy() {
+        // implement in subclasses if needed
+    }
     /** used for testing only */
-    resetInstances() {
+    static resetInstances() {
+        Singleton.instances.forEach(instance => {
+            instance.destroy();
+        });
         Singleton.instances.clear();
     }
 }

package/dist/monitors/ClickMonitor.js

@@ -1,95 +1,85 @@
 import Pressability from 'react-native/Libraries/Pressability/Pressability';
-import { WHITELIST_HTML_ID_TEXT_REGEX, USERSTEP_EVENT_TYPE, SOURCE_ATT_NAME, TEXT_ATT_NAME, TAGNAME_ATT_NAME, HTMLID_ATT_NAME, TYPE_ATT_NAME, CLICK_EVENT_TYPE, CSS_CLASS_ATT_NAME } from '../constants.js';
-import { PageVisit } from '../pageVisit/pageVisit.js';
-import { updatePayload } from '../pageVisit/userStep.js';
-import StoredMetrics from '../api/storedMetrics.js';
+import { PageVisitManager } from '../pageVisit/PageVisitManager.js';
+import StoredMetrics from '../api/StoredMetrics.js';
 import { WHITELIST_TEXT_REGEX_STRING } from '../const_matchers.js';
 import { maskTextInput } from '../utils/function.js';
-import { timestampWrapper } from '../utils/date.js';
-import ClientConfig from '../api/clientConfig.js';
+import ClientConfig from '../api/ClientConfig.js';
 import { Singleton } from './BaseMonitor.js';
+import { isNoibuWrapped, replace, unwrapNoibuWrapped } from '../utils/object.js';
+import '../node_modules/@noibu/metroplex-ts-bindings/dist/index.js';
+import { UserStepType } from '../node_modules/@noibu/metroplex-ts-bindings/dist/UserStepType.js';
+import { EventType } from '../node_modules/@noibu/metroplex-ts-bindings/dist/EventType.js';
 
 /** @module ClickMonitor */
+/**
+ * will return a regex that will match
+ * any keywords that may indicate that users are moving
+ * forward in the sales funnel. It will match add to cart, checkout,
+ * and any other relevant text.
+ * INFO: WHEN ARCEE CHANGES THE REGEX PATTERN, THIS NEEDS TO CHANGE TOO
+ * will return a regex that will match
+ * any keywords that may indicate that users are moving
+ * forward in the sales funnel. It will match add to cart, checkout,
+ * and any other relevant text.
+ * INFO: WHEN ARCEE CHANGES THE REGEX PATERN, THIS NEEDS TO CHANGE TOO
+ * text that have this id will not be masked, change arcee/src/models/websessions/pv_event.rs
+ */
+const WHITELIST_HTML_ID_TEXT_REGEX = 'method|finance|sagepay|cart|bag|coupon|affirm|karna|sezzle|button';
 /** Monitors the clicks which we capture and later process */
 class ClickMonitor extends Singleton {
     /** Starts monitoring clicks on every Press-able component */
     monitor() {
-        if (!ClickMonitor.originalCreateEventHandlers) {
-            ClickMonitor.originalCreateEventHandlers =
-                Pressability.prototype.getEventHandlers;
-            /**
-             * Proxies prototype method
-             */
-            Pressability.prototype.getEventHandlers = function () {
-                const ehs = ClickMonitor.originalCreateEventHandlers.call(this);
-                return Object.fromEntries(Object.entries(ehs).map(([key, handler]) => [
-                    key,
-                    (event) => {
-                        if (key === 'onResponderRelease') {
-                            ClickMonitor.onClickHandle(event);
-                        }
-                        return handler(event);
-                    },
-                ]));
-            };
+        if (isNoibuWrapped(Pressability.prototype.getEventHandlers)) {
+            return;
         }
+        replace(Pressability.prototype, 'getEventHandlers', function (original) {
+            return function nbuWrapper() {
+                const ehs = original.call(this);
+                return Object.assign(Object.assign({}, ehs), { onResponderRelease: function nbuWrapper(event) {
+                        ClientConfig.getInstance().wrapInternal('ClickMonitor.onClickHandle', () => ClickMonitor.onClickHandle(event));
+                        return ehs.onResponderRelease(event);
+                    } });
+            };
+        });
     }
-    /**
-     * Handles a single click event
-     */
+    /** Handles a single click event */
     static onClickHandle(event) {
         if (event) {
             const { _targetInst: target } = event;
-            const targetClassName = target.elementType;
-            // if the tag name of the src element is image, then we need
-            // to process the image name, else we need to get the textual content
-            // todo process images
-            const text = ClickMonitor.getTextualContentFromEl(target);
-            let textFromElement = ClickMonitor.trimText(text);
-            let tagName = '';
-            if (typeof targetClassName === 'string') {
-                tagName = targetClassName.toLowerCase();
-            }
-            // id of element
-            let hid = target.memoizedProps.testID || '';
-            // in some bizarre cases, the html id of an element gets overriden
-            // to contain jquery objects. If the hid is an object, it's of no
-            // use to us.
-            if (typeof hid !== 'string') {
-                hid = '';
+            if (!target) {
+                return;
             }
+            const tag = this.getTagName(target);
+            const hid = this.getHid(target);
+            let textFromElement = ClickMonitor.trimText(ClickMonitor.getTextualContentFromEl(target));
             // if we find that the text matches analytic data used
             // to find checkout starts, add to cart clicks, etc.
             // we do not mask it.
             if (!ClickMonitor.textCapturedWhiteListRegex.test(textFromElement) &&
                 !ClickMonitor.htmlIDAllowListRegex.test(hid)) {
-                if (tagName === 'input') {
-                    if (event.type &&
-                        (event.type === 'button' || event.type === 'submit')) ;
+                if (tag === 'input') {
+                    if (event.type && (event.type === 'button' || event.type === 'submit')) ;
                     else {
                         textFromElement = '*';
                     }
                 }
-                else if (tagName === 'textarea') {
+                else if (tag === 'textarea') {
                     textFromElement = '*';
                 }
             }
-            textFromElement = maskTextInput(textFromElement);
             const tPayload = {
-                [SOURCE_ATT_NAME]: '',
-                [TEXT_ATT_NAME]: textFromElement,
-                [TAGNAME_ATT_NAME]: tagName,
-                [HTMLID_ATT_NAME]: hid,
-                [TYPE_ATT_NAME]: CLICK_EVENT_TYPE,
-                [CSS_CLASS_ATT_NAME]: '',
+                src: '',
+                txt: maskTextInput(textFromElement),
+                tag,
+                hid,
+                type: UserStepType.Click,
+                class: '',
             };
             StoredMetrics.getInstance().addPvClick();
-            PageVisit.getInstance().addPageVisitEvents([
-                {
-                    event: updatePayload(tPayload),
-                    occurredAt: new Date(timestampWrapper(Date.now())).toISOString(),
-                },
-            ], USERSTEP_EVENT_TYPE);
+            PageVisitManager.getInstance().addPageVisitEvent({
+                type: EventType.UserStep,
+                userstep: tPayload,
+            });
         }
     }
     /** Gets the textual content from an element, if any
@@ -122,12 +112,18 @@ class ClickMonitor extends Singleton {
         }
         return parsedText;
     }
-    /**
-     * Recursively parses element's inner content and masks blocked css classes
-     */
+    /** gets id */
+    static getHid(element) {
+        var _a;
+        const hid = (_a = element.memoizedProps) === null || _a === void 0 ? void 0 : _a.testID;
+        return typeof hid === 'string' ? hid : '';
+    }
+    /** gets tag name */
+    static getTagName(element) {
+        return typeof element.elementType === 'string' ? element.elementType.toLowerCase() : '';
+    }
+    /** Recursively parses element's inner content and masks blocked css classes */
     static parseInnerContent(element, text, textLimit, counter) {
-        /* eslint-disable no-restricted-syntax */
-        /* eslint-disable no-param-reassign */
         if (text.length >= textLimit) {
             return text;
         }
@@ -135,7 +131,7 @@ class ClickMonitor extends Singleton {
             return text;
         }
         counter.value += 1;
-        if (ClickMonitor.getBlockedElements().includes(element.memoizedProps.testID)) {
+        if (ClickMonitor.getBlockedElements().includes(this.getHid(element))) {
             return `${text}${text ? ' ' : ''}*`;
         }
         // eslint-disable-next-line require-jsdoc
@@ -146,9 +142,7 @@ class ClickMonitor extends Singleton {
                 ((_a = node.elementType) === null || _a === void 0 ? void 0 : _a.displayName) === 'Text' &&
                 node.memoizedProps &&
                 typeof node.memoizedProps.children === 'string') {
-                text = ClickMonitor.parseAndAppendText(text, [
-                    node.memoizedProps.children,
-                ]);
+                text = ClickMonitor.parseAndAppendText(text, [node.memoizedProps.children]);
                 if (text.length >= textLimit)
                     return;
             }
@@ -162,9 +156,7 @@ class ClickMonitor extends Singleton {
         walk(element);
         return text;
     }
-    /**
-     * Gets selectors to prevent those elements from being recorded
-     */
+    /** Gets selectors to prevent those elements from being recorded */
     static getBlockedElements() {
         const selectors = ClientConfig.getInstance().blockedElements;
         const blockedElements = ['noibu-blocked'];
@@ -173,9 +165,7 @@ class ClickMonitor extends Singleton {
         }
         return blockedElements;
     }
-    /**
-     * normalize value and append to the resulting text if not empty
-     */
+    /** normalize value and append to the resulting text if not empty */
     static parseAndAppendText(text, values) {
         const goodValues = [];
         for (const v of values) {
@@ -191,6 +181,12 @@ class ClickMonitor extends Singleton {
         }
         return text;
     }
+    /** Destructs instance */
+    destroy() {
+        if (isNoibuWrapped(Pressability.prototype.getEventHandlers)) {
+            Pressability.prototype.getEventHandlers = unwrapNoibuWrapped(Pressability.prototype.getEventHandlers);
+        }
+    }
 }
 ClickMonitor.textCapturedWhiteListRegex = new RegExp(WHITELIST_TEXT_REGEX_STRING(), 'i');
 ClickMonitor.htmlIDAllowListRegex = new RegExp(WHITELIST_HTML_ID_TEXT_REGEX, 'i');

package/dist/monitors/ErrorMonitor.js

@@ -1,15 +1,16 @@
 import { asString, isStackTrace } from '../utils/function.js';
-import { ERROR_EVENT_ERROR_TYPE, STACK_TRACE_SANITIZE_REGEXP, ERROR_EVENT_UNHANDLED_REJECTION_TYPE, CONSOLE_FUNCTION_OVERRIDES, ERROR_LOG_EVENT_ERROR_TYPE } from '../constants.js';
 import { saveErrorToPagevisit } from '../pageVisit/pageVisitEventError.js';
 import { replace } from '../utils/object.js';
 import { Singleton } from './BaseMonitor.js';
+import '../node_modules/@noibu/metroplex-ts-bindings/dist/index.js';
+import ClientConfig from '../api/ClientConfig.js';
+import { PageVisitErrorSource } from '../node_modules/@noibu/metroplex-ts-bindings/dist/PageVisitErrorSource.js';
 
 /* eslint-disable @typescript-eslint/ban-types,prefer-arrow-callback */
 /** @module ErrorMonitor */
-let ignoreError = 0;
-/**
- * Monitors the errors happening on the window
- */
+// console functions that we override to capture errors
+const CONSOLE_FUNCTION_OVERRIDES = ['error', 'warn', 'log'];
+/** Monitors the errors happening on the window */
 class ErrorMonitor extends Singleton {
     /** base method */
     monitor() {
@@ -30,16 +31,14 @@ class ErrorMonitor extends Singleton {
             }
         });
     }
-    /**
-     * Handles a single error event
-     */
+    /** Handles a single error event */
     static onErrorHandler(error) {
-        if (!error || ErrorMonitor.shouldIgnoreError()) {
+        if (!error || ErrorMonitor.preventInfiniteLoopFlag) {
             return;
         }
-        saveErrorToPagevisit(ERROR_EVENT_ERROR_TYPE, {
-            error,
-        });
+        ErrorMonitor.preventInfiniteLoopFlag = true;
+        saveErrorToPagevisit({ error, type: PageVisitErrorSource.ErrorEvent });
+        ErrorMonitor.preventInfiniteLoopFlag = false;
     }
     /** proxy hermes engine */
     static configureHermesHooks() {
@@ -48,42 +47,42 @@ class ErrorMonitor extends Singleton {
             (_a = HermesInternal.enablePromiseRejectionTracker) === null || _a === void 0 ? void 0 : _a.call(HermesInternal, {
                 allRejections: true,
             });
-            /**
-             * This internal promise implementation method is populated only after enabling the promise tracker.
-             * It represents an improvement over the previous approach,
-             * which would lose stack context regarding the rejection because it ran asynchronously through setTimeout.
-             *
-             * This updated method ensures synchronous error capturing and retrieves the correct stack frames.
-             */
-            replace(Promise, '_m', (originalFunction) => function nbuGlobalPromiseRejectWrapper(promise, error) {
-                if (error.message && error.stack) {
-                    ErrorMonitor.onPromiseRejectionHandler(error);
-                }
-                else {
-                    ErrorMonitor.onPromiseRejectionHandler(new Error(asString(error)));
+        }
+        /**
+         * This internal promise implementation method is populated only after enabling the promise tracker.
+         * It represents an improvement over the previous approach,
+         * which would lose stack context regarding the rejection because it ran asynchronously through setTimeout.
+         *
+         * This updated method ensures synchronous error capturing and retrieves the correct stack frames.
+         */
+        replace(Promise, '_m', (originalFunction) => function nbuGlobalPromiseRejectWrapper(promise, error) {
+            ClientConfig.getInstance().wrapInternal('ErrorMonitor.configureHermesHooks', () => {
+                switch (true) {
+                    case !!(error.message && error.stack): {
+                        ErrorMonitor.onPromiseRejectionHandler(error);
+                        break;
+                    }
+                    default: {
+                        ErrorMonitor.onPromiseRejectionHandler(new Error(asString(error)));
+                        break;
+                    }
                 }
-                return originalFunction === null || originalFunction === void 0 ? void 0 : originalFunction(promise, error);
             });
-        }
+            return originalFunction === null || originalFunction === void 0 ? void 0 : originalFunction(promise, error);
+        });
     }
-    /**
-     * handler for promise rejection failures
-     */
+    /** handler for promise rejection failures */
     static onPromiseRejectionHandler(error) {
-        if (!error || !error.message || !error.stack) {
+        if (!error || !error.stack || ErrorMonitor.preventInfiniteLoopFlag) {
             return;
         }
-        const sanitizedStack = error.stack
-            .split('\n')
-            .filter(line => !line.match(STACK_TRACE_SANITIZE_REGEXP))
-            .join('\n');
+        ErrorMonitor.preventInfiniteLoopFlag = true;
         const payload = {
-            error: {
-                message: error.message,
-                stack: sanitizedStack,
-            },
+            error,
+            type: PageVisitErrorSource.UnhandledRejectionError,
         };
-        saveErrorToPagevisit(ERROR_EVENT_UNHANDLED_REJECTION_TYPE, payload);
+        saveErrorToPagevisit(payload);
+        ErrorMonitor.preventInfiniteLoopFlag = false;
     }
     /**
      * wraps and replaces the addEventListener property
@@ -101,13 +100,12 @@ class ErrorMonitor extends Singleton {
                 // the trace message will start with nbuWrapper which would allow us to
                 // detect that this is a wrapped function and not a NoibuJS error
                 return function nbuWrapper() {
-                    // ignoring this linting error since we don't want
-                    // potentially overide the actual functioning of console.error
+                    ClientConfig.getInstance().wrapInternal('ErrorMonitor.configureEventListeners', () => {
+                        // eslint-disable-next-line prefer-rest-params
+                        ErrorMonitor.processErrorLogArguments(Array.from(arguments));
+                    });
                     // eslint-disable-next-line prefer-rest-params
                     originalFunction.call(window.console, ...arguments);
-                    // converting the arguments to an array so that we do not nest argument objects
-                    // eslint-disable-next-line prefer-rest-params
-                    ErrorMonitor.processErrorLogArguments(Array.from(arguments));
                 };
             });
         });
@@ -144,7 +142,6 @@ class ErrorMonitor extends Singleton {
      * it maps the stack traces to objects with their respective first lines as messages.
      * Otherwise, if there is exactly one stack trace and one error message,
      * it constructs an array with a single object containing the first stack trace and the first error message.
-     * @param {Array<string>} args
      */
     static constructErrors(args) {
         if (args.length === 0) {
@@ -176,14 +173,6 @@ class ErrorMonitor extends Singleton {
         });
         return stacks.map((stack, i) => ({ stack, message: messages[i] }));
     }
-    /**
-     * returns boolean that indicates wether we should
-     * ignore the next error event caught by the error event
-     * listener.
-     */
-    static shouldIgnoreError() {
-        return ignoreError > 0;
-    }
     /**
      * transform a log into an error since React hides component errors
      * https://reactjs.org/docs/error-boundaries.html
@@ -198,9 +187,10 @@ class ErrorMonitor extends Singleton {
         if (!stack || !message) {
             return false;
         }
-        saveErrorToPagevisit(ERROR_LOG_EVENT_ERROR_TYPE, { message, stack });
+        saveErrorToPagevisit({ message, stack, type: PageVisitErrorSource.ErrorLogEvent });
         return true;
     }
 }
+ErrorMonitor.preventInfiniteLoopFlag = false;
 
 export { ErrorMonitor };

package/dist/monitors/KeyboardInputMonitor.js

@@ -1,8 +1,9 @@
-import { updatePayload } from '../pageVisit/userStep.js';
-import { SOURCE_ATT_NAME, TEXT_ATT_NAME, TAGNAME_ATT_NAME, TYPE_ATT_NAME, KEYBOARD_EVENT_TYPE } from '../constants.js';
 import { EventDebouncer } from '../pageVisit/EventDebouncer.js';
 import { TextInput } from 'react-native';
 import { Singleton } from './BaseMonitor.js';
+import '../node_modules/@noibu/metroplex-ts-bindings/dist/index.js';
+import { EventType } from '../node_modules/@noibu/metroplex-ts-bindings/dist/EventType.js';
+import { UserStepType } from '../node_modules/@noibu/metroplex-ts-bindings/dist/UserStepType.js';
 
 /** @module KeyboardInputMonitor */
 /**
@@ -37,9 +38,7 @@ class KeyboardInputMonitor extends Singleton {
             };
         }
     }
-    /**
-     * Validates an event
-     */
+    /** Validates an event */
     static handle(uiViewClassName, props) {
         if (!/(text|input)/i.test(uiViewClassName)) {
             return;
@@ -48,12 +47,15 @@ class KeyboardInputMonitor extends Singleton {
         if (!name) {
             return;
         }
-        EventDebouncer.getInstance().addEvent(updatePayload({
-            [SOURCE_ATT_NAME]: '',
-            [TEXT_ATT_NAME]: name,
-            [TAGNAME_ATT_NAME]: uiViewClassName.toLowerCase(),
-            [TYPE_ATT_NAME]: KEYBOARD_EVENT_TYPE,
-        }), KEYBOARD_EVENT_TYPE);
+        EventDebouncer.getInstance().debounce({
+            type: EventType.UserStep,
+            userstep: {
+                src: '',
+                txt: name,
+                tag: uiViewClassName.toLowerCase(),
+                type: UserStepType.Keyboard,
+            },
+        });
     }
 }
 

package/dist/monitors/PageMonitor.js

@@ -1,9 +1,29 @@
-import { PAGE_EVENTS_WINDOW, PAGE_EVENTS_DOCUMENT, PAGE_EVENT_TYPE } from '../constants.js';
 import { addSafeEventListener } from '../utils/eventlistener.js';
 import { EventDebouncer } from '../pageVisit/EventDebouncer.js';
 import { Singleton } from './BaseMonitor.js';
+import '../node_modules/@noibu/metroplex-ts-bindings/dist/index.js';
+import { EventType } from '../node_modules/@noibu/metroplex-ts-bindings/dist/EventType.js';
 
 /** @module PageMonitor */
+const PAGE_EVENTS_DOCUMENT = ['visibilitychange', 'resume', 'freeze', 'readystatechange', 'cut', 'copy', 'paste'];
+// page events we track in the session
+// don't include beforeunload, it will affect bfcache
+const PAGE_EVENTS_WINDOW = [
+    'pagehide',
+    'pageshow',
+    'focus',
+    'blur',
+    'popstate',
+    'online',
+    'offline',
+    'messageerror',
+    'languagechange',
+    'hashchange',
+    'beforeprint',
+    'afterprint',
+    'load',
+    'resize',
+];
 /** Monitors the page events which we capture and later process */
 class PageMonitor extends Singleton {
     /** Starts monitoring page events on the document */
@@ -65,7 +85,10 @@ class PageMonitor extends Singleton {
             // do nothing
         }
         // storing the page event in the page visit queue
-        EventDebouncer.getInstance().addEvent(payload, PAGE_EVENT_TYPE);
+        EventDebouncer.getInstance().debounce({
+            type: EventType.Page,
+            page: payload,
+        });
     }
     /** Returns document state */
     getDocumentState() {