XMLHttpRequest

examples/tracer-web/examples/xml-http-request/index.js

@@ -11,7 +11,7 @@ const webTracerWithZone = new WebTracer({
   plugins: [
     new XMLHttpRequestPlugin({
       ignoreUrls: ['http://localhost:8090/sockjs-node/info'],
-      propagateTraceHeaderUrls: [
+      propagateTraceHeaderCorsUrls: [
         'http://localhost:8090'
       ]
     })

packages/opentelemetry-plugin-xml-http-request/src/types.ts

@@ -17,6 +17,8 @@
 /**
  * method "open" from XMLHttpRequest
  */
+import * as tracing from '@opentelemetry/tracing';
+
 export type OpenFunction = (
   method: string,
   url: string,
@@ -42,14 +44,23 @@ export type SendBody =
   | null;
 
 /**
- * Wrapped XMLHttpRequest
+ * interface to store information in weak map about spans, resources and
+ * callbacks
  */
-export interface XMLHttpRequestWrapped extends XMLHttpRequest {
-  __OT_SPAN_ID?: string;
+export interface XhrMem {
+  // span assigned to xhr
+  span: tracing.Span;
+  // resources created between send and end - possible candidates for
+  // cors preflight requests
+  resourcesCreatedInTheMiddle?: {
+    observer: PerformanceObserver;
+    entries: PerformanceResourceTiming[];
+  };
+  callbackToRemoveEvents?: Function;
 }
 
-export type PropagateTraceHeaderUrl = string | RegExp;
+export type PropagateTraceHeaderCorsUrl = string | RegExp;
 
-export type PropagateTraceHeaderUrls =
-  | PropagateTraceHeaderUrl
-  | PropagateTraceHeaderUrl[];
+export type PropagateTraceHeaderCorsUrls =
+  | PropagateTraceHeaderCorsUrl
+  | PropagateTraceHeaderCorsUrl[];

packages/opentelemetry-plugin-xml-http-request/src/xhr.ts

@@ -35,18 +35,18 @@ import { EventNames } from './enums/EventNames';
 import { Format } from './enums/Format';
 import {
   OpenFunction,
-  PropagateTraceHeaderUrls,
+  PropagateTraceHeaderCorsUrls,
   SendBody,
   SendFunction,
-  XMLHttpRequestWrapped,
+  XhrMem,
 } from './types';
 
 /**
  * XMLHttpRequest config
  */
 export interface XMLHttpRequestPluginConfig extends types.PluginConfig {
   // urls which should include trace headers when origin doesn't match
-  propagateTraceHeaderUrls?: PropagateTraceHeaderUrls;
+  propagateTraceHeaderCorsUrls?: PropagateTraceHeaderCorsUrls;
 }
 
 /**
@@ -61,16 +61,7 @@ export class XMLHttpRequestPlugin extends BasePlugin<XMLHttpRequest> {
   protected _config!: XMLHttpRequestPluginConfig;
 
   private _tasksCount = 0;
-  private _callbackToRemoveEvents: { [key: string]: Function } = {};
-  private _spans: { [key: string]: tracing.Span } = {};
-  // resources created between send and end - possible candidates for
-  // cors preflight requests
-  private _resourcesCreatedInTheMiddle: {
-    [key: string]: {
-      observer: PerformanceObserver;
-      entries: PerformanceResourceTiming[];
-    };
-  } = {};
+  private _xhrMem = new WeakMap<XMLHttpRequest, XhrMem>();
   private _usedResources: { [key: string]: PerformanceResourceTiming[] } = {};
 
   constructor(config: XMLHttpRequestPluginConfig = {}) {
@@ -85,7 +76,8 @@ export class XMLHttpRequestPlugin extends BasePlugin<XMLHttpRequest> {
    * @private
    */
   private _addHeaders(xhr: XMLHttpRequest, span: types.Span) {
-    let propagateTraceHeaderUrls = this._config.propagateTraceHeaderUrls || [];
+    let propagateTraceHeaderUrls =
+      this._config.propagateTraceHeaderCorsUrls || [];
     if (
       typeof propagateTraceHeaderUrls === 'string' ||
       propagateTraceHeaderUrls instanceof RegExp
@@ -155,29 +147,35 @@ export class XMLHttpRequestPlugin extends BasePlugin<XMLHttpRequest> {
   /**
    * will collect information about all resources created
    * between "send" and "end"
-   * @param spanId
+   * @param xhr
    * @param spanName
    * @private
    */
   private _addPossibleCorsPreflightResourceObserver(
-    spanId: string,
+    xhr: XMLHttpRequest,
     spanName: string
   ) {
-    this._resourcesCreatedInTheMiddle[spanId] = {
+    const xhrMem = this._xhrMem.get(xhr);
+    if (!xhrMem) {
+      return;
+    }
+    xhrMem.resourcesCreatedInTheMiddle = {
       observer: new PerformanceObserver(list => {
         const entries = list.getEntries() as PerformanceResourceTiming[];
         entries.forEach(entry => {
           if (
             entry.initiatorType === 'xmlhttprequest' &&
             entry.name === spanName
           ) {
-            this._resourcesCreatedInTheMiddle[spanId].entries.push(entry);
+            if (xhrMem.resourcesCreatedInTheMiddle) {
+              xhrMem.resourcesCreatedInTheMiddle.entries.push(entry);
+            }
           }
         });
       }),
       entries: [],
     };
-    this._resourcesCreatedInTheMiddle[spanId].observer.observe({
+    xhrMem.resourcesCreatedInTheMiddle.observer.observe({
       entryTypes: ['resource'],
     });
   }
@@ -189,9 +187,7 @@ export class XMLHttpRequestPlugin extends BasePlugin<XMLHttpRequest> {
   private _clearResources() {
     if (this._tasksCount === 0) {
       ((otperformance as unknown) as Performance).clearResourceTimings();
-      this._callbackToRemoveEvents = {};
-      this._resourcesCreatedInTheMiddle = {};
-      this._spans = {};
+      this._xhrMem = new WeakMap<XMLHttpRequest, XhrMem>();
       this._usedResources = {};
     }
   }
@@ -235,12 +231,10 @@ export class XMLHttpRequestPlugin extends BasePlugin<XMLHttpRequest> {
    * @param xhr
    * @private
    */
-  private _cleanPreviousSpanInformation(xhr: XMLHttpRequestWrapped) {
-    const existingSpanId = xhr.__OT_SPAN_ID;
-    if (existingSpanId) {
-      const callbackToRemoveEvents = this._callbackToRemoveEvents[
-        existingSpanId
-      ];
+  private _cleanPreviousSpanInformation(xhr: XMLHttpRequest) {
+    const xhrMem = this._xhrMem.get(xhr);
+    if (xhrMem) {
+      const callbackToRemoveEvents = xhrMem.callbackToRemoveEvents;
       if (callbackToRemoveEvents) {
         callbackToRemoveEvents();
       }
@@ -255,7 +249,7 @@ export class XMLHttpRequestPlugin extends BasePlugin<XMLHttpRequest> {
    * @private
    */
   private _createSpan(
-    xhr: XMLHttpRequestWrapped,
+    xhr: XMLHttpRequest,
     url: string,
     method: string
   ): tracing.Span | undefined {
@@ -275,11 +269,11 @@ export class XMLHttpRequestPlugin extends BasePlugin<XMLHttpRequest> {
 
     currentSpan.addEvent(EventNames.METHOD_OPEN);
 
-    const spanId = currentSpan.context().spanId;
-    this._spans[spanId] = currentSpan;
+    this._xhrMem.set(xhr, {
+      span: currentSpan,
+    });
 
     this._cleanPreviousSpanInformation(xhr);
-    xhr.__OT_SPAN_ID = spanId;
 
     return currentSpan;
   }
@@ -314,7 +308,7 @@ export class XMLHttpRequestPlugin extends BasePlugin<XMLHttpRequest> {
         user?: string | null,
         pass?: string | null
       ): void {
-        plugin._createSpan(this as XMLHttpRequestWrapped, url, method);
+        plugin._createSpan(this as XMLHttpRequest, url, method);
 
         return original.call(this, method, url, true, user, pass);
       };
@@ -328,24 +322,23 @@ export class XMLHttpRequestPlugin extends BasePlugin<XMLHttpRequest> {
   protected _patchSend() {
     const plugin = this;
 
-    function endSpan(xhr: XMLHttpRequestWrapped, eventName: string) {
-      const spanId = xhr.__OT_SPAN_ID;
-      const callbackToRemoveEvents = spanId
-        ? plugin._callbackToRemoveEvents[spanId]
-        : undefined;
+    function endSpan(xhr: XMLHttpRequest, eventName: string) {
+      const xhrMem = plugin._xhrMem.get(xhr);
+      if (!xhrMem) {
+        return;
+      }
+      const callbackToRemoveEvents = xhrMem.callbackToRemoveEvents;
 
-      let resourcesCreatedInTheMiddle = spanId
-        ? plugin._resourcesCreatedInTheMiddle[spanId]
-        : undefined;
+      let resourcesCreatedInTheMiddle = xhrMem.resourcesCreatedInTheMiddle;
       let entries;
       if (resourcesCreatedInTheMiddle) {
         entries = resourcesCreatedInTheMiddle.entries.slice();
       }
       if (typeof callbackToRemoveEvents === 'function') {
         callbackToRemoveEvents();
       }
-      const currentSpan = spanId ? plugin._spans[spanId] : undefined;
-      if (currentSpan && spanId) {
+      const currentSpan = xhrMem.span;
+      if (currentSpan) {
         plugin._findResourceAndAddNetworkEvents(currentSpan, entries);
         currentSpan.addEvent(eventName);
 
@@ -378,38 +371,41 @@ export class XMLHttpRequestPlugin extends BasePlugin<XMLHttpRequest> {
       plugin._clearResources();
     }
 
-    function onError(this: XMLHttpRequestWrapped) {
+    function onError(this: XMLHttpRequest) {
       endSpan(this, EventNames.EVENT_ERROR);
     }
 
-    function onTimeout(this: XMLHttpRequestWrapped) {
+    function onTimeout(this: XMLHttpRequest) {
       endSpan(this, EventNames.EVENT_TIMEOUT);
     }
 
-    function onLoad(this: XMLHttpRequestWrapped) {
+    function onLoad(this: XMLHttpRequest) {
       if (this.status < 299) {
         endSpan(this, EventNames.EVENT_LOAD);
       } else {
         endSpan(this, EventNames.EVENT_ERROR);
       }
     }
 
-    function unregister(xhr: XMLHttpRequestWrapped, spanId: string) {
+    function unregister(xhr: XMLHttpRequest) {
       xhr.removeEventListener('load', onLoad);
       xhr.removeEventListener('error', onError);
       xhr.removeEventListener('timeout', onTimeout);
-      delete plugin._callbackToRemoveEvents[spanId];
-      delete xhr.__OT_SPAN_ID;
+      const xhrMem = plugin._xhrMem.get(xhr);
+      if (xhrMem) {
+        delete xhrMem.callbackToRemoveEvents;
+      }
     }
 
     return (original: SendFunction): SendFunction => {
       return function patchSend(this: XMLHttpRequest, body?: SendBody): void {
-        const spanId = (this as XMLHttpRequestWrapped).__OT_SPAN_ID;
-        const currentSpan: types.Span | undefined = spanId
-          ? plugin._spans[spanId]
-          : undefined;
+        const xhrMem = plugin._xhrMem.get(this);
+        if (!xhrMem) {
+          return;
+        }
+        const currentSpan: types.Span = xhrMem.span;
 
-        if (currentSpan && spanId) {
+        if (currentSpan) {
           plugin._tasksCount++;
           currentSpan.addEvent(EventNames.METHOD_SEND);
           const spanName = (currentSpan as tracing.Span).name;
@@ -418,14 +414,15 @@ export class XMLHttpRequestPlugin extends BasePlugin<XMLHttpRequest> {
           this.addEventListener('error', onError);
           this.addEventListener('timeout', onTimeout);
 
-          plugin._callbackToRemoveEvents[spanId] = () => {
-            unregister(this as XMLHttpRequestWrapped, spanId);
-            plugin._resourcesCreatedInTheMiddle[spanId].observer.disconnect();
-            delete plugin._resourcesCreatedInTheMiddle[spanId];
+          xhrMem.callbackToRemoveEvents = () => {
+            unregister(this);
+            if (xhrMem.resourcesCreatedInTheMiddle) {
+              xhrMem.resourcesCreatedInTheMiddle.observer.disconnect();
+              delete xhrMem.resourcesCreatedInTheMiddle;
+            }
           };
           plugin._addHeaders(this, currentSpan);
-
-          plugin._addPossibleCorsPreflightResourceObserver(spanId, spanName);
+          plugin._addPossibleCorsPreflightResourceObserver(this, spanName);
         }
         return original.call(this, body);
       };
@@ -462,9 +459,5 @@ export class XMLHttpRequestPlugin extends BasePlugin<XMLHttpRequest> {
 
     shimmer.unwrap(XMLHttpRequest.prototype, 'open');
     shimmer.unwrap(XMLHttpRequest.prototype, 'send');
-
-    Object.keys(this._callbackToRemoveEvents).forEach(key =>
-      this._callbackToRemoveEvents[key]()
-    );
   }
 }

packages/opentelemetry-plugin-xml-http-request/test/xhr.test.ts

@@ -126,7 +126,7 @@ describe('xhr', () => {
     prepareData = (
       done: any,
       fileUrl: string,
-      propagateTraceHeaderUrls?: any
+      propagateTraceHeaderCorsUrls?: any
     ) => {
       sandbox = sinon.createSandbox();
       sandbox.stub(performance, 'timeOrigin').value(0);
@@ -148,7 +148,7 @@ describe('xhr', () => {
         scopeManager: new ZoneScopeManager(),
         plugins: [
           new XMLHttpRequestPlugin({
-            propagateTraceHeaderUrls,
+            propagateTraceHeaderCorsUrls: propagateTraceHeaderCorsUrls,
           }),
         ],
       });
@@ -179,8 +179,8 @@ describe('xhr', () => {
     };
 
     beforeEach(done => {
-      const propagateTraceHeaderUrls = [window.location.origin];
-      prepareData(done, url, propagateTraceHeaderUrls);
+      const propagateTraceHeaderCorsUrls = [window.location.origin];
+      prepareData(done, url, propagateTraceHeaderCorsUrls);
     });
 
     afterEach(() => {
@@ -346,7 +346,7 @@ describe('xhr', () => {
 
     describe(
       'AND origin does NOT match window.location but match with' +
-        ' propagateTraceHeaderUrls',
+        ' propagateTraceHeaderCorsUrls',
       () => {
         beforeEach(done => {
           clearData();
@@ -378,7 +378,7 @@ describe('xhr', () => {
     );
     describe(
       'AND origin does NOT match window.location And does NOT match' +
-        ' with propagateTraceHeaderUrls',
+        ' with propagateTraceHeaderCorsUrls',
       () => {
         beforeEach(done => {
           clearData();