noibu-react-native 0.0.1

package/dist/monitors/clickMonitor.js

@@ -0,0 +1,284 @@
+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/userStep.js';
+import StoredMetrics from '../api/storedMetrics.js';
+import { WHITELIST_TEXT_REGEX_STRING } from '../const_matchers.js';
+import { getBlockedCSSForCurrentDomain, maskTextInput } from '../utils/function.js';
+import { timestampWrapper } from '../utils/date.js';
+
+/** @module ClickMonitor */
+
+
+const maxParentIteration = 5;
+
+/** 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 the document */
+  monitorClicks() {
+    const onClickHandler = this._onClickHandle.bind(this);
+    // addSafeEventListener(window, 'click', onClickHandler, true);
+
+    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  {} event
+   */
+  _onClickHandle(event) {
+    const blockedCSS = getBlockedCSSForCurrentDomain();
+    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, false, blockedCSS);
+
+      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,
+      );
+    }
+  }
+
+  /**
+   * parseTextFromParentElement will parse the parents of an element to try
+   * and find textual content if no text can be extracted from the clicked element
+   * @param  {} element
+   * @param {Array.<String>} blockedCSS
+   */
+  _parseTextFromParentElement(element, blockedCSS) {
+    let iteratableElement = element;
+    const parentElements = [];
+    let parentIterations = 0;
+    while (iteratableElement) {
+      if (
+        parentIterations >= maxParentIteration ||
+        !iteratableElement.parentNode
+      ) {
+        break;
+      }
+      iteratableElement = iteratableElement.parentNode;
+      parentElements.push(iteratableElement);
+      parentIterations += 1;
+    }
+
+    for (let i = 0; i < parentElements.length; i += 1) {
+      const el = parentElements[i];
+      // we only get the text content if the clicked element has a button parent
+      if (el && el.tagName === 'BUTTON') {
+        // we disable the linter because we use 1 level recursion.
+        // eslint-disable-next-line no-use-before-define
+        return this._getTextualContentFromEl(el, false, blockedCSS);
+      }
+    }
+
+    return '';
+  }
+
+  /** Gets the textual content from an element, if any
+   * @param  {} element
+   * @param  {} parseParent
+   * @param {Array.<String>} blockedCSS
+   */
+  _getTextualContentFromEl(element, parseParent, blockedCSS) {
+    return this._parseInnerContent(
+      element,
+      '',
+      100,
+      { value: 0, limit: 100 },
+      blockedCSS,
+    );
+  }
+
+  /** 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 the 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 {HTMLElement} element
+   * @param {String} text
+   * @param {Number} textLimit
+   * @param {Object} counter
+   * @param {Array.<String>} blockedCSS
+   */
+  _parseInnerContent(element, text, textLimit, counter, blockedCSS) {
+    /* 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 (blockedCSS.includes(element.memoizedProps.testID)) {
+      return `${text}${text ? ' ' : ''}*`;
+    }
+
+    const walk = node => {
+      if (typeof node.memoizedProps === 'string') {
+        text = this._parseAndAppendText(text, [node.memoizedProps]);
+        if (text.length >= textLimit) {
+          return;
+        }
+      }
+      if (node.child) {
+        walk(node.child);
+      }
+    };
+    walk(element);
+
+    return text;
+  }
+
+  /**
+   * normalize value and append to the resulting text if not empty
+   * @param {String} text
+   * @param {Array.<String>} 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/elementMonitor.js

@@ -0,0 +1,174 @@
+import { GET_ATTRIBUTE_SELECTORS } from '../constants.js';
+import InputManager from '../api/inputManager.js';
+
+/** @module ElementMonitor */
+
+/** Monitors the elements matching query selectors and passes them to the InputManager */
+class ElementMonitor {
+  /** gets the singleton instance */
+  static getInstance() {
+    if (!this.instance) {
+      this.instance = new ElementMonitor();
+    }
+
+    return this.instance;
+  }
+
+  /**
+   * Safely calls `querySelectorAll` on the given node and returns an array of
+   * matching child elements. If `querySelectorAll` returns a falsy value,
+   * an empty array is returned.
+   *
+   * @private
+   * @param {Node} node - The node on which to call `querySelectorAll`.
+   * @param {string} selector - The CSS selector used to match child elements.
+   * @returns {Array<Element>} An array of matching child elements.
+   */
+  _safeQueryAll(node, selector) {
+    const matchingChildElements = node.querySelectorAll(selector);
+    if (!matchingChildElements) {
+      return [];
+    }
+
+    return Array.from(matchingChildElements);
+  }
+
+  /**
+   * Processes the given elements by adding their custom attributes to the InputManager.
+   *
+   * @private
+   * @param {NodeList|Array} elements - The list of elements to be processed.
+   * @param {string} selector - The selector corresponding to the elements being processed.
+   */
+  _processMatchingElements(elements, selector) {
+    elements.forEach(element => {
+      if (!element) {
+        return;
+      }
+
+      const selectorText = element.textContent;
+
+      if (!selectorText) {
+        return;
+      }
+
+      InputManager.getInstance()._addCustomAttribute(selector, selectorText);
+    });
+  }
+
+  /**
+   * Finds and processes matching elements within the added nodes by checking if
+   * they match any of the attribute selectors from GET_ATTRIBUTE_SELECTORS().
+   * If a node or any of its descendants match, their custom attributes are added
+   * to the InputManager.
+   *
+   * @private
+   * @param {NodeList|Array} addedNodes - The list of nodes that were added or
+   *   modified in the DOM. Each node in the list will be checked against the
+   *   attribute selectors, and their matching descendants will also be processed.
+   */
+  _findAndAddMatchingElementsInNodes(addedNodes) {
+    const attributeSelectorNames = Object.keys(GET_ATTRIBUTE_SELECTORS());
+    attributeSelectorNames.forEach(name => {
+      const selector = GET_ATTRIBUTE_SELECTORS()[name];
+      if (!selector) {
+        return;
+      }
+
+      addedNodes.forEach(node => {
+        // move to the next node its not an element node
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+          return;
+        }
+
+        let matchingElements = [];
+
+        if (node.matches(selector)) {
+          matchingElements.push(node);
+        }
+
+        const matchingChildElements = this._safeQueryAll(node, selector);
+        matchingElements = matchingElements.concat(matchingChildElements);
+
+        this._processMatchingElements(matchingElements, name);
+      });
+    });
+  }
+
+  /** Sets up a MutationObserver to monitor added elements and attribute changes */
+  _setupMutationObserver() {
+    const observer = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        // Handle childList mutations
+        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+          this._findAndAddMatchingElementsInNodes(mutation.addedNodes);
+        }
+
+        // Handle attribute mutations
+        if (mutation.type === 'attributes') {
+          const targetNode = mutation.target;
+          if (targetNode.nodeType === Node.ELEMENT_NODE) {
+            this._findAndAddMatchingElementsInNodes([targetNode]);
+          }
+        }
+      });
+    });
+
+    // the observer will get called when children are added and changed
+    const observerConfig = { childList: true, subtree: true, attributes: true };
+    observer.observe(document.documentElement, observerConfig);
+    this.observer = observer;
+  }
+
+  /** Finds and adds matching elements to the InputManager */
+  _findAndAddMatchingElements() {
+    const attributeSelectorNames = Object.keys(GET_ATTRIBUTE_SELECTORS());
+    attributeSelectorNames.forEach(name => {
+      const selector = GET_ATTRIBUTE_SELECTORS()[name];
+      if (!selector) {
+        return;
+      }
+      const elements = this._safeQueryAll(document, selector);
+      this._processMatchingElements(elements, name);
+    });
+  }
+
+  /** Starts monitoring elements matching query selectors */
+  monitor() {
+    const attributeNames = Object.keys(GET_ATTRIBUTE_SELECTORS());
+    // if we have no attributes to look for, do not setup the listeners
+    if (attributeNames.length === 0) {
+      return;
+    }
+    this._findAndAddMatchingElements();
+    if (typeof MutationObserver !== 'undefined') {
+      this._setupMutationObserver();
+    } else {
+      // Fallback using setInterval if MutationObserver is not supported
+      this.interval = setInterval(() => {
+        this._findAndAddMatchingElements();
+      }, 5000); // Check for changes every N seconds
+    }
+  }
+
+  /**
+   * Disconnects the MutationObserver instance, if it exists and has a valid disconnect method.
+   * This is needed for testing since we want to properly tear down mutation listeners
+   * @private
+   */
+  _disconnectObserver() {
+    if (
+      this.observer &&
+      this.observer.disconnect &&
+      typeof this.observer.disconnect === 'function'
+    ) {
+      this.observer.disconnect();
+    }
+
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+  }
+}
+
+export { ElementMonitor };