noibu-react-native 0.2.3 → 0.2.5

package/dist/monitors/ClickMonitor.js

@@ -0,0 +1,198 @@
+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 { 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 { Singleton } from './BaseMonitor.js';
+
+/** @module ClickMonitor */
+/** 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);
+                    },
+                ]));
+            };
+        }
+    }
+    /**
+     * 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 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')) ;
+                    else {
+                        textFromElement = '*';
+                    }
+                }
+                else if (tagName === '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]: '',
+            };
+            StoredMetrics.getInstance().addPvClick();
+            PageVisit.getInstance().addPageVisitEvents([
+                {
+                    event: updatePayload(tPayload),
+                    occurredAt: new Date(timestampWrapper(Date.now())).toISOString(),
+                },
+            ], USERSTEP_EVENT_TYPE);
+        }
+    }
+    /** Gets the textual content from an element, if any
+     */
+    static getTextualContentFromEl(element) {
+        return ClickMonitor.parseInnerContent(element, '', 100, {
+            value: 0,
+            limit: 100,
+        });
+    }
+    /** Parse and trim text */
+    static trimText(text) {
+        // regex to replace all whitespace with a single space and trim text
+        let parsedText = text.trim().replace(/\s+/g, ' ');
+        // if there is text that is longer than average sentence length,
+        // chances are that it is not a valid text so we need to further process it
+        if (parsedText.length > 100) {
+            const index = parsedText.lastIndexOf(' ', 97);
+            // We can not chop the text at exactly 97 characters since chopping in the
+            // middle of an encoded value may cause deserialization issues. Chop at the
+            // last ' ' character before the 97th character.
+            if (index > 0) {
+                parsedText = `${parsedText.substring(0, index)}...`;
+            }
+            else {
+                // If there are no ' ' characters then the text is likely not valid so just
+                // return '...'.
+                parsedText = '...';
+            }
+        }
+        return parsedText;
+    }
+    /**
+     * 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;
+        }
+        if (counter.value >= counter.limit) {
+            return text;
+        }
+        counter.value += 1;
+        if (ClickMonitor.getBlockedElements().includes(element.memoizedProps.testID)) {
+            return `${text}${text ? ' ' : ''}*`;
+        }
+        // eslint-disable-next-line require-jsdoc
+        const walk = (node) => {
+            var _a;
+            // Check if the node is a Text element
+            if (typeof node.elementType === 'object' &&
+                ((_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,
+                ]);
+                if (text.length >= textLimit)
+                    return;
+            }
+            // If the node has children, traverse them
+            if (node.child)
+                walk(node.child);
+            // After traversing children, traverse siblings
+            if (node.sibling)
+                walk(node.sibling);
+        };
+        walk(element);
+        return text;
+    }
+    /**
+     * Gets selectors to prevent those elements from being recorded
+     */
+    static getBlockedElements() {
+        const selectors = ClientConfig.getInstance().blockedElements;
+        const blockedElements = ['noibu-blocked'];
+        if (selectors && Array.isArray(selectors)) {
+            blockedElements.push(...selectors);
+        }
+        return blockedElements;
+    }
+    /**
+     * normalize value and append to the resulting text if not empty
+     */
+    static parseAndAppendText(text, values) {
+        const goodValues = [];
+        for (const v of values) {
+            if (Number.isFinite(v) || typeof v === 'string') {
+                goodValues.push(v);
+            }
+        }
+        for (let value of goodValues) {
+            value = `${value}`.trim().replace(/\s+/g, ' ');
+            if (value.length > 0) {
+                return text + (text ? ' ' : '') + value;
+            }
+        }
+        return text;
+    }
+}
+ClickMonitor.textCapturedWhiteListRegex = new RegExp(WHITELIST_TEXT_REGEX_STRING(), 'i');
+ClickMonitor.htmlIDAllowListRegex = new RegExp(WHITELIST_HTML_ID_TEXT_REGEX, 'i');
+
+export { ClickMonitor };

package/dist/monitors/ErrorMonitor.js

