noibu-react-native 0.0.1

package/dist/monitors/errorMonitor.js

@@ -0,0 +1,295 @@
+import { replace } from '../utils/object.js';
+import 'stacktrace-parser';
+import 'react-native-device-info';
+import { ERROR_EVENT_ERROR_TYPE, EVENT_TARGETS, CONSOLE_FUNCTION_OVERRIDES, WRAPPED_EXCEPTION_ERROR_TYPE, ERROR_LOG_EVENT_ERROR_TYPE } from '../constants.js';
+import { saveErrorToPagevisit } from '../pageVisit/pageVisitEventError/pageVisitEventError.js';
+import 'react-native-uuid';
+
+/** @module ErrorMonitor */
+
+/**
+ * will make sure that we ignore the next error caught by the error event listener
+ * ignoreError is used to not store errors that were generated by noibu wrapped
+ * code twice (once by wrapped code, once by error event listener).
+ */
+function ignoreNextError() {
+
+  // this works because setTimeout without a delay fires
+  // as the immidiate next event in the event loop. Which should
+  // be right after the error that we throw before callign this error
+  setTimeout(() => {
+  });
+}
+
+/**
+ * wraps a provided function into a function that try and catches
+ * the original function, doing so allows us to catch errors
+ * functionToWrap: function to be wrapped
+ * @param  {} functionToWrap
+ */
+function wrap(functionToWrap) {
+  if (typeof functionToWrap !== 'function') {
+    return functionToWrap;
+  }
+
+  try {
+    // the function was wrapped already
+    if (functionToWrap.__noibu__) {
+      return functionToWrap;
+    }
+
+    // trying to wrap a function that was already wrapped in the past,
+    // return the wrapped value
+    if (functionToWrap.__noibu_wrapped__) {
+      return functionToWrap.__noibu_wrapped__;
+    }
+  } catch (err) {
+    // silently failling
+    return functionToWrap;
+  }
+  /**
+   * wrapper for most prototypes we know can generate errors
+   * @param  {} ...args
+   */
+  const nbuWrapper = function (...args) {
+    // Trying to call the function in a wrapped try and catch
+    // this will generate an error in the console if there is one.
+    try {
+      // Recursively wrap arguments in case that some are
+      // functions
+      const wrappedArguments = Array.prototype.slice
+        .call(args)
+        .map(arg => wrap(arg));
+
+      // checking if the function is served through the handleEvent property
+      // for compatibility reasons
+      if (functionToWrap.handleEvent) {
+        return functionToWrap.handleEvent.apply(this, wrappedArguments);
+      }
+      return functionToWrap.apply(this, wrappedArguments);
+      // user land
+    } catch (exception) {
+      // we need to ignore this error during the onerror otherwise
+      // we catch it 2x
+      saveErrorToPagevisit(WRAPPED_EXCEPTION_ERROR_TYPE, {
+        error: exception,
+      });
+      ignoreNextError();
+      throw exception;
+    }
+  };
+
+  try {
+    // eslint-disable-next-line no-restricted-syntax
+    for (const property in functionToWrap) {
+      if (Object.prototype.hasOwnProperty.call(functionToWrap, property)) {
+        nbuWrapper[property] = functionToWrap[property];
+      }
+    }
+  } catch (err) {
+    // silently failling
+  }
+
+  nbuWrapper.prototype = functionToWrap.prototype || {};
+
+  Object.defineProperty(functionToWrap, '__noibu_wrapped__', {
+    enumerable: false,
+    value: nbuWrapper,
+  });
+
+  // Signal that this function has been wrapped/filled already
+  // for both debugging and to prevent it to being wrapped/filled twice
+  Object.defineProperties(nbuWrapper, {
+    __noibu__: {
+      enumerable: false,
+      value: true,
+    },
+    __noibu_original__: {
+      enumerable: false,
+      value: functionToWrap,
+    },
+  });
+
+  // Restore original function name (not all browsers allow that)
+  try {
+    const descriptor = Object.getOwnPropertyDescriptor(nbuWrapper, 'name');
+    if (descriptor.configurable) {
+      Object.defineProperty(nbuWrapper, 'name', {
+        // eslint-disable-next-line require-jsdoc
+        get() {
+          return functionToWrap.name;
+        },
+      });
+    }
+  } catch (err) {
+    return functionToWrap;
+  }
+
+  return nbuWrapper;
+}
+
+/**
+ * transform a log into an error since React hides component errors
+ * tps://reactjs.org/docs/error-boundaries.html
+ * @param  {} errorLog
+ */
+function processErrorLog(errorLog) {
+  // handle empty arguments
+  if (!errorLog) {
+    return;
+  }
+  const { message, stack } = errorLog;
+  // for now we only process error logs if they are a way to describe an error
+  if (!stack || !message) {
+    return;
+  }
+
+  saveErrorToPagevisit(ERROR_LOG_EVENT_ERROR_TYPE, { message, stack });
+}
+
+/** iterates arguments to try to extract errors from them
+ * @param  {} argsFromErrorLog
+ */
+function processErrorLogArguments(argsFromErrorLog) {
+  // we may receive multiple arguments
+  argsFromErrorLog.forEach(arg => {
+    // ensure arg exists before attempting processing
+    if (!arg) {
+      return;
+    }
+    // if we pass an array of elements in the console, we want to go through that
+    // away and make sure we are extracting the error object. We dont do nested arrays.
+    if (Array.isArray(arg)) {
+      arg.forEach(nestedArg => {
+        processErrorLog(nestedArg);
+      });
+      return;
+    }
+    processErrorLog(arg);
+  });
+}
+
+/**
+ * wraps and replaces the addEventListener property
+ * of event targets to try and catch errors
+ * eventTargetString: event target name
+ */
+function configureEventListeners() {
+  EVENT_TARGETS.forEach(eventTargetString => {
+    const eventTarget = window[eventTargetString];
+    // The event target needs to have a prototype and have the
+    // addEventListener function
+    const proto = eventTarget && eventTarget.prototype;
+    if (
+      !proto ||
+      !proto.hasOwnProperty ||
+      // eslint-disable-next-line no-prototype-builtins
+      !proto.hasOwnProperty('addEventListener')
+    ) {
+      return;
+    }
+    replace(
+      proto,
+      'addEventListener',
+      originalFunction =>
+        // We set nbuWrapper to the handler function so if this returns an error
+        // the trace message will start with nbuWrapper which would allow us to
+        // detect that this is a wrapped function and not a NoibuJS error
+        function nbuWrapper(eventName, handler, capture) {
+          // testPassive is done by passing a null handler, so we code
+          //  against that
+          if (!handler) {
+            return originalFunction.call(this, eventName, handler, capture);
+          }
+          let wrappedHandler;
+          // Checking if handleEvent is explicitely
+          // passed for compatibility reason
+          if (handler.handleEvent) {
+            const wrappedHandleEvent = wrap(handler.handleEvent.bind(handler));
+            // in some case the handler is an object that contains much more than just the
+            // the single handle event property, in such cases we need to make sure we are not
+            // overwritting any other critical functionality by wrapping the event handler
+            wrappedHandler = handler;
+            wrappedHandler.handleEvent = wrappedHandleEvent;
+          } else {
+            wrappedHandler = wrap(handler);
+          }
+
+          return originalFunction.call(
+            this,
+            eventName,
+            wrappedHandler,
+            capture,
+          );
+        },
+    );
+
+    // replacing the removeEventListener function as well to wrap the listener
+    replace(
+      proto,
+      'removeEventListener',
+      originalFunction =>
+        // We set nbuWrapper to the handler function so if this returns an error
+        // the trace message will start with nbuWrapper which would allow us to
+        // detect that this is a wrapped function and not a NoibuJS error
+        function nbuWrapper(eventName, handler, options) {
+          let callback = handler;
+          try {
+            callback = callback && (callback.__noibu_wrapped__ || callback);
+          } catch (e) {
+            // fail silently
+          }
+          return originalFunction.call(this, eventName, callback, options);
+        },
+    );
+  });
+
+  // we wrap all logging to catch any potential errors passed in logs
+  CONSOLE_FUNCTION_OVERRIDES.forEach(consoleFunction => {
+    if (!window.console || !window.console[consoleFunction]) {
+      return;
+    }
+    replace(
+      window.console,
+      consoleFunction,
+      originalFunction =>
+        // We set nbuWrapper to the handler function so if this returns an error
+        // the trace message will start with nbuWrapper which would allow us to
+        // detect that this is a wrapped function and not a NoibuJS error
+        function nbuWrapper() {
+          // ignoring this linting error since we don't want
+          // potentially overide the actual functioning of console.error
+          // eslint-disable-next-line prefer-rest-params
+          originalFunction.call(window.console, ...arguments);
+          // converting the arguments to an array so that we do not nest argument objects
+          // eslint-disable-next-line prefer-rest-params
+          processErrorLogArguments(Array.from(arguments));
+        },
+    );
+  });
+}
+
+/**
+ * Monitors the errors happening on the window
+ */
+function monitorErrors() {
+  // wrapping all listeners as soon as possible after we set the above listener
+  configureEventListeners();
+  global.ErrorUtils.setGlobalHandler((error, isFatal) => {
+    saveErrorToPagevisit(ERROR_EVENT_ERROR_TYPE, {
+      error,
+    });
+  }, true);
+  if (global.HermesInternal) {
+    global.HermesInternal.enablePromiseRejectionTracker({
+      allRejections: true,
+      onUnhandled: (id, rejection = {}) => {
+        saveErrorToPagevisit(ERROR_EVENT_ERROR_TYPE, {
+          error: rejection,
+        });
+      },
+    });
+  }
+}
+
+export { monitorErrors, processErrorLogArguments };

