noibu-react-native 0.2.3 → 0.2.4

package/dist/monitors/clickMonitor.js

@@ -1,258 +0,0 @@
-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';
-
-/** @module ClickMonitor */
-
-
-/** Monitors the clicks which we capture and later process */
-class ClickMonitor {
-  /**
-   * Creates an instance of the ClickMonitor instance
-   */
-  constructor() {
-    // compile white list regex only once
-    this.textCapturedWhiteListRegex = new RegExp(
-      WHITELIST_TEXT_REGEX_STRING(),
-      'i',
-    );
-
-    this.htmlIDAllowListRegex = new RegExp(WHITELIST_HTML_ID_TEXT_REGEX, 'i');
-  }
-
-  /** gets the singleton instance
-   * @returns {ClickMonitor}
-   */
-  static getInstance() {
-    if (!this.instance) {
-      this.instance = new ClickMonitor();
-    }
-
-    return this.instance;
-  }
-
-  /** Starts monitoring clicks on every Press-able component */
-  monitorClicks() {
-    const onClickHandler = this._onClickHandle.bind(this);
-
-    if (!Pressability.prototype.originalCreateEventHandlers) {
-      Pressability.prototype.originalCreateEventHandlers =
-        Pressability.prototype.getEventHandlers;
-
-      Pressability.prototype.getEventHandlers = function () {
-        const ehs =
-          Pressability.prototype.originalCreateEventHandlers.call(this);
-
-        return Object.fromEntries(
-          Object.entries(ehs).map(([key, handler]) => [
-            key,
-            (event, ...args) => {
-              if (key === 'onResponderRelease') {
-                onClickHandler(event);
-              }
-              return handler(event, ...args);
-            },
-          ]),
-        );
-      };
-    }
-  }
-
-  /**
-   * Handles a single click event
-   * @param  {{ _targetInst: RNNode }} event
-   */
-  _onClickHandle(event) {
-    if (event) {
-      const { _targetInst: target } = event;
-      const targetClassName = target.elementType;
-
-      let text = '';
-      // 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
-      text = this._getTextualContentFromEl(target);
-
-      let textFromElement = this._trimText(text);
-
-      let tagName = '';
-      if (targetClassName) {
-        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 (
-        !this.textCapturedWhiteListRegex.test(textFromElement) &&
-        !this.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
-   * @param  {} element
-   */
-  _getTextualContentFromEl(element) {
-    return this._parseInnerContent(element, '', 100, { value: 0, limit: 100 });
-  }
-
-  /** Parse and trim text
-   * @param  {} text
-   */
-  _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
-   * @param {NReactNative.Node} element
-   * @param {String} text
-   * @param {Number} textLimit
-   * @param {Object} counter
-   */
-  _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 => {
-      // Check if the node is a Text element
-      if (
-        node.elementType &&
-        node.elementType.displayName === 'Text' &&
-        node.memoizedProps &&
-        typeof node.memoizedProps.children === 'string'
-      ) {
-        text = this._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
-   * @param {String} text
-   * @param {Array.<any>} values
-   */
-  _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;
-  }
-}
-
-export { ClickMonitor };

package/dist/monitors/errorMonitor.js

@@ -1,202 +0,0 @@
-import { asString, isStackTrace } from '../utils/function.js';
-import { CONSOLE_FUNCTION_OVERRIDES, ERROR_EVENT_ERROR_TYPE, STACK_TRACE_SANITIZE_REGEXP, ERROR_EVENT_UNHANDLED_REJECTION_TYPE, ERROR_LOG_EVENT_ERROR_TYPE } from '../constants.js';
-import { saveErrorToPagevisit } from '../pageVisit/pageVisitEventError.js';
-import { replace } from '../utils/object.js';
-
-/* eslint-disable @typescript-eslint/ban-types,prefer-arrow-callback */
-/** @module ErrorMonitor */
-let ignoreError = 0;
-/**
- * returns boolean that indicates wether we should
- * ignore the next error event caught by the error event
- * listener.
- */
-function shouldIgnoreError() {
-    return ignoreError > 0;
-}
-/**
- * transform a log into an error since React hides component errors
- * tps://reactjs.org/docs/error-boundaries.html
- * @param  {Error|any} errorLog
- * @returns {boolean} true on success
- */
-function processErrorLog(errorLog) {
-    // handle empty arguments
-    if (!errorLog) {
-        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;
-}
-/**
- * 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
- */
-function 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] }));
-}
-/** iterates arguments to try to extract errors from them
- * @param  {Array<string | Error>} argsFromErrorLog
- */
-function 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 argsToBeReconstructedIntoErrors = collectedArgs.filter(arg => !processErrorLog(arg));
-    // if previous process calls return nothing,
-    // try to reconstruct error from the args
-    constructErrors(argsToBeReconstructedIntoErrors).forEach(processErrorLog);
-}
-/**
- * wraps and replaces the addEventListener property
- * of event targets to try and catch errors
- * eventTargetString: event target name
- */
-function 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
-                processErrorLogArguments(Array.from(arguments));
-            };
-        });
-    });
-}
-/**
- * handler for promise rejection failures
- * @param error
- */
-function 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);
-}
-function 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) {
-                onPromiseRejectionHandler(error);
-            }
-            else {
-                onPromiseRejectionHandler(new Error(asString(error)));
-            }
-            return originalFunction === null || originalFunction === void 0 ? void 0 : originalFunction(promise, error);
-        });
-    }
-}
-/**
- * Handles a single error event
- */
-function onErrorHandler(error) {
-    if (!error || shouldIgnoreError()) {
-        return;
-    }
-    saveErrorToPagevisit(ERROR_EVENT_ERROR_TYPE, {
-        error,
-    });
-}
-function configureErrorUtilsHandler() {
-    if (typeof ErrorUtils === 'undefined') {
-        return;
-    }
-    const existingHandler = ErrorUtils.getGlobalHandler() || (() => { });
-    ErrorUtils.setGlobalHandler((error, ...rest) => {
-        onErrorHandler(error);
-        return existingHandler(error, ...rest);
-    });
-}
-/**
- * Monitors the errors happening on the window
- */
-function monitorErrors() {
-    configureEventListeners();
-    configureHermesHooks();
-    configureErrorUtilsHandler();
-}
-
-export { monitorErrors, onPromiseRejectionHandler, processErrorLogArguments };