noibu-react-native 0.2.1 → 0.2.3

package/dist/monitors/requestMonitor.js

@@ -1,401 +1,386 @@
+import { __awaiter } from 'tslib';
 import 'react-native/Libraries/Network/fetch';
 import { saveErrorToPagevisit } from '../pageVisit/pageVisitEventError.js';
-import { PageVisitEventHTTP, isHttpCodeFailure } from '../pageVisit/pageVisitEventHTTP.js';
-import { propWriteableOrMadeWriteable, replace } from '../utils/object.js';
-import { SEVERITY, PV_SEQ_ATT_NAME, RESPONSE_ERROR_TYPE, GQL_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 ClientConfig from '../api/clientConfig.js';
+import { isHttpCodeFailure, PageVisitEventHTTP } from '../pageVisit/pageVisitEventHTTP.js';
+import { propWriteableOrMadeWriteable, replace, safeEntries } from '../utils/object.js';
 import { HTTPDataBundler } from './httpDataBundler.js';
+import { SEVERITY, FETCH_EXCEPTION_ERROR_TYPE, PV_SEQ_ATT_NAME, RESPONSE_ERROR_TYPE, GQL_ERROR_TYPE, XML_HTTP_REQUEST_ERROR_TYPE, BODY_USED_ERROR, HTTP_RESP_LENGTH_ATT_NAME, HTTP_METHOD_ATT_NAME, HTTP_RESP_CODE_ATT_NAME, URL_ATT_NAME, HTTP_RESP_TIME_ATT_NAME } from '../constants.js';
+import ClientConfig from '../api/clientConfig.js';
 import GqlErrorValidator from './gqlErrorValidator.js';
 import { noibuLog } from '../utils/log.js';
-
-/** @module RequestMonitor */
-// todo no idea why this works but it fixes fetch replacement
+import { tryGetStackTrace, safeTrim } from '../utils/function.js';
+import { promiseAll } from '../utils/polyfills.js';
+import { addSafeEventListener } from '../utils/eventlistener.js';
 
 /**
- * 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} shouldCollectPayload
- * @returns the return from the bundleHTTPData() call
+ * Gets a response text Promise out of Response & headers. Returns reason if bundler decides to drop text.
+ * Due to async nature of text() and async function sent to Promise.all,
+ * our code race competes with client's code consuming the response.
+ * So at this point engine somehow gets access to the original ReadableStream and marks it as locked,
+ * thus client code may throw an error.
  */
-function _handleFetchOnPromiseCompletion(
-  request,
-  response,
-  options,
-  bodyStrings,
-  url,
-  method,
-  shouldCollectPayload,
-) {
-  noibuLog('_handleFetchOnPromiseCompletion', method, url);
-  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,
-    shouldCollectPayload,
-  );
+function consumeResponseAndGetBodyText(response) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (!(response instanceof Response)) {
+            return '';
+        }
+        if (response.bodyUsed) {
+            return BODY_USED_ERROR;
+        }
+        return response.text();
+    });
 }
-
 /**
- * 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 {Promise<string>} requestTextPromise
- * @returns an array in the form [httpEvent, httpData]
+ * Generates new PVEventHTTP
  */
