Monkey-Patch XMLHttpRequest.send() to send traceparent header and generate XHR span when the this method is called (#142)

* Generate XHR span when send() method is called

* Refactoring

Author: crdgonzalezca

packages/opencensus-web-instrumentation-zone/src/monkey-patching.ts

@@ -14,10 +14,11 @@
  * limitations under the License.
  */
 
-import { XhrWithUrl } from './zone-types';
+import { XhrWithOcWebData } from './zone-types';
 
 export function doPatching() {
   patchXmlHttpRequestOpen();
+  patchXmlHttpRequestSend();
 }
 
 // Patch the `XMLHttpRequest.open` method to add method used for the request.
@@ -38,6 +39,47 @@ function patchXmlHttpRequestOpen() {
     } else {
       open.call(this, method, url, true, null, null);
     }
-    (this as XhrWithUrl)._ocweb_method = method;
+    (this as XhrWithOcWebData)._ocweb_method = method;
   };
 }
+
+/**
+ * Patch `send()` method to detect when it has been detected in order to
+ * dispatch an event and tell the xhr-interceptor that this method has been
+ * called and it can now generate the XHR span and send the traceparent header.
+ * This is necessary, as the XHR span generated in the xhr interceptor should
+ * be created once this method is called.
+ */
+function patchXmlHttpRequestSend() {
+  const open = XMLHttpRequest.prototype.send;
+
+  XMLHttpRequest.prototype.send = function(
+    body?:
+      | string
+      | Document
+      | Blob
+      | ArrayBufferView
+      | ArrayBuffer
+      | FormData
+      | URLSearchParams
+      | ReadableStream<Uint8Array>
+      | null
+  ) {
+    setXhrAttributeHasCalledSend(this);
+    open.call(this, body);
+  };
+}
+
+/**
+ * Function to set attribute in the XHR that points out `send()` has been
+ * called and dispatch the event before the actual `send` is called, then, the
+ * readyState is still OPENED and xhr interceptor will be able to intercept it.
+ *
+ * This is exported to be called in testing as we want to avoid calling the
+ * actual XHR's `send()`.
+ */
+export function setXhrAttributeHasCalledSend(xhr: XMLHttpRequest) {
+  (xhr as XhrWithOcWebData)._ocweb_has_called_send = true;
+  const event = new Event('readystatechange');
+  xhr.dispatchEvent(event);
+}