package/dist/monitors/gqlErrorValidator.js

@@ -0,0 +1,306 @@
+import { CONTENT_TYPE, SEVERITY_ERROR } from '../constants.js';
+import { isInstanceOf, getMaxSubstringAllowed } from '../utils/function.js';
+import ClientConfig from '../api/clientConfig.js';
+
+const MESSAGE_ATT_NAME = 'message';
+const EXTENSIONS_ATT_NAME = 'extensions';
+const LOCATIONS_ATT_NAME = 'locations';
+const PATH_ATT_NAME = 'path';
+const LINE_ATT_NAME = 'line';
+const COLUMN_ATT_NAME = 'column';
+const MESSAGE_MAX_LENGTH = 1000;
+
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable no-param-reassign */
+
+/**
+ * Try detecting GraphQL errors from http response
+ */
+class GqlErrorValidator {
+  /**
+   * Retrieves GQL error object based on fetch request/response
+   * @param {String} url
+   * @param {{}} options
+   * @param {Request} request
+   * @param {Response} response - cloned() from original response
+   */
+  static async fromFetch(url, options, request, response) {
+    try {
+      const isResponseValid = isInstanceOf(response, Response) && response.ok;
+      if (!isResponseValid) {
+        return null;
+      }
+      const contentType = this._getContentTypeFromFetchArguments(
+        options,
+        request,
+      );
+      if (this._shouldHandleRequest(url, contentType)) {
+        const data = await response.json();
+        return this._validate(data, []);
+      }
+    } catch (e) {
+      // can't read the response if request is aborted
+      // so just ignore it
+      if (!this._isRequestAborted(options, request)) {
+        this._postError(e);
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Retrieves GQL error object based on XHR object
+   * @param {String} url
+   * @param {XMLHttpRequest} xhr
+   */
+  static async fromXhr(url, xhr) {
+    try {
+      const isResponseValid =
+        isInstanceOf(xhr, XMLHttpRequest) &&
+        xhr.status >= 200 &&
+        xhr.status <= 299;
+      if (!isResponseValid) {
+        return null;
+      }
+      let contentType = null;
+      if (xhr.noibuRequestHeaders) {
+        contentType = xhr.noibuRequestHeaders.get(CONTENT_TYPE);
+      }
+      if (this._shouldHandleRequest(url, contentType)) {
+        let data = null;
+        if (xhr.responseType === 'blob') {
+          if (xhr.response.text) {
+            const content = await xhr.response.text();
+            data = this._parseJsonSafely(content);
+          }
+        } else if (xhr.responseType === 'json') {
+          data = xhr.response;
+        } else {
+          const content = xhr.responseText;
+          data = this._parseJsonSafely(content);
+        }
+        if (data) {
+          return this._validate(data, []);
+        }
+      }
+    } catch (e) {
+      this._postError(e);
+    }
+
+    return null;
+  }
+
+  /**
+   * Try safely parse a string and return null if fails
+   * @param {String} content
+   */
+  static _parseJsonSafely(content) {
+    try {
+      return JSON.parse(content);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  /**
+   * Try to get content type for fetch arguments
+   * @param {{}} options
+   * @param {Request} request
+   */
+  static _getContentTypeFromFetchArguments(options, request) {
+    let headers = null;
+    if (isInstanceOf(request, Request)) {
+      headers = request.headers;
+    } else if (options && options.headers) {
+      headers = new Headers(options.headers);
+    }
+    let contentType = null;
+    if (headers) {
+      contentType = headers.get(CONTENT_TYPE);
+    }
+    return contentType;
+  }
+
+  /**
+   * Checks if request is aborted
+   * If it has been aborder we are not able to consume the response
+   * @param {{}} options
+   * @param {Request} request
+   */
+  static _isRequestAborted(options, request) {
+    if (isInstanceOf(request, Request)) {
+      return request.signal && request.signal.aborted;
+    }
+    if (options && isInstanceOf(options.signal, AbortSignal)) {
+      return options.signal.aborted;
+    }
+    return false;
+  }
+
+  /**
+   * Determines if request should be processed
+   * @param {String|URL} url
+   * @param {String} contentType
+   */
+  static _shouldHandleRequest(url, contentType) {
+    if (contentType) {
+      contentType = contentType.toLowerCase();
+    }
+    let isGqlUrl = false;
+    if (url) {
+      if (isInstanceOf(url, URL)) {
+        url = url.toString();
+      }
+      isGqlUrl = url.toLowerCase().includes('graphql');
+    }
+    return (
+      (contentType === 'application/json' && isGqlUrl) ||
+      contentType === 'application/graphql'
+    );
+  }
+
+  /**
+   * Sanitizes payload object
+   * @param {any} data
+   * @param {Array<String>} validationIssues
+   */
+  static _validate(data, validationIssues) {
+    let errors = null;
+
+    if (data && Array.isArray(data.errors)) {
+      errors = data.errors;
+
+      for (const error of errors) {
+        const properties = Object.keys(error);
+        for (const property of properties) {
+          switch (property) {
+            case MESSAGE_ATT_NAME:
+              this._validateMessage(error);
+              break;
+            case LOCATIONS_ATT_NAME:
+              this._validateLocations(error, validationIssues);
+              break;
+            case PATH_ATT_NAME:
+              this._validatePath(error, validationIssues);
+              break;
+            case EXTENSIONS_ATT_NAME:
+              this._validateExtensions(error);
+              break;
+            default:
+              delete error[property];
+              validationIssues.push(`unexpected error.${property}`);
+              break;
+          }
+        }
+      }
+
+      if (validationIssues.length > 0) {
+        this._postValidationIssues(validationIssues);
+      }
+    }
+
+    return errors;
+  }
+
+  /**
+   * Sanitizes message object
+   * @param {any} error
+   */
+  static _validateMessage(error) {
+    error[MESSAGE_ATT_NAME] = getMaxSubstringAllowed(
+      error[MESSAGE_ATT_NAME],
+      MESSAGE_MAX_LENGTH,
+    );
+  }
+
+  /**
+   * Sanitizes extensions object
+   * @param {any} error
+   * @param {Array<String>} validationIssues
+   */
+  static _validateExtensions(error) {
+    const json = JSON.stringify(error[EXTENSIONS_ATT_NAME]);
+    error[EXTENSIONS_ATT_NAME] = getMaxSubstringAllowed(
+      json,
+      MESSAGE_MAX_LENGTH,
+    );
+  }
+
+  /**
+   * Sanitizes locations object
+   * @param {any} error
+   * @param {Array<String>} validationIssues
+   */
+  static _validateLocations(error, validationIssues) {
+    const locations = error[LOCATIONS_ATT_NAME];
+    if (Array.isArray(locations)) {
+      for (const location of locations) {
+        const properties = Object.keys(location);
+        for (const property of properties) {
+          switch (property) {
+            case LINE_ATT_NAME:
+            case COLUMN_ATT_NAME:
+              if (!Number.isSafeInteger(location[property])) {
+                const value = location[property];
+                location[property] = 0;
+                validationIssues.push(
+                  `unexpected ${property} value '${value}'`,
+                );
+              }
+              break;
+            default:
+              delete location[property];
+              validationIssues.push(`unexpected error.location.${property}`);
+              break;
+          }
+        }
+      }
+    } else {
+      delete error[LOCATIONS_ATT_NAME];
+      validationIssues.push(`unexpected error.locations`);
+    }
+  }
+
+  /**
+   * Sanitizes path object
+   * @param {any} error
+   * @param {Array<String>} validationIssues
+   */
+  static _validatePath(error, validationIssues) {
+    const path = error[PATH_ATT_NAME];
+    if (Array.isArray(path)) {
+      error[PATH_ATT_NAME] = error[PATH_ATT_NAME].map(x => x.toString());
+    } else {
+      delete error[PATH_ATT_NAME];
+      validationIssues.push(`unexpected error.path`);
+    }
+  }
+
+  /**
+   * Posts error
+   * @param {String} message
+   */
+  static _postError(message) {
+    ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(
+      `GQL parse error: ${message}`,
+      false,
+      SEVERITY_ERROR,
+    );
+  }
+
+  /**
+   * Posts issue found during object sanitization
+   * @param {Array<String>} validationIssues
+   */
+  static _postValidationIssues(validationIssues) {
+    const message = validationIssues.join(',');
+    ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(
+      `GQL error validation warning: ${message}`,
+      false,
+      SEVERITY_ERROR,
+    );
+  }
+}
+
+export { GqlErrorValidator as default };