noibu-react-native 0.0.1

package/dist/monitors/inputMonitor.js

@@ -0,0 +1,130 @@
+import { PageVisit } from '../pageVisit/pageVisit.js';
+import { LOCATION_EVENT_TYPE, PAGE_EVENT_TYPE, MAX_TIME_FOR_UNSENT_DATA_MILLIS, ERROR_EVENT_TYPE, HTTP_EVENT_TYPE, KEYBOARD_EVENT_TYPE, USERSTEP_EVENT_TYPE } from '../constants.js';
+import { timestampWrapper } from '../utils/date.js';
+import { addSafeEventListener } from '../utils/eventlistener.js';
+
+/** @module InputMonitor */
+
+/**
+ * Singleton class to manage the client configuration
+ * this class will be responsible for debouncing all events
+ * that are registered
+ */
+class InputMonitor {
+  /**
+   * Creates an instance of InputMonitor
+   */
+  constructor() {
+    // events are stored in queues that are debounced seperatly
+    // each object in this map is
+    // type: {
+    //   timeout: timeout,
+    //   events: [...],
+    //   debouncePeriod: period at which we debounce events,
+    //   eventName: name of the event, could be different than type
+    //      (clicks and keyboards are usersteps)
+    // }
+    this.eventsToDebounce = {};
+
+    // setting up debouncers for all events
+    // we send clicks directly to the socket so they aren't registered here
+    // we dont wait to send location changes, they happen at most once per second.
+    this.registerInputType(LOCATION_EVENT_TYPE, 0);
+    this.registerInputType(PAGE_EVENT_TYPE, MAX_TIME_FOR_UNSENT_DATA_MILLIS);
+    this.registerInputType(ERROR_EVENT_TYPE, MAX_TIME_FOR_UNSENT_DATA_MILLIS);
+    this.registerInputType(HTTP_EVENT_TYPE, MAX_TIME_FOR_UNSENT_DATA_MILLIS);
+    this.registerInputType(
+      KEYBOARD_EVENT_TYPE,
+      MAX_TIME_FOR_UNSENT_DATA_MILLIS,
+      USERSTEP_EVENT_TYPE,
+    );
+
+    this._setupUnloadHandler();
+  }
+
+  /** gets the instance of InputMonitor */
+  static getInstance() {
+    if (!this.instance) {
+      this.instance = new InputMonitor();
+    }
+
+    return this.instance;
+  }
+
+  /** will debounce all events that are of this type by the debounce period
+   * @param  {} type
+   * @param  {} debouncePeriod
+   * @param  {} eventName=type
+   */
+  registerInputType(type, debouncePeriod, eventName = type) {
+    if (type in this.eventsToDebounce) {
+      return;
+    }
+
+    // registering this event type as a debouncable
+    this.eventsToDebounce[type] = {
+      timeout: null,
+      events: [],
+      debouncePeriod,
+      eventName,
+    };
+  }
+
+  /**
+   * Creates an event object with the event and the time it was added then pushes
+   * that event object to the queue of events waiting to be debounced.
+   * @param  {} event
+   * @param  {} type
+   */
+  addEvent(event, type) {
+    if (!(type in this.eventsToDebounce)) {
+      throw new Error(`Type: ${type} is not in eventsToDebounce`);
+    }
+
+    this.eventsToDebounce[type].events.push({
+      event,
+      occurredAt: new Date(timestampWrapper(Date.now())).toISOString(),
+    });
+
+    this._debouncePvEvents(type);
+  }
+
+  /**
+   * Adds the events from the object to the page visit and sets up a timer
+   * to send the events if no more are received without the timeout
+   * @param  {} type
+   */
+  _debouncePvEvents(type) {
+    /**
+     * Debounce function to be executed once the debounce period is completed
+     */
+    const later = () => {
+      this.eventsToDebounce[type].timeout = null;
+      PageVisit.getInstance().addPageVisitEvents(
+        this.eventsToDebounce[type].events,
+        this.eventsToDebounce[type].eventName,
+      );
+      this.eventsToDebounce[type].events = [];
+    };
+
+    clearTimeout(this.eventsToDebounce[type].timeout);
+    this.eventsToDebounce[type].timeout = setTimeout(
+      later,
+      this.eventsToDebounce[type].debouncePeriod,
+    );
+  }
+
+  /** Sets up the page hide handler to try to push remaining events in the queues */
+  _setupUnloadHandler() {
+    addSafeEventListener(window, 'pagehide', () => {
+      Object.values(this.eventsToDebounce).forEach(eventObject => {
+        PageVisit.getInstance().addPageVisitEvents(
+          eventObject.events,
+          eventObject.eventName,
+        );
+      });
+    });
+  }
+}
+
+export { InputMonitor };

