noibu-react-native 0.2.5 → 0.2.7

package/dist/sessionRecorder/{sessionRecorder.js → SessionRecorder.js}

@@ -1,52 +1,49 @@
 import { __awaiter } from 'tslib';
 import { strToU8, zlibSync, strFromU8 } from 'fflate';
 import { LogLevel, initialize, subscribeToNativeEvent } from './nativeSessionRecorderSubscription.js';
-import StoredMetrics from '../api/storedMetrics.js';
-import ClientConfig from '../api/clientConfig.js';
+import StoredMetrics from '../api/StoredMetrics.js';
+import ClientConfig from '../api/ClientConfig.js';
 import { stringifyJSON } from '../utils/function.js';
-import { MAX_TIME_FOR_RECORDER_USER_EVENTS, SEVERITY, MAX_RECORDER_EVENT_BUFFER, MAX_TIME_FOR_UNSENT_DATA_MILLIS, VIDEO_FRAG_ATT_NAME, PV_SEQ_ATT_NAME, LENGTH_ATT_NAME, CSS_URLS_ATT_NAME, VIDEO_METROPLEX_TYPE, PAGE_VISIT_VID_FRAG_ATT_NAME, POST_METRICS_EVENT_NAME } from '../constants.js';
-import MetroplexSocket from '../api/metroplexSocket.js';
+import { SEVERITY, MAX_TIME_FOR_UNSENT_DATA_MILLIS } from '../constants.js';
+import MetroplexSocket from '../api/MetroplexSocket.js';
 import { addSafeEventListener } from '../utils/eventlistener.js';
 import { noibuLog } from '../utils/log.js';
 import { Platform } from 'react-native';
+import { Singleton } from '../monitors/BaseMonitor.js';
+import '../node_modules/@noibu/metroplex-ts-bindings/dist/index.js';
+import { WebsocketMessageType } from '../node_modules/@noibu/metroplex-ts-bindings/dist/WebsocketMessageType.js';
 
+// custom event name for posting metrics
+const POST_METRICS_EVENT_NAME = 'noibuPostMetrics';
+// the max amount of time to wait for user events until freezing rrweb mutation events
+const MAX_TIME_FOR_RECORDER_USER_EVENTS = 2000;
+// Maximum number of events in the RRWEB session recorder buffer
+// before sending to Metroplex
+const MAX_RECORDER_EVENT_BUFFER = 10;
 /** Singleton class to record user sessions */