packages/opencensus-web-instrumentation-zone/src/xhr-interceptor.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { AsyncTask, XhrWithUrl } from './zone-types';
+import { AsyncTask, XhrWithOcWebData } from './zone-types';
 import {
   RootSpan,
   Span,
@@ -38,7 +38,7 @@ const TRACEPARENT_HEADER = 'traceparent';
 /**
  * Map intended to keep track of current XHR objects associated to a span.
  */
-const xhrSpans = new Map<XhrWithUrl, Span>();
+const xhrSpans = new Map<XhrWithOcWebData, Span>();
 
 // Keeps track of the current xhr tasks that are running. This is
 // useful to clear the Performance Resource Timing entries when no
@@ -56,15 +56,23 @@ export const alreadyAssignedPerfEntries = new Set<PerformanceResourceTiming>();
  * Intercepts task as XHR if it is a tracked task and its target object is
  * instance of `XMLHttpRequest`.
  * In case the task is intercepted, sets the Trace Context Header to it and
- * creates a child span related to this XHR in case it is OPENED.
+ * creates a child span related to this XHR in case it is OPENED and `send()`
+ * has been called.
  * In case the XHR is DONE, end the child span.
  */
 export function interceptXhrTask(task: AsyncTask) {
   if (!isTrackedTask(task)) return;
   if (!(task.target instanceof XMLHttpRequest)) return;
 
-  const xhr = task.target as XhrWithUrl;
-  if (xhr.readyState === XMLHttpRequest.OPENED) {
+  const xhr = task.target as XhrWithOcWebData;
+  if (xhr.readyState === XMLHttpRequest.OPENED && xhr._ocweb_has_called_send) {
+    // Only generate the XHR and send the tracer if it is OPENED and the
+    // `send()` method has beend called.
+    // This avoids associating the wrong performance resource timing entries
+    // to the XHR when `send()` is not called right after `open()` is called.
+    // This is because there might be a long gap between `open()` and `send()`
+    // methods are called, and within this gap there might be other HTTP
+    // requests causing more entries to the Performance Resource buffer.
     incrementXhrTaskCount();
     const rootSpan: RootSpan = task.zone.get('data').rootSpan;
     setTraceparentContextHeader(xhr, rootSpan);
@@ -75,7 +83,7 @@ export function interceptXhrTask(task: AsyncTask) {
 }
 
 function setTraceparentContextHeader(
-  xhr: XhrWithUrl,
+  xhr: XhrWithOcWebData,
   rootSpan: RootSpan
 ): void {
   // `__zone_symbol__xhrURL` is set by the Zone monkey-path.
@@ -98,7 +106,7 @@ function setTraceparentContextHeader(
   }
 }
 
-function endXhrSpan(xhr: XhrWithUrl): void {
+function endXhrSpan(xhr: XhrWithOcWebData): void {
   const span = xhrSpans.get(xhr);
   if (span) {
     // TODO: Investigate more to send the the status code a `number` rather
@@ -124,7 +132,7 @@ function maybeClearPerfResourceBuffer(): void {
   }
 }
 
-function joinPerfResourceDataToSpan(xhr: XhrWithUrl, span: Span) {
+function joinPerfResourceDataToSpan(xhr: XhrWithOcWebData, span: Span) {
   const xhrPerfResourceTiming = getXhrPerfomanceData(xhr.responseURL, span);
   if (!xhrPerfResourceTiming) return;
 

packages/opencensus-web-instrumentation-zone/src/zone-types.ts

@@ -39,14 +39,18 @@ export interface OnPageInteractionData {
 }
 
 /**
- * Allows monkey-patching XMLHttpRequest and to obtain the request URL.
+ * Allows monkey-patching XMLHttpRequest and obtain important data for
+ * OpenCensus Web such as the request URL or the HTTP method.
  * `HTMLElement` is necessary when the xhr is captured from the tasks target
  *  as the Zone monkey-patch parses xhrs as `HTMLElement & XMLHttpRequest`.
  */
-export type XhrWithUrl = HTMLElement &
+export type XhrWithOcWebData = HTMLElement &
   XMLHttpRequest & {
     __zone_symbol__xhrURL: string;
     _ocweb_method: string;
+    // Attribute to tell that `send()` method has been called before it sends
+    // any HTTP request.
+    _ocweb_has_called_send: boolean;
   };
 
 /** Type for `window` object with variables OpenCensus Web interacts with. */

packages/opencensus-web-instrumentation-zone/test/test-interaction-tracker.ts

@@ -25,7 +25,10 @@ import {
   InteractionTracker,
   RESET_TRACING_ZONE_DELAY,
 } from '../src/interaction-tracker';
-import { doPatching } from '../src/monkey-patching';
+import {
+  doPatching,
+  setXhrAttributeHasCalledSend,
+} from '../src/monkey-patching';
 import { WindowWithOcwGlobals } from '../src/zone-types';
 import { spanContextToTraceParent } from '@opencensus/web-propagation-tracecontext';
 import { createFakePerfResourceEntry, spyPerfEntryByType } from './util';
@@ -494,8 +497,12 @@ describe('InteractionTracker', () => {
       const xhr = new XMLHttpRequest();
       xhr.onreadystatechange = noop;
       spyOn(xhr, 'send').and.callFake(() => {
+        setXhrAttributeHasCalledSend(xhr);
         setTimeout(() => {
           spyOnProperty(xhr, 'status').and.returnValue(200);
+          // Fake the readyState as DONE so the xhr interceptor knows when the
+          // XHR finished.
+          spyOnProperty(xhr, 'readyState').and.returnValue(XMLHttpRequest.DONE);
           const event = new Event('readystatechange');
           xhr.dispatchEvent(event);
         }, XHR_TIME);
@@ -507,9 +514,6 @@ describe('InteractionTracker', () => {
       });
 
       xhr.open('GET', urlRequest);
-      // Spy on `readystate` property after open, so that way while intercepting
-      // the XHR will detect OPENED and DONE states.
-      spyOnProperty(xhr, 'readyState').and.returnValue(XMLHttpRequest.DONE);
       xhr.send();
     }