@@ -0,0 +1,206 @@
+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';
+
+/* eslint-disable @typescript-eslint/ban-types,prefer-arrow-callback */
+/** @module ErrorMonitor */
+let ignoreError = 0;
+/**
+ * Monitors the errors happening on the window
+ */
+class ErrorMonitor extends Singleton {
+    /** base method */
+    monitor() {
+        ErrorMonitor.configureEventListeners();
+        ErrorMonitor.configureHermesHooks();
+        ErrorMonitor.configureErrorUtilsHandler();
+    }
+    /** proxy error utils */
+    static configureErrorUtilsHandler() {
+        if (typeof ErrorUtils === 'undefined') {
+            return;
+        }
+        const existingHandler = ErrorUtils.getGlobalHandler();
+        ErrorUtils.setGlobalHandler((error, ...rest) => {
+            ErrorMonitor.onErrorHandler(error);
+            if (typeof existingHandler === 'function') {
+                return existingHandler(error, ...rest);
+            }
+        });
+    }
+    /**
+     * Handles a single error event
+     */
+    static onErrorHandler(error) {
+        if (!error || ErrorMonitor.shouldIgnoreError()) {
+            return;
+        }
+        saveErrorToPagevisit(ERROR_EVENT_ERROR_TYPE, {
+            error,
+        });
+    }
+    /** proxy hermes engine */
+    static configureHermesHooks() {
+        var _a;
+        if (typeof HermesInternal !== 'undefined' && HermesInternal !== null) {
+            (_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)));
+                }
+                return originalFunction === null || originalFunction === void 0 ? void 0 : originalFunction(promise, error);
+            });
+        }
+    }
+    /**
+     * handler for promise rejection failures
+     */
+    static onPromiseRejectionHandler(error) {
+        if (!error || !error.message || !error.stack) {
+            return;
+        }
+        const sanitizedStack = error.stack
+            .split('\n')
+            .filter(line => !line.match(STACK_TRACE_SANITIZE_REGEXP))
+            .join('\n');
+        const payload = {
+            error: {
+                message: error.message,
+                stack: sanitizedStack,
+            },
+        };
+        saveErrorToPagevisit(ERROR_EVENT_UNHANDLED_REJECTION_TYPE, payload);
+    }
+    /**
+     * wraps and replaces the addEventListener property
+     * of event targets to try and catch errors
+     * eventTargetString: event target name
+     */
+    static configureEventListeners() {
+        // we wrap all logging to catch any potential errors passed in logs
+        CONSOLE_FUNCTION_OVERRIDES.forEach(consoleFunction => {
+            if (!window.console || !window.console[consoleFunction]) {
+                return;
+            }
+            replace(window.console, consoleFunction, function (originalFunction) {
+                // We set nbuWrapper to the handler function so if this returns an error
+                // 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
+                    // 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));
+                };
+            });
+        });
+    }
+    /** iterates arguments to try to extract errors from them
+     */
+    static processErrorLogArguments(argsFromErrorLog) {
+        // tracks if arguments were processed at least once successfully, and if not, tries to reconstruct an Error
+        const collectedArgs = [];
+        // we may receive multiple arguments
+        argsFromErrorLog.forEach(arg => {
+            // ensure arg exists before attempting processing
+            if (!arg) {
+                return;
+            }
+            // if we pass an array of elements in the console, we want to go through that
+            // away and make sure we are extracting the error object. We don't do nested arrays.
+            if (Array.isArray(arg)) {
+                collectedArgs.push(...arg);
+                return;
+            }
+            collectedArgs.push(arg);
+        });
+        const maybeErrors = collectedArgs.filter(arg => !ErrorMonitor.processErrorLog(arg));
+        // if previous process calls return nothing,
+        // try to reconstruct error from the args
+        ErrorMonitor.constructErrors(maybeErrors).forEach(ErrorMonitor.processErrorLog);
+    }
+    /**
+     * Constructs error objects based on console args.
+     * Relies on isStackTrace() to determine if arg is a stack trace, otherwise the arg must be a message.
+     *
+     * If there are multiple stack traces or the number of error messages is not equal to one,
+     * 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) {
+            return [];
+        }
+        if (args.length === 2) {
+            if (isStackTrace(args[0])) {
+                return [{ stack: args[0], message: args[1] }];
+            }
+            if (isStackTrace(args[1])) {
+                return [{ stack: args[1], message: args[0] }];
+            }
+            return [];
+        }
+        const stacks = [];
+        const messages = [];
+        args.forEach(sm => {
+            if (isStackTrace()) {
+                stacks.push(sm);
+                const lines = sm.split('\n');
+                if (isStackTrace(lines[0])) {
+                    messages.push('_');
+                }
+                else {
+                    // we can use 1st line of stack trace as a message
+                    messages.push(lines[0]);
+                }
+            }
+        });
+        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
+     */
+    static processErrorLog(errorLog) {
+        // handle empty arguments
+        if (!errorLog || typeof errorLog !== 'object') {
+            return false;
+        }
+        const { message, stack } = errorLog;
+        // for now, we only process error logs if they are a way to describe an error
+        if (!stack || !message) {
+            return false;
+        }
+        saveErrorToPagevisit(ERROR_LOG_EVENT_ERROR_TYPE, { message, stack });
+        return true;
+    }
+}
+
+export { ErrorMonitor };