-class SessionRecorder {
-    /**
-     * Creates an instance of the session recorder
-     */
+class SessionRecorder extends Singleton {
+    /** Setups the SessionRecorder instance for usage */
     constructor() {
-        this.freezingEvents = false;
+        super();
         this.eventBuffer = [];
         this.vfCounter = 0;
         this.didSetupRecorder = false;
-        this.recordStopper = null;
-        this.firstRecordedTimestamp = null;
-        this.lastRecordedTimestamp = null;
         this.isVideoLengthNegativeInvalid = false;
         this.lastFragPostTimestamp = Date.now();
         this.pauseTimeout = null;
+        this.lastRecordedTimestamp = null;
+        this.firstRecordedTimestamp = null;
+        this.recordStopper = null;
+        this.freezingEvents = false;
         this.setupUnloadHandler();
         this.setupPostMetricsHandler();
-    }
-    /**
-     * Setups the SessionRecorder instance for usage
-     */
-    static getInstance() {
-        if (!this.instance) {
-            const nativeSessionRecorderConfig = {
-                logLevel: LogLevel.Verbose,
-            };
-            if (Platform.OS === 'android') {
-                initialize('abc1234', nativeSessionRecorderConfig);
-            }
-            this.instance = new SessionRecorder();
-            // todo handle RN clicks
-            addSafeEventListener(window, 'click', () => {
-                this.instance.handleFragPost();
-            });
+        const nativeSessionRecorderConfig = {
+            logLevel: LogLevel.Verbose,
+        };
+        if (Platform.OS === 'android') {
+            initialize('abc1234', nativeSessionRecorderConfig);
         }
-        return this.instance;
+        addSafeEventListener(window, 'click', () => this.handleFragPost());
     }
     /** Sets up the page hide handler to try to push remaining video events */
     setupUnloadHandler() {
@@ -64,8 +61,7 @@ class SessionRecorder {
             // Get the event name that triggered postMetrics from the custom event
             const eventName = e.detail;
             // Calculate the total expected video length
-            const totalVideoTime = this.lastRecordedTimestamp === null ||
-                this.firstRecordedTimestamp === null
+            const totalVideoTime = this.lastRecordedTimestamp === null || this.firstRecordedTimestamp === null
                 ? 0
                 : this.lastRecordedTimestamp - this.firstRecordedTimestamp;
             const sessionLength = MetroplexSocket.getInstance().sessionLength
@@ -77,7 +73,8 @@ class SessionRecorder {
                 // debug message gets through
                 const clientDisabled = ClientConfig.getInstance().isClientDisabled;
                 ClientConfig.getInstance().isClientDisabled = false;
-                ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient({
+                ClientConfig.getInstance().postInternalError({
+                    msg: 'large retry message queue',
                     eventName,
                     totalVideoTime,
                     sessionLength,
@@ -85,15 +82,12 @@ class SessionRecorder {
             }
         });
     }
-    /**
-     * Starts recording the user session
-     */
+    /** Starts recording the user session */
     recordUserSession() {
         return __awaiter(this, void 0, void 0, function* () {
             // check if inactive before starting any recording
             noibuLog('recordUserSession');
-            if ((yield MetroplexSocket.getInstance().closeIfInactive()) ||
-                StoredMetrics.getInstance().didCutVideo) {
+            if ((yield MetroplexSocket.getInstance().closeIfInactive()) || StoredMetrics.getInstance().didCutVideo) {
                 return;
             }
             // making sure we are not attempting to call this method
@@ -116,8 +110,7 @@ class SessionRecorder {
         return __awaiter(this, void 0, void 0, function* () {
             const timestamp = Date.now();
             // check if inactive before any processing
-            if ((yield MetroplexSocket.getInstance().closeIfInactive()) ||
-                StoredMetrics.getInstance().didCutVideo) {
+            if ((yield MetroplexSocket.getInstance().closeIfInactive()) || StoredMetrics.getInstance().didCutVideo) {
                 this.freeze();
                 return;
             }
@@ -153,9 +146,8 @@ class SessionRecorder {
             // the metrics 'exp_vid_len' data.
             // If we don't adjust for time, we assume that the expected video length is
             // the difference between the first recorded timestamp and the last recorded timestamp.
-            if (this.firstRecordedTimestamp &&
-                timestamp < this.firstRecordedTimestamp) {
-                ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(`Detected time rewind. Client has been disabled.`, true, SEVERITY.error, true);
+            if (this.firstRecordedTimestamp && timestamp < this.firstRecordedTimestamp) {
+                ClientConfig.getInstance().postInternalError({ msg: `Detected time rewind. Client has been disabled.` }, true, SEVERITY.error, true);
                 return;
             }
             const packedEvent = yield this.pack(recorderEvent.message);
@@ -167,30 +159,26 @@ class SessionRecorder {
             // todo if there are clicks, call StoredMetrics.getInstance().addVideoClick(); for each click
             const now = Date.now();
             const delta = now - this.lastFragPostTimestamp;
-            if (this.eventBuffer.length >= MAX_RECORDER_EVENT_BUFFER ||
-                delta > MAX_TIME_FOR_UNSENT_DATA_MILLIS) {
+            if (this.eventBuffer.length >= MAX_RECORDER_EVENT_BUFFER || delta > MAX_TIME_FOR_UNSENT_DATA_MILLIS) {
                 this.handleFragPost();
             }
         });
     }
-    /**
-     * Compress event
-     */
+    /** Compress event */
     pack(recorderEvent) {
         return __awaiter(this, void 0, void 0, function* () {
             // return JSON.stringify(recorderEvent);
             return SessionRecorder.compress(recorderEvent);
         });
     }
+    /** Compresses the snapshot */
     static compress(snapshot) {
         const uncompressedString = stringifyJSON(snapshot);
         const uncompressedData = strToU8(uncompressedString);
         const compressedData = zlibSync(uncompressedData, { level: 1 });
-        const compressedString = strFromU8(compressedData, true);
-        return compressedString;
+        return strFromU8(compressedData, true);
     }
-    /** builds a log message with debug info
-     */
+    /** builds a log message with debug info */
     buildDebugMessage(eventName, totalVideoTime, sessionLength) {
         return JSON.stringify({ eventName, totalVideoTime, sessionLength });
     }
@@ -215,21 +203,20 @@ class SessionRecorder {
             try {
                 let totalVideoTime = 0;
                 // checking if we have those values set in the first place
-                if (this.firstRecordedTimestamp &&
-                    this.lastRecordedTimestamp &&
-                    !this.isVideoLengthNegativeInvalid) {
-                    totalVideoTime =
-                        this.lastRecordedTimestamp - this.firstRecordedTimestamp;
+                if (this.firstRecordedTimestamp && this.lastRecordedTimestamp && !this.isVideoLengthNegativeInvalid) {
+                    totalVideoTime = this.lastRecordedTimestamp - this.firstRecordedTimestamp;
                 }
                 // In the past we have seen the video LengthMS field to be negative
                 // and bigger than the long limit of scala. Which is less than the
                 // safe integer limit of js.
-                if (!this.isVideoLengthNegativeInvalid &&
-                    (totalVideoTime < 0 || totalVideoTime >= Number.MAX_SAFE_INTEGER)) {
+                if (!this.isVideoLengthNegativeInvalid && (totalVideoTime < 0 || totalVideoTime >= Number.MAX_SAFE_INTEGER)) {
                     // we log an error to know if this is still happening
-                    ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(`video lengthMS is invalid: ${totalVideoTime}, ` +
-                        `start time: ${this.firstRecordedTimestamp}, ` +
-                        `end time: ${this.lastRecordedTimestamp}`, false, SEVERITY.error);
+                    ClientConfig.getInstance().postInternalError({
+                        msg: 'video length MS is invalid',
+                        totalVideoTime,
+                        'start time': this.firstRecordedTimestamp,
+                        'end time': this.lastRecordedTimestamp,
+                    }, false, SEVERITY.error);
                     this.isVideoLengthNegativeInvalid = true;
                     totalVideoTime = 0;
                 }
@@ -239,23 +226,24 @@ class SessionRecorder {
                     // when being sent to metroplex which we will then unmarshall into
                     // a struct to parse it's inner urls
                     // If stringifying this event buffer takes too long consider using a service worker
-                    [VIDEO_FRAG_ATT_NAME]: stringifyJSON(this.eventBuffer),
+                    vid: stringifyJSON(this.eventBuffer),
                     // Send the sequence number but don't send the expected length since that is sent as
                     // part of the last stored metrics data
-                    [PV_SEQ_ATT_NAME]: this.vfCounter,
-                    [LENGTH_ATT_NAME]: totalVideoTime,
-                    [CSS_URLS_ATT_NAME]: [],
+                    seq: this.vfCounter,
+                    len: totalVideoTime,
+                    css_urls: [],
                 }, false);
                 StoredMetrics.getInstance().addVideoFragData(this.vfCounter, totalVideoTime);
                 // constructing a client message that metroplex knows how to handle.
-                yield MetroplexSocket.getInstance().sendMessage(VIDEO_METROPLEX_TYPE, {
-                    [PAGE_VISIT_VID_FRAG_ATT_NAME]: videoFragment,
+                yield MetroplexSocket.getInstance().sendMessage({
+                    type: WebsocketMessageType.PageVisitVideoFile,
+                    payload: videoFragment,
                 });
                 this.lastFragPostTimestamp = Date.now();
             }
             catch (err) {
                 // letting collect know we are closing the rrweb listener
-                ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(`video frag socket closed with err: ${err.message}`, false, SEVERITY.error);
+                ClientConfig.getInstance().postInternalError({ msg: `video frag socket closed with err: ${err.message}` }, false, SEVERITY.error);
                 // if we detect an error in the frag posting, we stop recording
                 // the video
                 this.freeze();
@@ -282,7 +270,7 @@ class SessionRecorder {
                 this.recordStopper();
             }
             catch (e) {
-                ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(`Error during handleFragPost in recordStopper: ${e}`, false, SEVERITY.error);
+                ClientConfig.getInstance().postInternalError({ msg: `Error during handleFragPost in recordStopper: ${e}` }, false, SEVERITY.error);
             }
         }
     }

package/dist/sessionRecorder/nativeSessionRecorderSubscription.js

@@ -8,9 +8,7 @@ const LINKING_ERROR = `The package 'noibu-session-replay' doesn't seem to be lin
 const { NativeSessionRecorder } = NativeModules;
 let nativeModuleEmitter;
 const SupportedPlatforms = ['android'];
-/**
- * The level of logging to show in the device logcat stream.
- */
+/** The level of logging to show in the device logcat stream. */
 // eslint-disable-next-line no-shadow
 var LogLevel;
 (function (LogLevel) {
@@ -53,10 +51,10 @@ function initialize(projectId, config) {
  * and invokes the provided callback whenever the event occurs. If the platform is not Android,
  * the function will do nothing and return a no-op unsubscribe function.
  *
- * @param {function(RecorderEvent): void} callback - A callback function that will be invoked with
+ * @param {function(RecorderEvent): void} callback - Target callback function that will be invoked with
  * the event data whenever the `noibuRecordingEvent` is emitted.
  *
- * @returns {UnsubscribeFn} A function to unsubscribe from the event. On Android, this will remove
+ * @returns {UnsubscribeFn} Target function to unsubscribe from the event. On Android, this will remove
  * the event listener. On other platforms, it will be a no-op.
  *
  * @throws {Error} If the Noibu Session Recorder is not initialized before calling this function.

package/dist/storage/{rnStorageProvider.js → RNStorageProvider.js}

@@ -1,14 +1,10 @@
 import { __awaiter } from 'tslib';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import StorageProvider from './storageProvider.js';
+import StorageProvider from './StorageProvider.js';
 
-/**
- * React native storage provider implementation
- */
+/** React native storage provider implementation */
 class RNStorageProvider extends StorageProvider {
-    /**
-     * Creates new instance
-     */
+    /** Creates new instance */
     constructor() {
         super(AsyncStorage);
     }

package/dist/storage/{storage.js → Storage.js}

@@ -1,41 +1,29 @@
 import { __awaiter } from 'tslib';
-import RNStorageProvider from './rnStorageProvider.js';
+import RNStorageProvider from './RNStorageProvider.js';
+import { Singleton } from '../monitors/BaseMonitor.js';
 
-/**
- * Encapsulates storage api
- */
-class Storage {
-    /**
-     * Creates new instance assessing available options
-     */
+/** Encapsulates storage api */
+class Storage extends Singleton {
+    /** Creates new instance assessing available options */
     constructor() {
+        super();
         // todo replace with promise all if more storage available
         const rnStorageAvailability = RNStorageProvider.isAvailable();
-        this._provider = rnStorageAvailability.then(({ result }) => result ? new RNStorageProvider() : null);
-        this._type = rnStorageAvailability.then(({ result }) => result ? 'RNStorage' : 'unavailable');
-        this._isRNStorageAvailable = rnStorageAvailability.then(({ result }) => result);
-        this._rnStorageError = rnStorageAvailability.then(({ error }) => error);
-    }
-    /**
-     * Singleton
-     * @returns {Storage}
-     */
-    static getInstance() {
-        if (!this._instance) {
-            this._instance = new Storage();
-        }
-        return this._instance;
+        this.provider = rnStorageAvailability.then(({ result }) => (result ? new RNStorageProvider() : null));
+        this.type = rnStorageAvailability.then(({ result }) => (result ? 'RNStorage' : 'unavailable'));
+        this.isRNStorageAvailable = rnStorageAvailability.then(({ result }) => result);
+        this.rnStorageError = rnStorageAvailability.then(({ error }) => error);
     }
     /** Checks if storage is available */
     isAvailable() {
         return __awaiter(this, void 0, void 0, function* () {
-            return (yield this._provider) !== null;
+            return (yield this.provider) !== null;
         });
     }
     /** Loads value from storage */
     load(key) {
         return __awaiter(this, void 0, void 0, function* () {
-            const provider = yield this._provider;
+            const provider = yield this.provider;
             if (provider !== null) {
                 return provider.load(key);
             }
@@ -45,7 +33,7 @@ class Storage {
     /** Saves value to storage */
     save(key, value) {
         return __awaiter(this, void 0, void 0, function* () {
-            const provider = yield this._provider;
+            const provider = yield this.provider;
             if (provider !== null) {
                 return provider.save(key, value);
             }
@@ -58,7 +46,7 @@ class Storage {
      */
     remove(key) {
         return __awaiter(this, void 0, void 0, function* () {
-            const provider = yield this._provider;
+            const provider = yield this.provider;
             if (provider !== null) {
                 return provider.remove(key);
             }
@@ -68,7 +56,7 @@ class Storage {
     /** Calculates used scape */
     calculateUsedSize() {
         return __awaiter(this, void 0, void 0, function* () {
-            const provider = yield this._provider;
+            const provider = yield this.provider;
             if (provider !== null) {
                 return provider.calculateUsedSize();
             }
@@ -82,9 +70,8 @@ class Storage {
      */
     getDiagnoseInfo() {
         return __awaiter(this, void 0, void 0, function* () {
-            return `storage provider: ${yield this
-                ._type} (rnStorage available: ${yield this
-                ._isRNStorageAvailable}, error: ${yield this._rnStorageError})`;
+            return `storage provider: ${yield this.type} (rnStorage available: ${yield this
+                .isRNStorageAvailable}, error: ${yield this.rnStorageError})`;
         });
     }
 }

package/dist/storage/{storageProvider.js → StorageProvider.js}

@@ -1,13 +1,14 @@
 import { __awaiter } from 'tslib';
-import { NOIBU_LOCAL_STORAGE_TEST_KEY } from '../constants.js';
 
+// The local storage key used to test whether writing to local storage is supported
+const NOIBU_LOCAL_STORAGE_TEST_KEY = 'n_key';
 /**
  * Base implementation for LocalStorage and SessionStorage
  */
 class StorageProvider {
     /** Creates new instance based on provided provider type */
     constructor(provider) {
-        this._provider = provider;
+        this.provider = provider;
     }
     /** Checks if provider is available */
     static isAvailable(resolver) {
@@ -26,12 +27,10 @@ class StorageProvider {
             return { result, error };
         });
     }
-    /**
-     * Loads value from storage
-     */
+    /** Loads value from storage */
     load(key) {
         return __awaiter(this, void 0, void 0, function* () {
-            const value = yield this._provider.getItem(key);
+            const value = yield this.provider.getItem(key);
             if (value !== null) {
                 return value;
             }
@@ -40,14 +39,14 @@ class StorageProvider {
     }
     /** Saves value to storage */
     save(key, value) {
-        return this._provider.setItem(key, `${value}`);
+        return this.provider.setItem(key, `${value}`);
     }
     /**
      * Removes value from storage
      * @param {String} key
      */
     remove(key) {
-        return this._provider.removeItem(key);
+        return this.provider.removeItem(key);
     }
 }
 

package/dist/utils/date.js

@@ -1,62 +1,51 @@
-import ClientConfig from '../api/clientConfig.js';
+import ClientConfig from '../api/ClientConfig.js';
 import { SEVERITY } from '../constants.js';
 
 /** @module Date */
-
 /** Checks to see if the necessary Date functions that we use have been overwritten */
 function isDateOverwritten() {
-  // Check to see if Date.now() exists
-  if (!('now' in Date)) {
-    return true;
-  }
-
-  // Check to ensure that Date.now() returns a number
-  if (typeof Date.now() !== 'number') {
-    return true;
-  }
-
-  // Check to see if new Date().toISOString() exists
-  if (!('toISOString' in new Date())) {
-    return true;
-  }
-
-  // Check to ensure new Date().toISOString() returns a string
-  if (typeof new Date().toISOString() !== 'string') {
-    return true;
-  }
-
-  // If none of the above checks return true, we assume that the Date function
-  // has not been overwritten
-  return false;
+    // Check to see if Date.now() exists
+    if (!('now' in Date)) {
+        return true;
+    }
+    // Check to ensure that Date.now() returns a number
+    if (typeof Date.now() !== 'number') {
+        return true;
+    }
+    // Check to see if new Date().toISOString() exists
+    if (!('toISOString' in new Date())) {
+        return true;
+    }
+    // Check to ensure new Date().toISOString() returns a string
+    if (typeof new Date().toISOString() !== 'string') {
+        return true;
+    }
+    // If none of the above checks return true, we assume that the Date function
+    // has not been overwritten
+    return false;
 }
-
 /** Timestamp wrapper to properly handle timestamps
- * @param  {} timestamp
  */
 function timestampWrapper(timestamp) {
-  // If the Date object has been overwritten and the timestamp is not a number,
-  // we use the valueOf property to try to retrieve the actual timestamp.
-  // If valueOf is not available, we disable client and log the error.
-  if (typeof timestamp !== 'number' && isDateOverwritten()) {
-    if (
-      // eslint-disable-next-line no-prototype-builtins
-      Date.prototype.hasOwnProperty('valueOf') &&
-      typeof timestamp.valueOf === 'function' &&
-      typeof timestamp.valueOf() === 'number'
-    ) {
-      return timestamp.valueOf();
-    }
-
-    ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(
-      `The date object has been overwritten and can't be processed properly.
+    var _a;
+    // If the Date object has been overwritten and the timestamp is not a number,
+    // we use the valueOf property to try to retrieve the actual timestamp.
+    // If valueOf is not available, we disable client and log the error.
+    if (typeof timestamp === 'object' && isDateOverwritten()) {
+        const value = (_a = timestamp === null || timestamp === void 0 ? void 0 : timestamp.valueOf) === null || _a === void 0 ? void 0 : _a.call(timestamp);
+        if (typeof value === 'number') {
+            return value;
+        }
+        ClientConfig.getInstance().postInternalError({
+            msg: `The date object has been overwritten and can't be processed properly.
       Client has been disabled.`,
-      true,
-      SEVERITY.error,
-      true,
-    );
-  }
-
-  return timestamp;
+        }, true, SEVERITY.error, true);
+    }
+    return timestamp;
+}
+/** Get the current time in ISO format */
+function getOccurredNow() {
+    return new Date(timestampWrapper(Date.now())).toISOString();
 }
 
-export { isDateOverwritten, timestampWrapper };
+export { getOccurredNow, isDateOverwritten, timestampWrapper };

package/dist/utils/eventlistener.js

@@ -1,5 +1,5 @@
 import { SEVERITY } from '../constants.js';
-import ClientConfig from '../api/clientConfig.js';
+import ClientConfig from '../api/ClientConfig.js';
 
 /** addSafeEventListener will add an event listener for the specified event
  * but will catch and log any errors encountered
@@ -21,7 +21,7 @@ function addSafeEventListener(object, event, callback, capture = false) {
     try {
       callback(eventReceived);
     } catch (e) {
-      ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(
+      ClientConfig.getInstance().postInternalError(
         `addEventListener callback error: ${e.message}`,
         false,
         SEVERITY.error,
@@ -29,17 +29,14 @@ function addSafeEventListener(object, event, callback, capture = false) {
     }
   };
 
-  /**
-   * tries to add an event listener to a Proxy object
-   */
+  /** tries to add an event listener to a Proxy object */
   const tryAddEventListenerForProxy = () => {
     if (!Reflect) {
       return false;
     }
 
     try {
-      const addEventListener =
-        Reflect.get(object, 'addEventListener') || (() => {});
+      const addEventListener = Reflect.get(object, 'addEventListener') || (() => {});
       addEventListener(event, safeCallback, capture);
     } catch (e) {
       return false;
@@ -56,11 +53,7 @@ function addSafeEventListener(object, event, callback, capture = false) {
         return;
       }
     }
-    ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(
-      `addEventListener error: ${e.message}`,
-      false,
-      SEVERITY.error,
-    );
+    ClientConfig.getInstance().postInternalError(`addEventListener error: ${e.message}`, false, SEVERITY.error);
   }
 }