noibu-react-native 0.0.1

package/dist/monitors/requestMonitor.js

@@ -0,0 +1,679 @@
+import 'react-native/Libraries/Network/fetch';
+import { saveErrorToPagevisit } from '../pageVisit/pageVisitEventError/pageVisitEventError.js';
+import { PageVisitEventHTTP, isHttpCodeFailure } from '../pageVisit/pageVisitEventHTTP/pageVisitEventHTTP.js';
+import { propWriteableOrMadeWriteable, replace } from '../utils/object.js';
+import 'stacktrace-parser';
+import 'react-native-device-info';
+import { PV_SEQ_ATT_NAME, XML_HTTP_REQUEST_ERROR_TYPE, GQL_ERROR_TYPE, SEVERITY_ERROR, SEVERITY_WARN, RESPONSE_ERROR_TYPE, HTTP_METHOD_ATT_NAME, HTTP_RESP_CODE_ATT_NAME, URL_ATT_NAME, HTTP_RESP_TIME_ATT_NAME, HTTP_RESP_LENGTH_ATT_NAME, FETCH_EXCEPTION_ERROR_TYPE } from '../constants.js';
+import { addSafeEventListener } from '../utils/eventlistener.js';
+import { HTTPDataBundler } from './httpDataBundler.js';
+import ClientConfig from '../api/clientConfig.js';
+import GqlErrorValidator from './gqlErrorValidator.js';
+
+/** @module RequestMonitor */
+// todo no idea why this works but it fixes fetch replacement
+
+/**
+ * Takes an XHR object, method, url, response time, and payload, and returns the parameters to pass
+ * the PageVisitEventHTTP constructor.
+ * @param {object} xhrObj
+ * @param {string} method
+ * @param {string} url
+ * @param {number} respTime
+ * @param {object} gqlError
+ * @param {*} rawPayload
+ * @returns HTTP event and data
+ */
+function _buildHttpEventDataObjectsForXHR(
+  xhrObj,
+  method,
+  url,
+  respTime,
+  gqlError,
+  rawPayload = null,
+) {
+  const httpEvent = {
+    [HTTP_METHOD_ATT_NAME]: method,
+    [HTTP_RESP_CODE_ATT_NAME]: xhrObj.status,
+    [URL_ATT_NAME]: url,
+    [HTTP_RESP_TIME_ATT_NAME]: respTime,
+  };
+  let httpData = null;
+  const isGqlError = gqlError != null;
+  const isError = isHttpCodeFailure(xhrObj.status) || isGqlError;
+  if (isError && HTTPDataBundler.getInstance().shouldContinueForURL(url)) {
+    const responseHeaders = HTTPDataBundler.headersMapFromString(
+      xhrObj.getAllResponseHeaders(),
+    );
+    // add response payload length, if any
+    const contentLength =
+      HTTPDataBundler.getInstance().contentLength(responseHeaders);
+    if (contentLength > 0) {
+      httpEvent[HTTP_RESP_LENGTH_ATT_NAME] = contentLength;
+    }
+
+    let responseBody = '';
+    if (HTTPDataBundler.getInstance().shouldCollectPayloadForURL(url)) {
+      // Set descriptive body if content is wrong type or too long.
+      const droppedResponseText =
+        HTTPDataBundler.getInstance().dropPayloadIfNecessaryFromHeaders(
+          responseHeaders,
+        );
+
+      responseBody =
+        droppedResponseText ||
+        HTTPDataBundler.responseStringFromXHRResponseType(xhrObj);
+    }
+
+    httpData = HTTPDataBundler.getInstance().bundleHTTPData(
+      url,
+      xhrObj.noibuRequestHeaders,
+      rawPayload,
+      responseHeaders,
+      responseBody,
+      method,
+      isError,
+    );
+  }
+  return [httpEvent, httpData];
+}
+
+/**
+ * Called in the fetch() wrapper function, this specifically gets called after the promises which
+ * return the request and response body complete.
+ * @param {object} request a Request object
+ * @param {object} response a Response object
+ * @param {object} options the options parameter from the original fetch() call
+ * @param {string[]} bodyStrings an array of string HTTP bodies from the wrapped fetch() function.
+ * [0] is the response body, [1] is an optional response body.
+ * @param {string} url the URL of the request
+ * @param {string} method the method used in the fetch call
+ * @param {boolean} isError is an error
+ * @returns the return from the bundleHTTPData() call
+ */
+function _handleFetchOnPromiseCompletion(
+  request,
+  response,
+  options,
+  bodyStrings,
+  url,
+  method,
+  isError,
+) {
+  let reqBody; //
+  let reqHeaders = new Map();
+  let respHeaders = new Map();
+  if (bodyStrings[1]) {
+    // Get reqBody from request obj if it exists
+    // I don't like this notation, but the linter enforces it.
+    // This is the same as reqBody = values[1]
+    [, reqBody] = bodyStrings;
+
+    // Get reqHeaders from request obj
+    if (request.headers) {
+      reqHeaders = HTTPDataBundler.headersMapFromIterable(
+        request.headers.entries(),
+      );
+    }
+  }
+  // Get reqBody from options if it hasn't been defined above.
+  // Double-equals null check on reqBody to get null or undefined but not an empty string
+  if (reqBody == null && !!options && !!options.body) reqBody = options.body;
+
+  // Get reqHeaders from options.headers
+  if (reqHeaders.size < 1 && !!options && !!options.headers) {
+    // Two cases here: headers will either be a simple object (key/value), or
+    // a Headers type object.
+
+    // Case 1: headers has a .entries() property, it is a Header object
+    if (options.headers instanceof Headers) {
+      reqHeaders = HTTPDataBundler.headersMapFromIterable(
+        options.headers.entries(),
+      );
+    }
+    // Case 2: headers is a simple object, same logic as above but we call it as
+    // Object.entries()
+    else {
+      reqHeaders = HTTPDataBundler.headersMapFromIterable(
+        Object.entries(options.headers),
+      );
+    }
+  }
+
+  // response.headers will always be a Headers object.
+  if (!!response && !!response.headers) {
+    respHeaders = HTTPDataBundler.headersMapFromIterable(
+      response.headers.entries(),
+    );
+  }
+
+  return HTTPDataBundler.getInstance().bundleHTTPData(
+    url,
+    reqHeaders,
+    reqBody,
+    respHeaders,
+    bodyStrings[0],
+    method,
+    isError,
+  );
+}
+
+/**
+ * Returns the parameters to pass the PageVisitEventHTTP constructor. Specific to the fetch wrapper.
+ * @param {object} request a Request object
+ * @param {object} response a Response object cloned() from the original
+ * @param {string} method the method used in the fetch call
+ * @param {string} url the URL of the request
+ * @param {object} options the options parameter from the original fetch() call
+ * @param {number} respTime the time between the fetch() call and the the resolution of the
+ * original implementation's return
+ * @param {object} gqlError a GraphQL error object
+ * @param {Promise<string>} requestTextPromise
+ * @returns an array in the form [httpEvent, httpData]
+ */
+async function _buildHttpEventDataObjectsForFetch(
+  request,
+  response,
+  method,
+  url,
+  options,
+  respTime,
+  requestTextPromise,
+  gqlError,
+) {
+  const httpEvent = {
+    [HTTP_METHOD_ATT_NAME]: method,
+    [HTTP_RESP_CODE_ATT_NAME]: response.status,
+    [URL_ATT_NAME]: url,
+    [HTTP_RESP_TIME_ATT_NAME]: respTime,
+  };
+
+  let httpData = null;
+  const isGqlError = gqlError != null;
+  const isError = isHttpCodeFailure(response.status) || isGqlError;
+  // Only get the bodies of the request and response on error and if the URL is one we care about.
+  if (isError && HTTPDataBundler.getInstance().shouldContinueForURL(url)) {
+    // add response payload length, if any
+    if (response && response.headers) {
+      const contentLength = HTTPDataBundler.getInstance().contentLength(
+        response.headers,
+      );
+      if (contentLength > 0) {
+        httpEvent[HTTP_RESP_LENGTH_ATT_NAME] = contentLength;
+      }
+    }
+
+    let responseText = '';
+    if (
+      HTTPDataBundler.getInstance().shouldCollectPayloadForURL(url) &&
+      !!response &&
+      response instanceof Response
+    ) {
+      const droppedResponseText =
+        HTTPDataBundler.getInstance().dropPayloadIfNecessaryFromHeaders(
+          response.headers,
+        );
+      responseText = droppedResponseText || response.clone().text();
+    }
+    const responseTextPromise = Promise.resolve(responseText);
+
+    // Array to pass to Promise.all(). We conditionally include requestTextPromise as a
+    // second element if it was defined earlier.
+    const promises = [
+      responseTextPromise,
+      ...(requestTextPromise ? [requestTextPromise] : []),
+    ];
+
+    // Wait on the promises for the response and the request (if applicable) to resolve,
+    // then call our handler
+    await Promise.all(promises)
+      .then(data =>
+        _handleFetchOnPromiseCompletion(
+          request,
+          response,
+          options,
+          data,
+          url,
+          method,
+          isError,
+        ),
+      )
+      .then(httpDataReturn => {
+        httpData = httpDataReturn;
+      });
+  }
+  // This return will await the _handleFetchOnPromiseCompletion() call if necessary,
+  // but won't if not. (See if above).
+  return [httpEvent, httpData];
+}
+
+/**
+ * Wraps the send prototype of the xmlhttp object
+ * @param  {object} proto window.XMLHTTPRequest's prototype
+ */
+function wrapXMLHTTPSend(proto) {
+  replace(
+    proto,
+    'send',
+    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 nbuXMLHTTPSendWrapper(data) {
+        // We wrap all of our logic in a try block to guarantee that we will complete the original
+        // implementation if we throw an error in our logic.
+        try {
+          let method;
+          if (this.noibuHttpMethod) {
+            method = this.noibuHttpMethod;
+          } else {
+            // This is very hacky but we do not really have an option as
+            // we do not have access to either the url nor the method when
+            // overiding the send method
+            method = data ? 'POST' : 'GET';
+          }
+          // not using safePerformanceNow as there is a 70% hit with using it.
+          // We don't want every request to get impacted by this.
+          const rCreatedAt = new Date();
+          // on loadend we catch the event and
+          // make sure it was correct
+          addSafeEventListener(this, 'loadend', async () => {
+            const rEndedAt = new Date();
+            const respTime = Math.abs(rEndedAt - rCreatedAt);
+            // Prefer the URL from the open() call if it is defined.
+            const url = this.noibuHttpUrl || this.responseURL;
+            const gqlError = await GqlErrorValidator.fromXhr(url, this);
+
+            const [httpEvent, httpData] = _buildHttpEventDataObjectsForXHR(
+              this,
+              method,
+              url,
+              respTime,
+              gqlError,
+              data,
+            );
+
+            // Save HTTP Info
+            let pageVisitEventHTTP = new PageVisitEventHTTP(
+              httpEvent,
+              httpData,
+            );
+            pageVisitEventHTTP.saveHTTPEvent();
+
+            const seq =
+              pageVisitEventHTTP.httpData &&
+              pageVisitEventHTTP.httpData[PV_SEQ_ATT_NAME];
+            if (isHttpCodeFailure(this.status)) {
+              saveErrorToPagevisit(XML_HTTP_REQUEST_ERROR_TYPE, this, seq);
+            }
+
+            if (gqlError) {
+              gqlError.forEach(error =>
+                saveErrorToPagevisit(GQL_ERROR_TYPE, error, seq),
+              );
+            }
+
+            // helping gc
+            pageVisitEventHTTP = null;
+          }); // End of loadend callback, return to synchronous code below
+        } catch (e) {
+          ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(
+            `Error in XHR.send() wrapper: ${e}`,
+            false,
+            SEVERITY_ERROR,
+          );
+        }
+        return originalFunction.call(this, data);
+      },
+  );
+}
+
+/**
+ * Wraps the open prototype of the xmlhttp object
+ * @param  {object} proto window.XMLHTTPRequest's prototype
+ * @param {boolean} shouldHandleLoadend Whether the wrapped XHR.open() function should be
+ * responsible for listening to 'loadend' events. (Used in the case where the XHR.send()
+ * function on the XHR prototype cannot be modified.)
+ */
+function wrapXMLHTTPOpen(proto, shouldHandleLoadend) {
+  replace(
+    proto,
+    'open',
+    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 nbuXMLHTTPOpenWrapper(
+        method,
+        url,
+        async = true,
+        user = null,
+        password = null,
+      ) {
+        // We wrap all of our logic in a try block to guarantee that we will complete the original
+        // implementation if we throw an error in our logic.
+        try {
+          // We wrap assignment of the .noibu[...] variables in a try/catch, as we're assigning
+          // properties to a built-in object type, and have no guarantee of success.
+          try {
+            this.noibuHttpMethod = method;
+            this.noibuHttpUrl = url;
+          } catch (error) {
+            ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(
+              `Unable to set custom properties on XHR object: ${error}`,
+              false,
+              SEVERITY_WARN,
+            );
+          }
+
+          if (shouldHandleLoadend) {
+            // on loadend we catch the event and
+            // make sure it was correct
+            const rCreatedAt = new Date();
+            addSafeEventListener(this, 'loadend', async () => {
+              const rEndedAt = new Date();
+              const respTime = Math.abs(rEndedAt - rCreatedAt);
+              const gqlError = await GqlErrorValidator.fromXhr(url, this);
+
+              const [httpEvent, httpData] = _buildHttpEventDataObjectsForXHR(
+                this,
+                method,
+                url,
+                respTime,
+                gqlError,
+              );
+
+              let pageVisitEventHTTP = new PageVisitEventHTTP(
+                httpEvent,
+                httpData,
+              );
+
+              // Save HTTP Info
+              pageVisitEventHTTP.saveHTTPEvent();
+              const seq =
+                pageVisitEventHTTP.httpData &&
+                pageVisitEventHTTP.httpData[PV_SEQ_ATT_NAME];
+              if (isHttpCodeFailure(this.status)) {
+                saveErrorToPagevisit(XML_HTTP_REQUEST_ERROR_TYPE, this, seq);
+              }
+
+              if (gqlError) {
+                gqlError.forEach(error =>
+                  saveErrorToPagevisit(GQL_ERROR_TYPE, error, seq),
+                );
+              }
+
+              // helping gc
+              pageVisitEventHTTP = null;
+            }); // End of loadend callback, return to synchronous code below
+          }
+        } catch (e) {
+          ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(
+            `Error in XHR.open() wrapper: ${e}`,
+            false,
+            SEVERITY_ERROR,
+          );
+        }
+        return originalFunction.call(this, method, url, async, user, password);
+      },
+  );
+}
+
+/**
+ * Replaces the native XMLHTTPRequest.setHeader() function. We use this to build an array of
+ * request headers as these are not stored by the XMLHTTPRequest object.
+ * @param {object} proto window.XMLHTTPRequest's prototype
+ */
+function wrapXMLHTTPSetRequestHeader(proto) {
+  replace(
+    proto,
+    'setRequestHeader',
+    originalFunction =>
+      function nbuXMLHTTPSetRequestHeaderWrapper(header, value) {
+        // We wrap all of our logic in a try block to guarantee that we will complete the original
+        // implementation if we throw an error in our logic.
+        try {
+          if (
+            !this.noibuRequestHeaders ||
+            !(this.noibuRequestHeaders instanceof Map)
+          ) {
+            this.noibuRequestHeaders = new Map();
+          }
+          // Ensure it's a string. This also converts null to "null"
+          const stringValue = typeof value === 'string' ? value : String(value);
+          this.noibuRequestHeaders.set(header.toLowerCase(), stringValue);
+        } catch (error) {
+          ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(
+            `Error in XHR.setRequestHeader() wrapper: ${error}`,
+            false,
+            SEVERITY_ERROR,
+          );
+        }
+        return originalFunction.call(this, header, value);
+      },
+  );
+}
+
+/**
+ * Handles fetch failure
+ * @param  {} err
+ * @param  {} url
+ */
+function handleFetchFailure(err, url) {
+  if (!err) {
+    return;
+  }
+
+  // we do not need this error if we cannot extract both the message and stack
+  if (!err.message || !err.stack) {
+    return;
+  }
+
+  // making sure we have a url
+  const checkedURL = !url ? '' : url;
+  const errorFromFetch = new Error();
+  errorFromFetch.stack = err.stack;
+  const urlMessage = checkedURL.trim() === '' ? '' : ` on url ${checkedURL}`;
+  errorFromFetch.message = `${err.message}${urlMessage}`;
+  const errorPayload = {
+    error: errorFromFetch,
+  };
+  saveErrorToPagevisit(FETCH_EXCEPTION_ERROR_TYPE, errorPayload);
+}
+
+/**
+ * Setting up the wrapper around fetch functions to try and
+ * catch http errors
+ */
+function setupGlobalFetchWrapper() {
+  const proto = global;
+
+  // Ensure we're able to replace the fetch() function
+  if (!propWriteableOrMadeWriteable(proto, 'fetch')) {
+    return;
+  }
+
+  replace(
+    proto,
+    'fetch',
+    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 nbuGlobalFetchWrapper(resource, options) {
+        let method;
+        let url;
+
+        // These two variables will only be defined if the resource param is a request object.
+        // request, if defined, will be a clone of the request object
+        let request;
+        // requestTextPromise, if defined, will be a promise obtained from request that resolves
+        // to the response body as text
+        let requestTextPromise;
+
+        // We wrap everything in try/catch to ensure the original function is called even if we throw
+        // an unexpected error.
+        try {
+          // There is no valid reason for fetch() to be called without a resource but we
+          // see it on a bunch of websites. It seems to work the same as empty string
+          if (!resource) {
+            method = 'GET';
+            url = '';
+          } else {
+            if (resource.method) {
+              method = resource.method;
+              url = resource.url;
+            } else {
+              // If options or options.method is missing, fallback to GET.
+              method = options && options.method ? options.method : 'GET';
+              url = resource.toString() ? resource.toString() : '';
+            }
+            // resource is defined
+            // Two possibilities: resource could be either any object with a .toString() function,
+            // or it could be a Request object. If it's a Request, we'll have to clone it, and read
+            // its body asynchronously. We check for the existence of a .method property on the
+            // resource to check whether it is a Request object.
+            if (
+              HTTPDataBundler.getInstance().shouldCollectPayloadForURL(url) &&
+              resource.clone &&
+              resource.text
+            ) {
+              // We clone the request object, as its body can only be read once per instance.
+              // It's important that we do this before the original function is called, as it
+              // cannot be cloned afterwards.
+              request = resource.clone();
+              requestTextPromise = request.text();
+            }
+          }
+        } catch (e) {
+          ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(
+            `Error in fetch() wrapper: ${e}`,
+            false,
+            SEVERITY_ERROR,
+          );
+        }
+
+        // Break out of the try wrapper momentarily to make the original call
+
+        // Can't put this inside finally as const needs to be defined outside it.
+        const promiseFromOriginalFetch = originalFunction.call(
+          this,
+          resource,
+          options,
+        );
+        // not using safePerformanceNow as there is a 75% hit with using it.
+        // We don't want every request to get impacted by this.
+        const rCreatedAt = new Date();
+        promiseFromOriginalFetch
+          .then(async response => {
+            // We wrap the callback in try in order to only catch real fetch failures in the promise's
+            // .catch() call
+            try {
+              const graphqlResponse = response.clone();
+              const httpEventDataResponse = response.clone();
+              const pageVisitErrorResponse = response.clone();
+
+              const gqlError = await GqlErrorValidator.fromFetch(
+                url,
+                options,
+                request,
+                graphqlResponse,
+              );
+
+              const rEndedAt = new Date();
+              const respTime = Math.abs(rEndedAt - rCreatedAt);
+              const [httpEvent, httpData] =
+                await _buildHttpEventDataObjectsForFetch(
+                  request,
+                  httpEventDataResponse,
+                  method,
+                  url,
+                  options,
+                  respTime,
+                  requestTextPromise,
+                  gqlError,
+                );
+
+              let pageVisitEventHTTP = new PageVisitEventHTTP(
+                httpEvent,
+                httpData,
+              );
+              pageVisitEventHTTP.saveHTTPEvent();
+
+              const seq =
+                pageVisitEventHTTP.httpData &&
+                pageVisitEventHTTP.httpData[PV_SEQ_ATT_NAME];
+
+              if (isHttpCodeFailure(response.status)) {
+                saveErrorToPagevisit(
+                  RESPONSE_ERROR_TYPE,
+                  pageVisitErrorResponse,
+                  seq,
+                );
+              }
+
+              if (gqlError) {
+                gqlError.forEach(error =>
+                  saveErrorToPagevisit(GQL_ERROR_TYPE, error, seq),
+                );
+              }
+
+              // helping gc
+              pageVisitEventHTTP = null;
+            } catch (e) {
+              // Catch errors with our logic in the .then() callback above
+              ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(
+                `Error in custom fetch() callback: ${e}`,
+                false,
+                SEVERITY_ERROR,
+              );
+            }
+          })
+          .catch(err => {
+            // Catch errors in the call to the original fetch() implementation
+            handleFetchFailure(err, url);
+          });
+
+        // Can't put this inside finally as linter does not allow return statements inside finally.
+        return promiseFromOriginalFetch;
+      },
+  );
+}
+
+/**
+ * Setting up the wrapper around send functions to try and
+ * catch http errors
+ */
+function setupGlobalXMLHttpWrapper() {
+  const XMLHttp = window.XMLHttpRequest;
+  // The event target needs to have a prototype and have the open function
+  const proto = XMLHttp && XMLHttp.prototype;
+
+  const canWriteOpen = propWriteableOrMadeWriteable(proto, 'open');
+  const canWriteSend = propWriteableOrMadeWriteable(proto, 'send');
+  const canWriteSetHeader = propWriteableOrMadeWriteable(
+    proto,
+    'setRequestHeader',
+  );
+
+  if (canWriteOpen) {
+    // If we can't wrap the XHR.send() function, we need the wrapped .open() function to
+    // set the listener on 'loadend' events.
+    wrapXMLHTTPOpen(proto, !canWriteSend);
+  }
+  if (canWriteSend) {
+    wrapXMLHTTPSend(proto);
+  }
+  if (canWriteSetHeader) {
+    wrapXMLHTTPSetRequestHeader(proto);
+  }
+}
+/**
+ * Monitors all requests
+ */
+function monitorRequests() {
+  setupGlobalXMLHttpWrapper();
+  setupGlobalFetchWrapper();
+}
+
+export { handleFetchFailure, monitorRequests };