-async function _buildHttpEventDataObjectsForFetch(
-  request,
-  response,
-  method,
-  url,
-  options,
-  respTime,
-  requestTextPromise,
-) {
-  noibuLog('_buildHttpEventDataObjectsForFetch started', method, url);
-  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;
-  // Only get the bodies of the request and response if the URL is one we care about.
-  if (HTTPDataBundler.getInstance().shouldContinueForURL(url)) {
+function getPvEventHttp(status, responseHeaders, method, url, responseTime) {
+    const httpEvent = {
+        [HTTP_METHOD_ATT_NAME]: method,
+        [HTTP_RESP_CODE_ATT_NAME]: status,
+        [URL_ATT_NAME]: url,
+        [HTTP_RESP_TIME_ATT_NAME]: responseTime,
+    };
+    const bundler = HTTPDataBundler.getInstance();
     // add response payload length, if any
-    if (response && response.headers) {
-      const contentLength = HTTPDataBundler.getInstance().contentLength(
-        response.headers,
-      );
-      if (contentLength > 0) {
+    const contentLength = bundler.contentLength(responseHeaders);
+    if (contentLength > 0 && bundler.shouldContinueForURL(url)) {
         httpEvent[HTTP_RESP_LENGTH_ATT_NAME] = contentLength;
-      }
     }
-
-    let responseText = '';
-    const shouldCollectPayload =
-      HTTPDataBundler.getInstance().shouldCollectPayloadForURL(url);
-    if (shouldCollectPayload && response instanceof Response) {
-      noibuLog('_buildHttpEventDataObjectsForFetch collecting response');
-      const droppedResponseText =
-        HTTPDataBundler.getInstance().dropPayloadIfNecessaryFromHeaders(
-          response.headers,
-        );
-      responseText = droppedResponseText || response.clone().text();
-    } else {
-      noibuLog(
-        '_buildHttpEventDataObjectsForFetch not collecting payload, because of',
-        {
-          shouldCollectPayloadForURL:
-            HTTPDataBundler.getInstance().shouldCollectPayloadForURL(url),
-          instanceOfCheck: response instanceof Response,
-        },
-      );
+    return httpEvent;
+}
+/**
+ * Gets headers from request or request options. Handles different scenarios where simple conversion is not possible
+ */
+function getRequestHeaders(request, options) {
+    const headers = safeEntries((request === null || request === void 0 ? void 0 : request.headers) || (options === null || options === void 0 ? void 0 : options.headers));
+    return HTTPDataBundler.headersMapFromIterable(headers);
+}
+/**
+ * Gets response headers.
+ * It is always a Headers object.
+ */
+function getResponseHeaders(response) {
+    const headers = safeEntries(response === null || response === void 0 ? void 0 : response.headers);
+    return HTTPDataBundler.headersMapFromIterable(headers);
+}
+/**
+ * Gets request body from body strings or Request options
+ */
+function getRequestBody(requestText, options) {
+    if (typeof requestText === 'string') {
+        return requestText;
     }
-    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,
-          shouldCollectPayload,
-        ),
-      )
-      .then(httpDataReturn => {
-        httpData = httpDataReturn;
-      });
-  }
-  noibuLog('_buildHttpEventDataObjectsForFetch ended');
-  // This return will await the _handleFetchOnPromiseCompletion() call if necessary,
-  // but won't if not. (See if above).
-  return [httpEvent, httpData];
+    // it's fine if it's falsy or an empty string, we catch that in HTTPDataBundler.getInstance().bundleHTTPData
+    return options === null || options === void 0 ? void 0 : options.body;
+}
+/**
+ * Returns the parameters to pass the PageVisitEventHTTP constructor. Specific to the fetch wrapper.
+ */
+function getHttpDataFromFetch(request, response, method, url, options, isError, requestText, responseText) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (!HTTPDataBundler.getInstance().shouldContinueForURL(url)) {
+            return null;
+        }
+        return HTTPDataBundler.getInstance().bundleHTTPData(url, getRequestHeaders(request, options), getRequestBody(requestText, options), getResponseHeaders(response), responseText, method, isError);
+    });
+}
+/** Clones Response / Request or returns original object if cloning is not possible */
+function cloneResponse(ogResponse) {
+    if (!ogResponse.bodyUsed) {
+        return ogResponse.clone();
+    }
+    return ogResponse; // body consumed already, no http response body for us
 }
-
 /**
  * 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);
+function handleFetchFailure(maybeErr, url) {
+    if (!maybeErr || typeof maybeErr !== 'object') {
+        return;
+    }
+    const err = maybeErr;
+    // we do not need this error if we cannot extract both the message and stack
+    if (!(err === null || err === void 0 ? void 0 : err.message) || !(err === null || err === void 0 ? void 0 : err.stack)) {
+        return;
+    }
+    const errorFromFetch = new Error();
+    errorFromFetch.stack = err.stack;
+    // making sure we have a url
+    const checkedURL = safeTrim(url);
+    const urlMessage = checkedURL ? ` 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
+ * Handles fetch response safely. Reports PageVisitEventHTTP and errorToPagevisit if needed.
  */
