noibu-react-native 0.0.1

package/dist/utils/function.js

@@ -0,0 +1,398 @@
+import * as stackTraceParser from 'stacktrace-parser';
+import DeviceInfo from 'react-native-device-info';
+import { MAX_STRING_LENGTH, MAX_BEACON_PAYLOAD_SIZE, REQUIRED_DATA_PROCESSING_URLS, HTTP_DATA_COLLECTION_FLAG_NAME, HTTP_DATA_PAYLOAD_URL_REGEXES_FLAG_NAME, WIN_BLOCKED_SELECTOR_ATT_NAME, PII_EMAIL_PATTERN, PII_REDACTION_REPLACEMENT_STRING, PII_DIGIT_PATTERN, NOIBUJS_CONFIG, JS_STACK_FRAMES_ATT_NAME, JS_STACK_MESSAGE_ATT_NAME, JS_STACK_FILE_ATT_NAME, JS_STACK_LINE_ATT_NAME, JS_STACK_COL_ATT_NAME, MAX_FRAMES_IN_ARRAY, JS_STACK_METHOD_ATT_NAME, DEFAULT_STACK_FRAME_FIELD_VALUE } from '../constants.js';
+
+/** @module Functions */
+
+/**
+ *
+ * returns a string that satisfies a max length
+ * stringToVerify: string that needs to be verified
+ * length :optional, max length that stringToVerify can be
+ * @param stringToVerify
+ * @param length
+ */
+function getMaxSubstringAllowed(
+  stringToVerify,
+  length = MAX_STRING_LENGTH,
+) {
+  if (!stringToVerify) {
+    return stringToVerify;
+  }
+  if (stringToVerify.length < length) return stringToVerify;
+  return stringToVerify.substring(0, length);
+}
+
+/**
+ *
+ * getProperGlobalUrl gets the proper global url from the window
+ */
+function getProperGlobalUrl() {
+  let globalUrl =
+    (window.location && window.location.href) || 'http://localhost';
+  // first we try to get the location
+  // if it does not follow the http protocol,
+  // then we check the parent frame and if that
+  // fails then we return what we have without
+  // trying anything else
+  if (
+    (
+      (window.location && window.location.href) ||
+      'http://localhost'
+    ).startsWith('http')
+  ) {
+    globalUrl = (window.location && window.location.href) || 'http://localhost';
+  } else if (
+    window.parent &&
+    window.parent.location &&
+    window.parent.location.href.startsWith('http')
+  ) {
+    globalUrl = window.parent.location.href;
+  }
+
+  return getMaxSubstringAllowed(globalUrl);
+}
+
+/**
+ * Processes the raw stack frames and creates a readable stack in a safe manner
+ * @param rawFrames
+ */
+function processFrames(rawFrames) {
+  return rawFrames.map(frame => {
+    const processedFrame = {
+      [JS_STACK_LINE_ATT_NAME]: DEFAULT_STACK_FRAME_FIELD_VALUE,
+      [JS_STACK_METHOD_ATT_NAME]: DEFAULT_STACK_FRAME_FIELD_VALUE,
+      [JS_STACK_FILE_ATT_NAME]: DEFAULT_STACK_FRAME_FIELD_VALUE,
+    };
+
+    // stringification
+    if (frame.lineNumber && frame.lineNumber !== '<unknown>') {
+      processedFrame[JS_STACK_LINE_ATT_NAME] = String(frame.lineNumber);
+    }
+
+    if (frame.methodName && frame.methodName !== '<unknown>') {
+      processedFrame[JS_STACK_METHOD_ATT_NAME] = String(frame.methodName);
+    }
+
+    if (frame.file && frame.file !== '<unknown>') {
+      processedFrame[JS_STACK_FILE_ATT_NAME] = String(frame.file);
+    }
+
+    if (frame.column && typeof frame.column === 'number') {
+      processedFrame[JS_STACK_COL_ATT_NAME] = frame.column;
+    }
+
+    return processedFrame;
+  });
+}
+
+/**
+ * Retrieves the javascript stack and message from an error event object
+ * @param errObj error to extract stack from
+ */
+function getJSStack(errObj) {
+  let frames = [
+    {
+      [JS_STACK_LINE_ATT_NAME]: DEFAULT_STACK_FRAME_FIELD_VALUE,
+      [JS_STACK_METHOD_ATT_NAME]: DEFAULT_STACK_FRAME_FIELD_VALUE,
+      [JS_STACK_FILE_ATT_NAME]: DEFAULT_STACK_FRAME_FIELD_VALUE,
+    },
+  ];
+
+  // if the errObj type is not an object or null
+  // return a default frame
+  if (typeof errObj !== 'object' || !errObj) {
+    return {
+      [JS_STACK_FRAMES_ATT_NAME]: frames,
+      [JS_STACK_MESSAGE_ATT_NAME]: '',
+    };
+  }
+
+  // If there is no stack field present then try to read the single file/line/column values
+  if (!errObj.stack) {
+    if (errObj.fileName && typeof errObj.fileName === 'string') {
+      frames[0][JS_STACK_FILE_ATT_NAME] = errObj.fileName;
+    }
+    if (errObj.lineNumber) {
+      frames[0][JS_STACK_LINE_ATT_NAME] = String(errObj.lineNumber);
+    }
+    if (errObj.columnNumber && Number.isInteger(errObj.columnNumber)) {
+      frames[0][JS_STACK_COL_ATT_NAME] = errObj.columnNumber;
+    }
+  } else {
+    frames = processFrames(stackTraceParser.parse(errObj.stack));
+  }
+
+  if (frames.length >= MAX_FRAMES_IN_ARRAY) {
+    frames = frames.slice(0, MAX_FRAMES_IN_ARRAY);
+  }
+
+  const msg = errObj.message ? getMaxSubstringAllowed(errObj.message) : '';
+  return {
+    [JS_STACK_FRAMES_ATT_NAME]: frames,
+    [JS_STACK_MESSAGE_ATT_NAME]: msg,
+  };
+}
+
+/**
+ * safely stringifies an object
+ * @param jsonObject
+ */
+function stringifyJSON(jsonObject) {
+  // prototype.js version < 1.7 defines a toJSON on the prototype of
+  // arrays. This is wrong and they have fixed it since, but some old websites
+  // still use that lib and it messes up our the expected serilization on metroplex's
+  // side.
+  if (Array.prototype.toJSON) {
+    // this piece of code is safe since js guarentees that only one thing is running
+    // at once, therefore the prototype will be changed only while this function is executing
+    const oldToJSON = Array.prototype.toJSON;
+    delete Array.prototype.toJSON;
+    const jsonString = JSON.stringify(jsonObject);
+    // we want to re-enable the existing prototype behaviour
+    // eslint-disable-next-line no-extend-native
+    Array.prototype.toJSON = oldToJSON;
+    return jsonString;
+  }
+  return JSON.stringify(jsonObject);
+}
+
+/**
+ * Wrapper for a request, since we have to do some special handling
+ * @param method
+ * @param url
+ * @param data
+ * @param headers
+ * @param timeout
+ * @param sendAndForget
+ */
+function makeRequest(
+  method,
+  url,
+  data,
+  headers,
+  timeout,
+  sendAndForget,
+) {
+  // a send and forget request is made by using the beacon API (fetch + keepalive)
+  if (sendAndForget) {
+    const stringData = stringifyJSON(data);
+    const currentPayloadSize = new Blob([stringData]).size;
+    // if we have a large object or fetch is not available, we skip sending the message
+    if (!window.fetch || currentPayloadSize > MAX_BEACON_PAYLOAD_SIZE) {
+      return new Promise(resolve => {
+        resolve();
+      });
+    }
+
+    return fetch(url, {
+      method: 'POST',
+      headers,
+      body: stringifyJSON(data),
+      // keep alive outlives the current page, its the same as beacon
+      keepalive: true,
+    });
+  }
+
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open(method, url);
+    xhr.timeout = timeout;
+    Object.keys(headers).forEach(header => {
+      xhr.setRequestHeader(header, headers[header]);
+    });
+
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        resolve(xhr.response);
+      } else {
+        reject(new Error(`Custom Request failed: ${xhr.statusText}`));
+      }
+    };
+    xhr.onerror = () => {
+      reject(new Error(`Custom Request failed: ${xhr.statusText}`));
+    };
+    if (data) {
+      xhr.send(stringifyJSON(data));
+    } else {
+      xhr.send();
+    }
+  });
+}
+
+/** determines if we have received the block selector */
+function checkBlockedSelectorExistence() {
+  const noibuConfig = NOIBUJS_CONFIG();
+  return (
+    noibuConfig[WIN_BLOCKED_SELECTOR_ATT_NAME] &&
+    Array.isArray(noibuConfig[WIN_BLOCKED_SELECTOR_ATT_NAME])
+  );
+}
+
+/** checks if  http data collection is enabled */
+function checkHttpDataCollectionEnabled() {
+  const noibuConfig = NOIBUJS_CONFIG();
+  // Just a boolean, so safe to return truthiness. If undefined, will return false.
+  return !!noibuConfig[HTTP_DATA_COLLECTION_FLAG_NAME];
+}
+
+/** determines if we have received the http allowed urls */
+function checkHttpPayloadAllowedURLsExistence() {
+  const noibuConfig = NOIBUJS_CONFIG();
+  return (
+    noibuConfig[HTTP_DATA_PAYLOAD_URL_REGEXES_FLAG_NAME] &&
+    Array.isArray(noibuConfig[HTTP_DATA_PAYLOAD_URL_REGEXES_FLAG_NAME])
+  );
+}
+
+/** gets http data payload allowed URLs */
+function getHttpPayloadAllowedURLs() {
+  const noibuConfig = NOIBUJS_CONFIG();
+  // return the allowed list or an empty list
+  if (checkHttpPayloadAllowedURLsExistence()) {
+    return noibuConfig[HTTP_DATA_PAYLOAD_URL_REGEXES_FLAG_NAME];
+  }
+  return [];
+}
+/**
+ * Gets all the blocked css classes to prevent those elements from being recorded
+ */
+function getBlockedCSSForCurrentDomain() {
+  const noibuConfig = NOIBUJS_CONFIG();
+  const blockedCSS = ['noibu-blocked'];
+  if (checkBlockedSelectorExistence()) {
+    noibuConfig[WIN_BLOCKED_SELECTOR_ATT_NAME].forEach(sel => {
+      // this means that we are looking at a class
+      if (sel.startsWith('.') && sel.length > 0) {
+        // selecting everything after and including the element at index 1
+        blockedCSS.push(sel.substring(1));
+      }
+    });
+  }
+  return blockedCSS;
+}
+/**
+ * makes sure the url sent is a valid URL
+ * @param  {} string url to be validated
+ */
+function isValidURL(string) {
+  try {
+    const _ = new URL(string);
+    return true;
+  } catch (_) {
+    return false;
+  }
+}
+
+let userAgentCache = '';
+
+/**
+ * Because of the nature of user agent in react native, we have to make this async.
+ * But I promise, this is really fast, since we memoize the result for the whole session :)
+ * @returns {Promise<string>}
+ */
+async function getUserAgent() {
+  if (userAgentCache) {
+    return userAgentCache;
+  }
+  userAgentCache = await DeviceInfo.getUserAgent();
+  return userAgentCache;
+}
+
+/**
+ * isInvalidURLConfig will verify that Collect is being initializes with
+ * the correct env vars.
+ * @param  {} urlConfig
+ */
+function isInvalidURLConfig(urlConfig) {
+  for (let i = 0; i < REQUIRED_DATA_PROCESSING_URLS.length; i += 1) {
+    const u = REQUIRED_DATA_PROCESSING_URLS[i];
+    if (!urlConfig[u]) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * isNoibuJSAlreadyLoaded will verify if there are already other
+ * copies of NoibuJS runnung
+ */
+function isNoibuJSAlreadyLoaded() {
+  // check if the global variable exists and its value
+  const loaded = window.noibuJSLoaded !== undefined;
+  // set the variable so future copies of the script
+  // will know this instance is running
+  window.noibuJSLoaded = true;
+  return loaded;
+}
+
+/** asString will create a string out of anything passed to it.
+ * @param  {} obj
+ */
+function asString(obj) {
+  if (!obj) {
+    return '';
+  }
+  // we've seen the url be an object in some cases
+  // we would still like to send those to our backend in the case
+  // that this is an issue and needs to be queried
+  if (typeof obj === 'object') {
+    return stringifyJSON(obj);
+  }
+
+  return String(obj);
+}
+
+/** masks textual content if it ressembles something sensitive
+ * @param  {} text
+ */
+function maskTextInput(text) {
+  // if it has an email or digit(s), we mask the text
+  return text
+    .replace(PII_EMAIL_PATTERN, PII_REDACTION_REPLACEMENT_STRING)
+    .replace(PII_DIGIT_PATTERN, '*');
+}
+
+/** gets the onURL of a string, defaulting to the location of the webpage
+ * @param  {} realOnURL
+ */
+function getOnURL(realOnURL) {
+  let onURL = getMaxSubstringAllowed(
+    (window.location && window.location.href) || 'http://localhost',
+  );
+  if (realOnURL && realOnURL.trim() !== '' && realOnURL !== 'undefined') {
+    onURL = asString(getMaxSubstringAllowed(realOnURL));
+  }
+
+  return onURL;
+}
+
+/** gets the user language from the browser */
+function getUserLanguage() {
+  const lang = window.navigator.userLanguage || window.navigator.language;
+
+  if (lang === '' || !lang) {
+    return null;
+  }
+
+  return lang.toLowerCase();
+}
+
+/**
+ * Checks if the provided object is an instance of the specified type.
+ * It's safer than `instanceof` operator as it handles cases
+ * where type is not actually a type but an object.
+ * @param {any} instance
+ * @param {any} type
+ */
+function isInstanceOf(instance, type) {
+  try {
+    return typeof type === 'function' && instance instanceof type;
+  } catch (e) {
+    return false;
+  }
+}
+
+export { asString, checkHttpDataCollectionEnabled, getBlockedCSSForCurrentDomain, getHttpPayloadAllowedURLs, getJSStack, getMaxSubstringAllowed, getOnURL, getProperGlobalUrl, getUserAgent, getUserLanguage, isInstanceOf, isInvalidURLConfig, isNoibuJSAlreadyLoaded, isValidURL, makeRequest, maskTextInput, processFrames, stringifyJSON };

package/dist/utils/object.js

@@ -0,0 +1,144 @@
+/** @module Object */
+/**
+ * Replaces an attribute value found in an object with another value
+ * sourceObject: source object whose attribute will get replaced
+ * attributeName: the attribute key whose value will be replace
+ * processingFunction: function that accepts the original value
+ * and returns the newValue
+ * @param  {} sourceObject
+ * @param  {} attributeName
+ * @param  {} processingFunction
+ */
+const replace = (sourceObject, attributeName, processingFunction) => {
+  if (!(attributeName in sourceObject)) {
+    return;
+  }
+
+  const originalAttribute = sourceObject[attributeName];
+  const newValue = processingFunction(originalAttribute);
+
+  if (typeof newValue === 'function') {
+    try {
+      newValue.prototype = newValue.prototype || {};
+      Object.defineProperties(newValue, {
+        __noibu__: {
+          enumerable: false,
+          value: true,
+        },
+        __noibu_original__: {
+          enumerable: false,
+          value: originalAttribute,
+        },
+        __noibu_wrapped__: {
+          enumerable: false,
+          value: newValue,
+        },
+      });
+    } catch (err) {
+      // silent fail
+    }
+  }
+
+  // eslint-disable-next-line no-param-reassign
+  sourceObject[attributeName] = newValue;
+};
+
+/**
+ * Checks whether the prototype's property is writeable. If it is not,
+ * checks whether the property can be made writeable. If it can, it is
+ * set to writeable.
+ * @param {object} proto
+ * @param {string} property
+ * @returns {boolean} Whether the property on the prototype is (or is now) writeable
+ */
+const propWriteableOrMadeWriteable = (proto, property) => {
+  if (
+    !proto ||
+    !proto.hasOwnProperty ||
+    !Object.prototype.hasOwnProperty.call(proto, property)
+  ) {
+    return false;
+  }
+
+  // Getting the properties that this the prototype
+  // has under the open property
+  const propDescriptor = Object.getOwnPropertyDescriptor(proto, property);
+
+  // Checking if the open property is read-only
+  if (!propDescriptor.writable) {
+    // Checking if we can write to it
+    if (propDescriptor.configurable) {
+      // Making it writable to wrap it
+      Object.defineProperty(proto, property, {
+        writable: true,
+      });
+    } else {
+      return false;
+    }
+  }
+  return true;
+};
+
+/**
+ * Replaces the behaviour of Object.fromEntries() as it is not supported on all browsers
+ * @param {Iterable} entries The iterable to parse into an object
+ * @returns An object containing the same key/values as the iterable passed
+ */
+const safeFromEntries = entries => {
+  if (!entries || !entries[Symbol.iterator]) {
+    throw new Error('Object.fromEntries() requires a single iterable argument');
+  }
+  const obj = {};
+  // eslint-disable-next-line no-restricted-syntax
+  for (const [key, value] of entries) {
+    obj[key] = value;
+  }
+  return obj;
+};
+
+/**
+ * Iterates object recursively and calls visit function
+ * for each property allowing to override its value
+ * @param {Object} instance An object to iterate through
+ * @param {Function} visit A callback function that is called for each property
+ * There are 3 arguments: current object, current property and its value
+ * @param {{depth: number}} limit Use limit config object to set depth of the recursion
+ */
+const iterateObjectRecursively = (
+  instance,
+  visit,
+  limit = { depth: 5 },
+) => {
+  /* eslint-disable no-shadow, no-restricted-syntax, no-param-reassign, guard-for-in */
+  /**
+   * internal recursive function
+   * @param {Object} instance Current object
+   * @param {Number} depth Current depth
+   */
+  const iterate = (instance, depth) => {
+    // stop to go deeper if it is deep enough already
+    if (depth > limit.depth) return;
+    for (const property in instance) {
+      try {
+        // call visit function and assign its result if not undefined
+        const newValue = visit(instance, property, instance[property]);
+        if (newValue !== undefined) {
+          instance[property] = newValue;
+        }
+        // go one level deeper if it is an object
+        if (
+          instance[property] !== null &&
+          typeof instance[property] === 'object'
+        ) {
+          iterate(instance[property], depth + 1);
+        }
+      } catch (e) {
+        // just continue to the next property
+      }
+    }
+  };
+
+  iterate(instance, 1);
+};
+
+export { iterateObjectRecursively, propWriteableOrMadeWriteable, replace, safeFromEntries };

package/dist/utils/performance.js

@@ -0,0 +1,21 @@
+import { timestampWrapper } from './date.js';
+
+/** @module Performance */
+
+/**
+ * Wrapper function for window.performance.now() to ensure
+ * it's available before calling it. If it's not available,
+ * we return Date.now() instead.
+ */
+function safePerformanceNow() {
+  if (window.performance && window.performance.now) {
+    // There is a 70% hit with using this
+    // https://jsperf.com/perf-vs-date/1
+    // performance.now is for relative time measurement
+    // cannot be used instead of Date.getTime() on it's own
+    return window.performance.now();
+  }
+  return timestampWrapper(Date.now());
+}
+
+export { safePerformanceNow };

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "noibu-react-native",
+  "version": "0.0.1",
+  "description": "React-Native SDK for NoibuJS to collect errors in React-Native applications",
+  "main": "dist/entry/index.js",
+  "types": "dist/entry/index.d.ts",
+  "files": [
+    "dist/*",
+    "README.md"
+  ],
+  "author": "Noibu Inc",
+  "license": "ISC",
+
+  "scripts": {
+    "clean": "rimraf ./dist/*",
+    "build": "node ./build.js",
+    "build:dev": "node ./build.watch.js",
+    "prepare": "npm run clean; npm run build;",
+    "test": "jest --coverage --passWithNoTests",
+    "lint": "eslint src -c .eslintrc.json --ext js,ts,jsx,tsx",
+    "lint_output": "eslint src -c .eslintrc.json --ext js,ts,jsx,tsx -f json > eslint_report.json",
+    "codecov": "codecov"
+  },
+  "peerDependencies": {
+    "react": ">=16.11.0",
+    "react-native": ">=0.63.0",
+    "react-native-device-info": "^10.6.0",
+    "react-native-url-polyfill": "^1.3.0",
+    "react-native-uuid": "^2.0.1",
+    "stacktrace-parser": "^0.1.10"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-typescript": "^11.1.1",
+    "@tsconfig/react-native": "^3.0.2",
+    "@types/jest": "^29.5.1",
+    "@types/node": "^20.2.3",
+    "@types/react": "^18.2.6",
+    "@types/react-test-renderer": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "codecov": "^3.8.3",
+    "dotenv": "^16.1.3",
+    "eslint": "^8.41.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-jsdoc": "^44.2.4",
+    "eslint-plugin-prettier": "^4.2.1",
+    "jest": "^29.5.0",
+    "prettier": "^2.8.8",
+    "rimraf": "^5.0.1",
+    "rollup": "^3.24.0",
+    "rollup-plugin-dotenv": "^0.5.0"
+  }
+}