package/dist/monitors/KeyboardInputMonitor.js

@@ -0,0 +1,60 @@
+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';
+
+/** @module KeyboardInputMonitor */
+/**
+ * KeyboardInputMonitor is a listener class that attaches a
+ * keyboard input listener of the document object.
+ */
+class KeyboardInputMonitor extends Singleton {
+    /**
+     * Begins the monitoring process
+     * we currently only monitor two input locations: textarea and input
+     */
+    monitor() {
+        if (!KeyboardInputMonitor.originalRender) {
+            KeyboardInputMonitor.originalRender = TextInput.render;
+            TextInput.render = function (props, ...args) {
+                /***/
+                const onChange = (event) => {
+                    const currentText = event.nativeEvent.text;
+                    if (event.target &&
+                        typeof event.target !== 'number' &&
+                        'viewConfig' in event.target &&
+                        event.target.viewConfig) {
+                        KeyboardInputMonitor.handle(event.target.viewConfig.uiViewClassName, props);
+                    }
+                    if (props.onChange)
+                        props.onChange(event);
+                    if (props.onChangeText)
+                        props.onChangeText(currentText);
+                };
+                const newProps = Object.assign(Object.assign({}, props), { onChange });
+                return KeyboardInputMonitor.originalRender.call(this, newProps, ...args);
+            };
+        }
+    }
+    /**
+     * Validates an event
+     */
+    static handle(uiViewClassName, props) {
+        if (!/(text|input)/i.test(uiViewClassName)) {
+            return;
+        }
+        const name = props.placeholder || props.testID;
+        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);
+    }
+}
+
+export { KeyboardInputMonitor };

package/dist/monitors/PageMonitor.js

@@ -0,0 +1,98 @@
+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';
+
+/** @module PageMonitor */
+/** Monitors the page events which we capture and later process */
+class PageMonitor extends Singleton {
+    /** Starts monitoring page events on the document */
+    monitor() {
+        PAGE_EVENTS_WINDOW.forEach(pageEvent => {
+            addSafeEventListener(window, pageEvent, this._onPageEventHandle.bind(this), true);
+        });
+        if (global.document) {
+            PAGE_EVENTS_DOCUMENT.forEach(pageEvent => {
+                addSafeEventListener(global.document, pageEvent, this._onPageEventHandle.bind(this), true);
+            });
+        }
+    }
+    /**
+     * Handles a single page event
+     * todo: don't think these events exist in RN world
+     */
+    _onPageEventHandle(event) {
+        if (!event || !event.type) {
+            return;
+        }
+        const payload = {
+            type: event.type,
+        };
+        // Add data if applicable for the event type
+        switch (event.type) {
+            case 'visibilitychange':
+                payload.data = `state: ${this.getDocumentState()}`;
+                break;
+            case 'readystatechange':
+                if (typeof global.document !== 'undefined') {
+                    payload.data = `state: ${global.document.readyState}`;
+                }
+                break;
+            case 'pagehide':
+            case 'pageshow':
+            case 'load':
+                if (event.persisted) {
+                    payload.data = `persisted: ${event.persisted}`;
+                }
+                break;
+            case 'storage':
+                if (event.key) {
+                    payload.data = `key: ${event.key}`;
+                }
+                break;
+            case 'message':
+            case 'messageerror':
+                const msgEvent = event;
+                if (msgEvent.data && msgEvent.origin) {
+                    payload.data = `origin: ${msgEvent.origin} size: ${this.getSizeInBytes(msgEvent.data)}`;
+                }
+                break;
+            case 'hashchange':
+                if (event.newURL) {
+                    payload.data = `newURL: ${event.newURL}`;
+                }
+                break;
+            // do nothing
+        }
+        // storing the page event in the page visit queue
+        EventDebouncer.getInstance().addEvent(payload, PAGE_EVENT_TYPE);
+    }
+    /** Returns document state */
+    getDocumentState() {
+        if (typeof global.document === 'undefined') {
+            return 'passive';
+        }
+        if (global.document.visibilityState === 'hidden') {
+            return 'hidden';
+        }
+        if (global.document.hasFocus()) {
+            return 'active';
+        }
+        return 'passive';
+    }
+    /**
+     * Returns object size in bytes
+     * @param  {} obj
+     */
+    getSizeInBytes(obj) {
+        let str = obj;
+        if (typeof obj !== 'string') {
+            // Else, make obj into a string
+            str = JSON.stringify(obj);
+        }
+        // 2B per character in the string
+        return str.length * 2;
+    }
+}
+
+export { PageMonitor };