-function setupGlobalFetchWrapper() {
-  const proto = global;
-  // Ensure we're able to replace the fetch() function
-  if (!propWriteableOrMadeWriteable(proto, 'fetch')) {
-    noibuLog('setupGlobalFetchWrapper fetch is not writable');
-    return;
-  }
-  noibuLog('setupGlobalFetchWrapper replacing fetch');
-  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.
+function safeHandleFetchResponse(startTime, url, method, options, request) {
+    return (ogResponse) => __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
         try {
-          noibuLog('nbuGlobalFetchWrapper start call', { resource });
-          // 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() : '';
+            if (!ogResponse) {
+                // no idea how, but this happens sometimes, esp if other libs override fetch
+                // logging to track the issue if it becomes widespread
+                return ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(`Error in custom fetch() callback: no response received`, false, SEVERITY.error);
             }
-            // 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
-            ) {
-              noibuLog('nbuGlobalFetchWrapper collecting request object');
-              // 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();
-            } else {
-              noibuLog(
-                'nbuGlobalFetchWrapper not collecting request object, because one of these is false',
-                {
-                  shouldCollectPayloadForURL:
-                    HTTPDataBundler.getInstance().shouldCollectPayloadForURL(
-                      url,
-                    ),
-                  clone: !!resource.clone,
-                  text: !!resource.text,
-                },
-              );
+            const clonedResponse = cloneResponse(ogResponse); // gotta do it as early as possible
+            const graphqlResponse = cloneResponse(clonedResponse); // and two times more for each consumption
+            const httpEventDataResponse = cloneResponse(clonedResponse);
+            const respTime = Date.now() - startTime;
+            const status = clonedResponse.status;
+            const headers = clonedResponse.headers;
+            const gqlError = yield GqlErrorValidator.fromFetch(url, options, request, graphqlResponse);
+            const isHttpError = isHttpCodeFailure(status);
+            const [maybeRequestText, responseText] = yield promiseAll([
+                Promise.resolve((_a = request === null || request === void 0 ? void 0 : request.text) === null || _a === void 0 ? void 0 : _a.call(request)),
+                consumeResponseAndGetBodyText(httpEventDataResponse),
+            ]);
+            const httpEvent = getPvEventHttp(status, headers, method, url, respTime);
+            const httpData = yield getHttpDataFromFetch(request, httpEventDataResponse, method, url, options, isHttpError || !!gqlError, maybeRequestText, responseText);
+            const pageVisitEventHTTP = new PageVisitEventHTTP(httpEvent, httpData, !!gqlError);
+            pageVisitEventHTTP.saveHTTPEvent();
+            const seq = (_b = pageVisitEventHTTP.httpData) === null || _b === void 0 ? void 0 : _b[PV_SEQ_ATT_NAME];
+            if (isHttpError) {
+                // this does not consume response body so no need to clone it
+                saveErrorToPagevisit(RESPONSE_ERROR_TYPE, clonedResponse, seq);
+            }
+            if (gqlError) {
+                gqlError.forEach(error => saveErrorToPagevisit(GQL_ERROR_TYPE, error, seq));
             }
-          }
-        } 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
-
-        noibuLog('nbuGlobalFetchWrapper call original');
-        // 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 => {
-            noibuLog('nbuGlobalFetchWrapper got response');
-            // We wrap the callback in try in order to only catch real fetch failures in the promise's
-            // .catch() call
+        catch (e) {
+            if ((e === null || e === void 0 ? void 0 : e.name) === 'AbortError') {
+                // skip it, as it's somewhat expected
+                return;
+            }
+            const stack = tryGetStackTrace(e);
+            ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(`Error in custom fetch() callback: ${e}${stack}`, false, SEVERITY.error);
+        }
+    });
+}
+/**
+ * Safe function to get method and url from fetch args
+ */
+function getMethodUrlFromFetchArgs(resource, options) {
+    const defaultResource = { method: 'GET', url: '' };
+    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) {
+            return defaultResource;
+        }
+        if (resource instanceof Request && resource.method) {
+            return { method: resource.method, url: resource.url || '' };
+        }
+        return {
+            method: (options === null || options === void 0 ? void 0 : options.method) || 'GET',
+            url: typeof resource.toString === 'function' ? resource.toString() : '',
+        };
+    }
+    catch (e) {
+        ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(`Error in fetch() wrapper: ${e}`, false, SEVERITY.error);
+    }
+    return defaultResource;
+}
+/**
+ * Setting up the wrapper around fetch functions to try and
+ * catch http errors
+ */
+function setupGlobalFetchWrapper(proto) {
+    if (!propWriteableOrMadeWriteable(proto, 'fetch')) {
+        return;
+    }
+    replace(proto, 'fetch', function (originalFunction) {
+        // please don't change the name of this function. we need this stack frame to be nbuWrapper
+        return function nbuWrapper(resource, options) {
+            let request;
+            const { url, method } = getMethodUrlFromFetchArgs(resource, options);
+            if (resource instanceof Request) {
+                /**
+                 * 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 afterward.
+                 */
+                request = resource.clone();
+            }
+            const startTime = Date.now();
+            const promiseFromOriginalFetch = originalFunction.call(this, resource, options);
+            promiseFromOriginalFetch
+                .then(safeHandleFetchResponse(startTime, url, method, options, request))
+                .catch(err => {
+                handleFetchFailure(err, url);
+            });
+            return promiseFromOriginalFetch;
+        };
+    });
+}
+/**
+ * Does a check if data collection is enabled and combines it into HttpDataBundle
+ */
+function getHttpDataFromXhr(xhrObj_1, method_1, url_1, isError_1) {
+    return __awaiter(this, arguments, void 0, function* (xhrObj, method, url, isError, requestPayload = null, responseText) {
+        if (!HTTPDataBundler.getInstance().shouldContinueForURL(url)) {
+            return null;
+        }
+        const responseHeaders = HTTPDataBundler.headersMapFromString(xhrObj.getAllResponseHeaders());
+        return HTTPDataBundler.getInstance().bundleHTTPData(url, xhrObj.noibuRequestHeaders, requestPayload, responseHeaders, responseText, method, isError);
+    });
+}
+/**
+ * on loadend we catch the event and
+ * make sure it was correct
+ */
+function loadendHandler(xhr, startTime, url, method, requestPayload) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        const respTime = Date.now() - startTime;
+        const gqlError = yield GqlErrorValidator.fromXhr(url, xhr);
+        const httpError = isHttpCodeFailure(xhr.status);
+        const responseText = yield HTTPDataBundler.getResponseStringFromXHR(xhr);
+        const httpEvent = getPvEventHttp(xhr.status, HTTPDataBundler.headersMapFromString(xhr.getAllResponseHeaders()), method, url, respTime);
+        const httpData = yield getHttpDataFromXhr(xhr, method, url, httpError || !!gqlError, requestPayload, responseText);
+        const pageVisitEventHTTP = new PageVisitEventHTTP(httpEvent, httpData, gqlError);
+        // Save HTTP Info
+        pageVisitEventHTTP.saveHTTPEvent();
+        const seq = (_a = pageVisitEventHTTP.httpData) === null || _a === void 0 ? void 0 : _a[PV_SEQ_ATT_NAME];
+        if (httpError) {
+            saveErrorToPagevisit(XML_HTTP_REQUEST_ERROR_TYPE, xhr, seq);
+        }
+        if (gqlError) {
+            gqlError.forEach(error => saveErrorToPagevisit(GQL_ERROR_TYPE, error, seq));
+        }
+    });
+}
+/** gets method from xhr */
+function getMethodFromXHR(xhr, payload) {
+    if (xhr.noibuHttpMethod) {
+        return xhr.noibuHttpMethod;
+    }
+    // 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
+    // overriding the send method
+    return payload ? 'POST' : 'GET';
+}
+/**
+ * Wraps the send prototype of the xmlhttp object
+ * 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 wrapXMLHTTPSend(proto) {
+    replace(proto, 'send', function (originalFunction) {
+        return function nbuWrapper(payload) {
             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,
-                );
-
-              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,
-              );
+                const method = getMethodFromXHR(this, payload);
+                const startTime = Date.now();
+                addSafeEventListener(this, 'loadend', () => loadendHandler(this, startTime, this.noibuHttpUrl || this.responseURL, method, payload));
             }
-          })
-          .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;
-      },
-  );
+            catch (e) {
+                const stack = tryGetStackTrace(e);
+                ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(`Error in XHR.send() wrapper: ${e}${stack}`, false, SEVERITY.error);
+            }
+            return originalFunction.call(this, payload);
+        };
+    });
+}
+/**
+ * Wraps the open prototype of the xmlhttp object
+ * 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 wrapXMLHTTPOpen(proto, shouldHandleLoadend) {
+    replace(proto, 'open', function (originalFunction) {
+        return function nbuWrapper(method, url, async = true, user = null, password = null) {
+            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) {
+                    const startTime = Date.now();
+                    addSafeEventListener(this, 'loadend', () => loadendHandler(this, startTime, url, method, null));
+                }
+            }
+            catch (e) {
+                const stack = tryGetStackTrace(e);
+                ClientConfig.getInstance().postNoibuErrorAndOptionallyDisableClient(`Error in XHR.open() wrapper: ${e}${stack}`, 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', function (originalFunction) {
+        return function nbuWrapper(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 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);
+                if (typeof header === 'string') {
+                    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);
+        };
+    });
+}
+/**
+ * Setting up the wrapper around send functions to try and
+ * catch http errors
+ */
+function setupGlobalXMLHttpWrapper() {
+    if (typeof XMLHttpRequest === 'undefined') {
+        return;
+    }
+    const XMLHttp = 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() {
-  noibuLog('monitorRequests started');
-  /** todo: disabling xmlhttp since it seems to duplicate fetch wrapper, but lacks response body capture */
-  // setupGlobalXMLHttpWrapper();
-  setupGlobalFetchWrapper();
-  noibuLog('monitorRequests ended');
+    noibuLog('monitorRequests started');
+    setupGlobalFetchWrapper(global);
+    setupGlobalXMLHttpWrapper();
+    noibuLog('monitorRequests ended');
 }
 
 export { handleFetchFailure, monitorRequests };