package/dist/monitors/keyboardInputMonitor.js

@@ -0,0 +1,67 @@
+import { TextInput } from 'react-native';
+import { updatePayload } from '../pageVisit/userStep/userStep.js';
+import { InputMonitor } from './inputMonitor.js';
+import { SOURCE_ATT_NAME, TEXT_ATT_NAME, TAGNAME_ATT_NAME, TYPE_ATT_NAME, KEYBOARD_EVENT_TYPE } from '../constants.js';
+
+/** @module KeyboardInputMonitor */
+
+/**
+ * KeyboardInputMonitor is a listener class that attaches a
+ * keyboard input listener of the document object.
+ */
+class KeyboardInputMonitor {
+  /**
+   * Begins the monitoring process
+   * we currently only monitor two input locations: textarea and input
+   */
+  monitor() {
+    const handler = this._handle.bind(this);
+    // addSafeEventListener(window, 'input', handler);
+
+    if (!TextInput.originalRender) {
+      TextInput.originalRender = TextInput.render;
+      TextInput.render = function (props, ...args) {
+        const onChange = event => {
+          const currentText = event.nativeEvent.text;
+          handler(event.target.viewConfig.uiViewClassName, props);
+          if (props.onChange) props.onChange(event);
+          if (props.onChangeText) props.onChangeText(currentText);
+        };
+        const newProps = {
+          ...props,
+          onChange,
+        };
+        return TextInput.originalRender(newProps, ...args);
+      };
+    }
+  }
+
+  /**
+   * Validates an event
+   * @param uiViewClassName
+   * @param props
+   */
+  _handle(uiViewClassName, props) {
+    if (!/(text|input)/i.test(uiViewClassName)) {
+      return;
+    }
+
+    const name = props.placeholder || props.testID;
+
+    if (!name) {
+      return;
+    }
+
+    InputMonitor.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/locationChangeMonitor.js

@@ -0,0 +1,30 @@
+import { getProperGlobalUrl } from '../utils/function.js';
+import { InputMonitor } from './inputMonitor.js';
+import { URL_ATT_NAME, LOCATION_EVENT_TYPE } from '../constants.js';
+
+/** @module LocationMonitor */
+
+let currentLocation = (window.location && window.location.href) || '';
+
+/**
+ * will poll the url on a 1 second basis to see if it has changed
+ * there is currently no alternative to getting an accurate url
+ * change listener
+ */
+function monitorLocation() {
+  setInterval(() => {
+    if (currentLocation !== ((window.location && window.location.href) || '')) {
+      // updating the current url to be the new one
+      currentLocation = (window.location && window.location.href) || '';
+
+      const payload = {
+        [URL_ATT_NAME]: getProperGlobalUrl(),
+      };
+
+      // storing the location change in the page visit queue
+      InputMonitor.getInstance().addEvent(payload, LOCATION_EVENT_TYPE);
+    }
+  }, 1000);
+}
+
+export { monitorLocation };

package/dist/monitors/pageMonitor.js

@@ -0,0 +1,119 @@
+import { PAGE_EVENTS_WINDOW, PAGE_EVENTS_DOCUMENT, PAGE_EVENT_TYPE } from '../constants.js';
+import { InputMonitor } from './inputMonitor.js';
+import { addSafeEventListener } from '../utils/eventlistener.js';
+
+/** @module PageMonitor */
+
+/** Monitors the page events which we capture and later process */
+class PageMonitor {
+  /** gets the singleton instance */
+  static getInstance() {
+    if (!this.instance) {
+      this.instance = new PageMonitor();
+    }
+
+    return this.instance;
+  }
+
+  /** 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(
+          document,
+          pageEvent,
+          this._onPageEventHandle.bind(this),
+          true,
+        );
+      });
+    }
+  }
+
+  /**
+   * Handles a single page event
+   * @param  {} event
+   */
+  _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':
+        payload.data = `state: ${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':
+        if (event.data && event.origin) {
+          payload.data = `origin: ${event.origin} size: ${this.getSizeInBytes(
+            event.data,
+          )}`;
+        }
+        break;
+      case 'hashchange':
+        if (event.newURL) {
+          payload.data = `newURL: ${event.newURL}`;
+        }
+        break;
+      // do nothing
+    }
+
+    // storing the page event in the page visit queue
+    InputMonitor.getInstance().addEvent(payload, PAGE_EVENT_TYPE);
+  }
+
+  /** Returns document state */
+  getDocumentState() {
+    if (document.visibilityState === 'hidden') {
+      return 'hidden';
+    }
+    if (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 };