noibu-react-native 0.0.1

package/README.md

@@ -0,0 +1,155 @@
+# Noibu React-Native public SDK
+
+Noibu's React Native SDK allows customers to easily track checkout errors in their Android and iOS apps written in React Native.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Configuration](#configuration)
+- [API Reference](#api-reference)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Installation
+
+### Requirements
+
+For alpha version there are no strong limitations, except for:
+
+- react-native version should be >=0.63.0
+
+### Installing the SDK
+
+Install using favourite node package manager (npm, yarn, etc.):
+
+```bash
+npm install noibu-react-native --save
+```
+
+## Usage
+
+Wrap your root App component into SDK ErrorBoundary:
+
+```jsx
+import React from 'react';
+import { View, Text } from 'react-native';
+import { ErrorBoundary } from 'noibu-react-native';
+
+export default function App() {
+  return (
+    <ErrorBoundary
+      fallback={() => (
+        <View>
+          <Text>Oh no!</Text>
+        </View>
+      )}
+    >
+      <View>
+        <Text>Hello world!</Text>
+      </View>
+    </ErrorBoundary>
+  );
+}
+```
+
+That's it! First time the module is imported, it runs an init and starts listening to errors.
+
+## Configuration
+
+ErrorBoundary component has a few useful properties described here https://help.noibu.com/hc/en-us/articles/9562254753677-Noibu-React-SDK under the section _ErrorBoundary Class -> Props_.
+
+## API Reference
+
+Apart from exporting ErrorBoundary component, noibu-react-native module has NoibuJS object export with useful methods.
+
+### `NoibuJS`
+
+#### `requestHelpCode(alert?: boolean): Promise<string>`
+
+Requests a help code from the HelpCode instance. To read more about help codes, refer to the page: https://help.noibu.com/hc/en-us/articles/14051818012813-How-to-Find-a-Session-with-Help-Code
+
+- `@returns {Promise<string>}` - A promise that resolves with the requested help code.
+
+```jsx
+import { NoibuJS } from 'noibu-react-native';
+import { useCallback, useState } from 'react';
+import { Alert, Text, Pressable, View} from 'react-native';
+
+const AlertHelpCode = () => {
+  const triggerHelpCodeAlert = useCallback(async () => {
+    const response = await NoibuJS.requestHelpCode();
+    if (response) {
+      Alert.alert('Help Code delivered:', response);
+    }
+  }, []);
+  return (
+    <View>
+      <Pressable onPress={triggerHelpCodeAlert}>
+        <View>
+          <Text>Tap to view Help Code</Text>
+        </View>
+      </Pressable>
+    </View>
+  );
+};
+```
+
+#### `addCustomAttribute(name: string, value: string) => string`
+
+Adds a custom attribute to the session.
+
+- `@param {string} name` - Name of a custom attribute.
+- `@param {any} value` - It's value, should be a JSON.stringify-able type.
+- `@returns {string}` - A success message, or validation failure cause.
+
+```js
+import { NoibuJS } from 'noibu-react-native';
+
+NoibuJS.addCustomAttribute('myNameIs', 'Jeff'); // SUCCESS
+NoibuJS.addCustomAttribute('veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLong', 'Jeff'); // NAME_TOO_LONG
+```
+
+#### `addError(customError: Error) => string`
+
+Adds a custom Error to the session.
+
+- `@param {{ message: string, stack: string }} customError` - an Error-like object to be reported with the session.
+- `@returns {string}` - A success message, or validation failure cause.
+
+```js
+import { NoibuJS } from 'noibu-react-native';
+
+NoibuJS.addError(new Error('My Error'));
+```
+
+#### `addJsSdkError(customError: Error, errorSource: string) => string`
+
+Adds an error from a JS SDK to the session, this method is used by ErrorBoundary internally. Similar to addError(), but additionally allows to set a cause.
+
+- `@param {{ message: string, stack: string }} error` - an Error-like object to be reported with the session.
+- `@param {string} errorSource` - source of an error.
+- `@returns {string}` - A success message, or validation failure cause.
+
+```js
+import { NoibuJS } from 'noibu-react-native';
+
+NoibuJS.addJsSdkError(new Error('My Error'), 'myModule.js');
+```
+
+## Publishing
+
+Ci has a job to publish a new version of the SDK, but has to be manually triggered. 
+Docker image used for publishing is noibujssdkci:0.2
+
+## Contributing
+
+You can contribute by checking out the project page and open issues. https://linear.app/noibu/project/react-native-sdk-5ccd19a3343a
+
+## License
+
+Copyright 2023 Noibu.com
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/dist/api/clientConfig.js

@@ -0,0 +1,416 @@
+import uuid from 'react-native-uuid';
+import { MAX_METROPLEX_SOCKET_INNACTIVE_TIME, DISABLED_STATUS_KEY, CLIENT_UNLOCK_TIME_KEY, SEVERITY_WARN, LAST_ACTIVE_TIME_KEY, CURRENT_PAGE_VISIT_COUNT_KEY, NOIBU_BROWSER_ID_KYWRD, BROWSER_ID_KEY, PV_SEQ_NUM_RESET_TIME_MINUTES, SEVERITY_ERROR, JS_ENV, PAGE_VISIT_ID_KEY, MAX_PAGEVISIT_VISITED, CLIENT_LOCK_TIME_MINUTES, GET_SCRIPT_ID, MAX_COLLECT_ERROR_LOG } from '../constants.js';
+import { stringifyJSON, getUserAgent, asString, makeRequest } from '../utils/function.js';
+import Storage from '../storage/storage.js';
+
+/** @module ClientConfig */
+
+/**
+ * Singleton class to manage the client configuration
+ * this class will be responsible for controlling the disabled
+ * status of the client script as well as managing all storage
+ * storing and retrieval.
+ */
+class ClientConfig {
+  /**
+   * Creates a ClientConfig singleton instance
+   * @param  {} noibuErrorURL
+   */
+  constructor(noibuErrorURL) {
+    // sets up this.browserId, this.disabledStatus
+    this.pageVisitId = uuid.v4();
+    // variables stored in storage
+    this.isClientDisabled = null;
+    this.browserId = null;
+    this.pageVisitSeq = null;
+    // This variable tracks the last time the user was active in this session.
+    // It is also written to storage. Initialized to now so the session can be
+    // timed out even if a PV is never sent.
+    this.lastActiveTime = new Date();
+    // error URL to send Noibu errors to
+    this.noibuErrorURL = noibuErrorURL;
+    // sets up this.browserId, this.isClientDisabled, this.pageVisitSeq
+    this._setupStorageVars();
+    // error sent to backend counter
+    this.cltErrorPostCounter = 0;
+    // variables for checking if the socket is inactive
+    // used a class variables in order to be changed in testing
+    this.maxSocketInactiveTime = MAX_METROPLEX_SOCKET_INNACTIVE_TIME;
+  }
+
+  /** Configures the singleton instance */
+  static configureInstance(noibuErrorURL) {
+    if (!this.instance) {
+      // Set this.noibuErrorURL preemptively in case ClientConfig isn't able to be
+      // configured properly and throws an error.
+      // This will ensure we get the expected error POST request at the correct URL.
+      this.noibuErrorURL = noibuErrorURL;
+      this.instance = new ClientConfig(noibuErrorURL);
+      this.instance.noibuErrorURL = noibuErrorURL;
+    }
+  }
+
+  /**
+   * gets the singleton instance
+   * @returns {ClientConfig}
+   */
+  static getInstance() {
+    if (!this.instance) {
+      throw new Error('ClientConfig was not configured');
+    }
+
+    return this.instance;
+  }
+
+  /** lockClient will disable the client script for a single pagevisit for
+   * duration given in minuntes */
+  lockClient(duration, msg) {
+    const expiryTime = new Date();
+    expiryTime.setMinutes(expiryTime.getMinutes() + duration);
+
+    const noibuLSObject = this._getClientState();
+    noibuLSObject[DISABLED_STATUS_KEY] = true;
+    noibuLSObject[CLIENT_UNLOCK_TIME_KEY] = expiryTime;
+    this._storeBrowserData(noibuLSObject);
+    this.postNoibuErrorAndOptionallyDisableClient(msg, true, SEVERITY_WARN);
+  }
+
+  /** Locks the client until the next page loads */
+  lockClientUntilNextPage(msg) {
+    this.postNoibuErrorAndOptionallyDisableClient(msg, true, SEVERITY_WARN);
+  }
+
+  /**  Updates the config object to store the given last active time */
+  updateLastActiveTime(lastActiveTime) {
+    this.lastActiveTime = lastActiveTime;
+    const newConfigData = this._getLsObject();
+    newConfigData[LAST_ACTIVE_TIME_KEY] = lastActiveTime;
+    this._storeBrowserData(newConfigData);
+  }
+
+  /**  Gets the current page visit sequence number that should be used */
+  getPageVisitSeq() {
+    if (this._pageVisitSeqNeedsReset()) {
+      // Reset the page visit sequence number to zero and store the next seq number in storage
+      this.pageVisitSeq = 0;
+      const newConfigData = this._getLsObject();
+      newConfigData[CURRENT_PAGE_VISIT_COUNT_KEY] = this.pageVisitSeq + 1;
+      // Update the last active time since we are actively requesting the seq
+      newConfigData[LAST_ACTIVE_TIME_KEY] = new Date();
+      this._storeBrowserData(newConfigData);
+    }
+
+    return this.pageVisitSeq;
+  }
+
+  /**
+   *  Returns the client config object from storage or generates a new one
+   * What is stored in storage will look like this
+   *   {
+   * BrowserId: UUIDV4
+   * ExpiryTime: DATE OBJ
+   * DisabledStatus: BOOL
+   * CurrentPageVisitCount: INT
+   * ClientUnlockTime: DATE OBJ
+   * LastActiveTime: DATE OBJ
+   * }
+   */
+  _getLsObject() {
+    const storage = Storage.getInstance();
+    const storedConfig = storage.load(NOIBU_BROWSER_ID_KYWRD);
+
+    // first time browsing since noibu was installed
+    if (!storedConfig) {
+      return this._generateAndStoreData();
+    }
+
+    let parsedConfig = {};
+
+    try {
+      parsedConfig = JSON.parse(storedConfig);
+    } catch (e) {
+      return this._generateAndStoreData();
+    }
+
+    // checking if it's a valid object. The CLIENT_UNLOCK_TIME_KEY doesn't have to exist
+    // since it's not written to the storage object when set to null.
+    if (
+      parsedConfig[BROWSER_ID_KEY] == null ||
+      parsedConfig[DISABLED_STATUS_KEY] == null ||
+      parsedConfig[CURRENT_PAGE_VISIT_COUNT_KEY] == null ||
+      parsedConfig[LAST_ACTIVE_TIME_KEY] == null
+    ) {
+      return this._generateAndStoreData();
+    }
+    return parsedConfig;
+  }
+
+  /**
+   * Check if we have surpased the last active time and the page visit seq number needs resetting
+   */
+  _pageVisitSeqNeedsReset() {
+    const noibuLSObject = this._getClientState();
+    const someTimeAgo = new Date();
+    someTimeAgo.setMinutes(
+      someTimeAgo.getMinutes() - PV_SEQ_NUM_RESET_TIME_MINUTES,
+    );
+    return new Date(noibuLSObject[LAST_ACTIVE_TIME_KEY]) < someTimeAgo;
+  }
+
+  /**
+   * _setupStorageVars will set all class variables that depend
+   * on the storage's value.
+   */
+  _setupStorageVars() {
+    const storage = Storage.getInstance();
+    if (!storage.isAvailable()) {
+      this.postNoibuErrorAndOptionallyDisableClient(
+        `Storage is unavailable, disabling client. ${storage.getDiagnoseInfo()}`,
+        true,
+        SEVERITY_ERROR,
+      );
+      return;
+    }
+
+    // getting the current content of the storage
+    const noibuLSObject = this._getClientState();
+
+    // Check if we have surpased the last active time and reset the sequence number if so
+    if (this._pageVisitSeqNeedsReset()) {
+      noibuLSObject[CURRENT_PAGE_VISIT_COUNT_KEY] = 0;
+    }
+
+    this.browserId = noibuLSObject[BROWSER_ID_KEY];
+    this.pageVisitSeq = noibuLSObject[CURRENT_PAGE_VISIT_COUNT_KEY];
+    this.isClientDisabled = noibuLSObject[DISABLED_STATUS_KEY];
+
+    // If the client has been disabled just return.
+    // Calling _getClientState() above performs the disabled expirey check
+    if (this.isClientDisabled) return;
+
+    // Update the LS object values before storing it for the next page visit
+    noibuLSObject[CURRENT_PAGE_VISIT_COUNT_KEY] += 1;
+    noibuLSObject[LAST_ACTIVE_TIME_KEY] = new Date();
+
+    // Expose page visit ID in storage for use by Trailbreaker video tests
+    // This will be done for the testvideo and lambdavideo bundles used by Trailbreaker
+    if (JS_ENV().includes('video')) {
+      noibuLSObject[PAGE_VISIT_ID_KEY] = this.pageVisitId;
+    }
+
+    // if we have reached the max page visits for a browser id then
+    // we disabled collect for 45 minutes
+    if (noibuLSObject[CURRENT_PAGE_VISIT_COUNT_KEY] >= MAX_PAGEVISIT_VISITED) {
+      // if we bust the max pagevisit visited limit we lock the client for 45 minutes
+      // since its probably a bot.
+      const expiryTime = new Date();
+      expiryTime.setMinutes(expiryTime.getMinutes() + CLIENT_LOCK_TIME_MINUTES);
+      // setting the lock time
+      noibuLSObject[CLIENT_UNLOCK_TIME_KEY] = expiryTime;
+      noibuLSObject[DISABLED_STATUS_KEY] = true;
+      this.postNoibuErrorAndOptionallyDisableClient(
+        `Hit max page visits, disabling client for ${CLIENT_LOCK_TIME_MINUTES}mins`,
+        true,
+        SEVERITY_ERROR,
+      );
+    }
+
+    // we now check if we successfully saved the data
+    const savedData = this._storeBrowserData(noibuLSObject);
+
+    // if the browser is null, we cannot access the storage or an
+    // error happened, thus we disable collect.
+    if (savedData[BROWSER_ID_KEY] === null) {
+      // we do not set a lock expiry date here since we cannot store to storage
+      this.postNoibuErrorAndOptionallyDisableClient(
+        `Null browser in storage, disabling client`,
+        true,
+        SEVERITY_ERROR,
+      );
+      this.browserId = null;
+    }
+  }
+
+  /**
+   *   Function will get the Noibu Storage Object
+   * 1. Generate a brand new one
+   * Get it from storage if the expiry date is not in the past
+   * Generate a brand new one if the expiry date is in the past
+   */
+  _getClientState() {
+    const newConfigData = this._getLsObject();
+
+    // if the lock expired, we remove the lock period and enable the client
+    if (
+      newConfigData[CLIENT_UNLOCK_TIME_KEY] &&
+      new Date(newConfigData[CLIENT_UNLOCK_TIME_KEY]) <= new Date()
+    ) {
+      newConfigData[CLIENT_UNLOCK_TIME_KEY] = null;
+      newConfigData[DISABLED_STATUS_KEY] = false;
+      this._storeBrowserData(newConfigData);
+    }
+    // return the stored browserId
+    return newConfigData;
+  }
+
+  /**
+   * _generateAndStoreData generates brand new data and then proceeds to store
+   * it.
+   */
+  _generateAndStoreData() {
+    const data = this._storeBrowserData(this._generateNewBrowserData());
+    return data;
+  }
+
+  /**
+   * _generateNewBrowserData will create new data to be stored in storage
+   *   and persisted throughout a session
+   */
+  _generateNewBrowserData() {
+    const noibuBrowserData = {
+      [DISABLED_STATUS_KEY]: false,
+      [BROWSER_ID_KEY]: uuid.v4(),
+      [CURRENT_PAGE_VISIT_COUNT_KEY]: 0,
+      [CLIENT_UNLOCK_TIME_KEY]: null,
+      [LAST_ACTIVE_TIME_KEY]: new Date(),
+    };
+
+    // Expose page visit ID in storage for use by Trailbreaker video tests
+    // This will be done for the testvideo and lambdavideo bundles used by Trailbreaker
+    if (JS_ENV().includes('video')) {
+      noibuBrowserData[PAGE_VISIT_ID_KEY] = this.pageVisitId;
+    }
+
+    return noibuBrowserData;
+  }
+
+  /**
+   * _storeBrowserData will store the passed object in storage.
+   * @param  {} data the data to be stored
+   */
+  _storeBrowserData(data) {
+    const storage = Storage.getInstance();
+    try {
+      storage.save(NOIBU_BROWSER_ID_KYWRD, stringifyJSON(data));
+      return data;
+    } catch (e) {
+      this.postNoibuErrorAndOptionallyDisableClient(
+        `Error writing browser data to storage, disabling client: ${e.message}, ` +
+          `${storage.getDiagnoseInfo()}`,
+        true,
+        SEVERITY_ERROR,
+      );
+      // sending empty fields if we encountered errors while storing in the LS
+      const invalidData = {
+        [DISABLED_STATUS_KEY]: true,
+        [BROWSER_ID_KEY]: null,
+        [CURRENT_PAGE_VISIT_COUNT_KEY]: 0,
+      };
+      return invalidData;
+    }
+  }
+
+  /**
+   * postNoibuErrorAndOptionallyDisableClient will post errors that were thrown by collect
+   * and disable the client if required
+   * severity expects one of the SEVERITY_x level constants, or else error will be used
+   * @param  {} error
+   * @param  {} disableClient
+   * @param  {} severity
+   * @param  {} keepAlive=false
+   */
+  async postNoibuErrorAndOptionallyDisableClient(
+    error,
+    disableClient,
+    severity,
+    keepAlive = false,
+  ) {
+    if (this.isClientDisabled) {
+      return;
+    }
+    if (disableClient) {
+      this.isClientDisabled = true;
+    }
+    if (severity === SEVERITY_WARN) {
+      // don't log warning messages by default, as a cost savings
+      return;
+    }
+
+    let errMsg = `Noibu Browser ID(${
+      this.browserId ? this.browserId : ''
+    }), PV ID ${
+      this.pageVisitId
+    }, Script ID ${GET_SCRIPT_ID()}, and User Agent ${await getUserAgent()} error: ${asString(
+      error,
+    )}`;
+
+    // if the page visits sends more errors than the
+    // allowed threshold we disable the client
+    if (this.cltErrorPostCounter >= MAX_COLLECT_ERROR_LOG) {
+      // we disable the client for 10 minute if we sent too many logs
+      // we manually lock the client to not cause an infinite loop
+      const expiryTime = new Date();
+      expiryTime.setMinutes(expiryTime.getMinutes() + 10); // 10 minutes lock
+
+      const noibuLSObject = this._getClientState();
+      noibuLSObject[DISABLED_STATUS_KEY] = true;
+      noibuLSObject[CLIENT_UNLOCK_TIME_KEY] = expiryTime;
+      this._storeBrowserData(noibuLSObject);
+      this.isClientDisabled = true;
+      // end of lock
+      // overriding the message to be an alert that we are shutting collect off.
+      errMsg =
+        'Shutting collect off, we reached the ' +
+        'maximum limit of collect errors sent.';
+    }
+
+    const errorContent = {
+      url: (global.location && global.location.href) || '',
+      err_msg: errMsg,
+      sev: severity,
+    };
+    const headers = {
+      'content-type': 'application/json',
+    };
+
+    if (!keepAlive) {
+      makeRequest(
+        'POST',
+        this.noibuErrorURL,
+        errorContent,
+        headers,
+        2000,
+        false,
+      ).catch(() => {
+        // we do nothing and let this error silently fail
+      });
+    } else {
+      fetch(this.noibuErrorURL, {
+        method: 'POST',
+        headers,
+        body: stringifyJSON(errorContent),
+        // keep alive outlives the current page, its the same as beacon
+        keepalive: true,
+      });
+    }
+
+    // only increment if this was an actual error, not a warning or otherwise
+    if (severity === SEVERITY_ERROR) {
+      this.cltErrorPostCounter += 1;
+    }
+  }
+
+  /**
+   * Returns true if the page visit is considered to be inactive
+   */
+  isInactive() {
+    const someTimeAgo = new Date();
+    someTimeAgo.setSeconds(
+      someTimeAgo.getSeconds() - this.maxSocketInactiveTime,
+    );
+
+    return this.lastActiveTime < someTimeAgo;
+  }
+}
+
+export { ClientConfig as default };

package/dist/api/helpCode.js

@@ -0,0 +1,106 @@
+import MetroplexSocket from './metroplexSocket.js';
+import { SEVERITY_ERROR, WORK_REQUEST_ATT_NAME, HELP_CODE_ATT_NAME } from '../constants.js';
+import ClientConfig from './clientConfig.js';
+
+/**
+ * HelpCode class is responsible for help code feature related functionality
+ */
+class HelpCode {
+  /**
+   * Singleton instance
+   * @returns {HelpCode}
+   */
+  static getInstance() {
+    if (!this.instance) {
+      this.instance = new HelpCode();
+    }
+
+    return this.instance;
+  }
+
+  /**
+   * Constructs instance and sets up event listeners
+   */
+  constructor() {
+    this.requestContext = null;
+  }
+
+  /**
+   * Requests a help code and returns a Promise that resolves when the help code is obtained
+   * or rejects if the noibu connection is unavailable.
+
+   * @returns {Promise<string>} Promise object representing the help code request.
+   * @throws {string} Throws an error if the noibu connection is unavailable.
+   */
+  requestHelpCode() {
+    if (this.requestContext != null) {
+      return this.requestContext.promise;
+    }
+
+    const context = {
+      resolve: null,
+      reject: null,
+      promise: null,
+    };
+
+    context.promise = new Promise((resolve, reject) => {
+      context.resolve = resolve;
+      context.reject = reject;
+    });
+
+    this.requestContext = context;
+
+    const result = this._sendRequest();
+
+    if (result === false) {
+      this.requestContext = null;
+      return Promise.reject(new Error('noibu connection is unavailable'));
+    }
+
+    return this.requestContext.promise;
+  }
+
+  /**
+   * Handles the received help code event.
+   * @param {CustomEvent<string>} event - The event object with string detail property.
+   * @returns {void}
+   */
+  receiveHelpCode(event) {
+    if (this.requestContext === null) {
+      const { success, data } = event.detail;
+
+      if (!success) {
+        const message = `Noibu help code is not available due to ${data}`;
+
+        ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(
+          message,
+          false,
+          SEVERITY_ERROR,
+        );
+      }
+      return;
+    }
+
+    const context = this.requestContext;
+    this.requestContext = null;
+
+    const { success, data } = event.detail;
+
+    if (success) {
+      context.resolve(data);
+    } else {
+      context.reject(new Error(data));
+    }
+  }
+
+  /**
+   * Sends metroplex request
+   */
+  _sendRequest() {
+    return MetroplexSocket.getInstance().sendMessage(WORK_REQUEST_ATT_NAME, {
+      [WORK_REQUEST_ATT_NAME]: HELP_CODE_ATT_NAME,
+    });
+  }
+}
+
+export { HelpCode as default };