Allow setting a custom performance logger in XMLHttpRequest

Summary: Changelog: [Added] Added custom method `setPerformanceLogger` to `XMLHttpRequest` Reviewed By: lunaleaps Differential Revision: D23129945 fbshipit-source-id: 7a295945eee2b2f81dc0a46f764ffb1d9b14af15
facebook · Sep 3, 2020 · 57b10f7 · 57b10f7
1 parent b90f4d9
commit 57b10f7
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 3 deletions.
diff --git a/Libraries/Network/XMLHttpRequest.js b/Libraries/Network/XMLHttpRequest.js
@@ -10,9 +10,11 @@
 
 'use strict';
 
+import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
+
 const BlobManager = require('../Blob/BlobManager');
 const EventTarget = require('event-target-shim');
-const GlobalPerformanceLogger = require('react-native/Libraries/Utilities/GlobalPerformanceLogger');
+const GlobalPerformanceLogger = require('../Utilities/GlobalPerformanceLogger');
 const RCTNetworking = require('./RCTNetworking');
 
 const base64 = require('base64-js');
@@ -141,6 +143,7 @@ class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): any) {
   _timedOut: boolean = false;
   _trackingName: string = 'unknown';
   _incrementalEvents: boolean = false;
+  _performanceLogger: IPerformanceLogger = GlobalPerformanceLogger;
 
   static setInterceptor(interceptor: ?XHRInterceptor) {
     XMLHttpRequest._interceptor = interceptor;
@@ -302,7 +305,7 @@ class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): any) {
   ): void {
     if (requestId === this._requestId) {
       this._perfKey != null &&
-        GlobalPerformanceLogger.stopTimespan(this._perfKey);
+        this._performanceLogger.stopTimespan(this._perfKey);
       this.status = status;
       this.setResponseHeaders(responseHeaders);
       this.setReadyState(this.HEADERS_RECEIVED);
@@ -447,6 +450,14 @@ class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): any) {
     return this;
   }
 
+  /**
+   * Custom extension for setting a custom performance logger
+   */
+  setPerformanceLogger(performanceLogger: IPerformanceLogger): XMLHttpRequest {
+    this._performanceLogger = performanceLogger;
+    return this;
+  }
+
   open(method: string, url: string, async: ?boolean): void {
     /* Other optional arguments are not supported yet */
     if (this.readyState !== this.UNSENT) {
@@ -519,7 +530,7 @@ class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): any) {
       const friendlyName =
         this._trackingName !== 'unknown' ? this._trackingName : this._url;
       this._perfKey = 'network_XMLHttpRequest_' + String(friendlyName);
-      GlobalPerformanceLogger.startTimespan(this._perfKey);
+      this._performanceLogger.startTimespan(this._perfKey);
       invariant(
         this._method,
         'XMLHttpRequest method needs to be defined (%s).',

diff --git a/Libraries/Network/__tests__/XMLHttpRequest-test.js b/Libraries/Network/__tests__/XMLHttpRequest-test.js
@@ -9,8 +9,13 @@
  */
 
 'use strict';
+
 jest.unmock('../../Utilities/Platform');
+jest.mock('../../Utilities/GlobalPerformanceLogger');
+
 const Platform = require('../../Utilities/Platform');
+const GlobalPerformanceLogger = require('../../Utilities/GlobalPerformanceLogger');
+const createPerformanceLogger = require('../../Utilities/createPerformanceLogger');
 let requestId = 1;
 
 function setRequestId(id) {
@@ -71,6 +76,8 @@ describe('XMLHttpRequest', function() {
     xhr.addEventListener('load', handleLoad);
     xhr.addEventListener('loadend', handleLoadEnd);
     xhr.addEventListener('readystatechange', handleReadyStateChange);
+
+    jest.clearAllMocks();
   });
 
   afterEach(() => {
@@ -238,4 +245,52 @@ describe('XMLHttpRequest', function() {
       'Content-Type: text/plain; charset=utf-8\r\n' + 'Content-Length: 32',
     );
   });
+
+  it('should log to GlobalPerformanceLogger if a custom performance logger is not set', () => {
+    xhr.open('GET', 'blabla');
+    xhr.send();
+
+    expect(GlobalPerformanceLogger.startTimespan).toHaveBeenCalledWith(
+      'network_XMLHttpRequest_blabla',
+    );
+    expect(GlobalPerformanceLogger.stopTimespan).not.toHaveBeenCalled();
+
+    setRequestId(8);
+    xhr.__didReceiveResponse(requestId, 200, {
+      'Content-Type': 'text/plain; charset=utf-8',
+      'Content-Length': '32',
+    });
+
+    expect(GlobalPerformanceLogger.stopTimespan).toHaveBeenCalledWith(
+      'network_XMLHttpRequest_blabla',
+    );
+  });
+
+  it('should log to a custom performance logger if set', () => {
+    const performanceLogger = createPerformanceLogger();
+    jest.spyOn(performanceLogger, 'startTimespan');
+    jest.spyOn(performanceLogger, 'stopTimespan');
+
+    xhr.setPerformanceLogger(performanceLogger);
+
+    xhr.open('GET', 'blabla');
+    xhr.send();
+
+    expect(performanceLogger.startTimespan).toHaveBeenCalledWith(
+      'network_XMLHttpRequest_blabla',
+    );
+    expect(GlobalPerformanceLogger.startTimespan).not.toHaveBeenCalled();
+    expect(performanceLogger.stopTimespan).not.toHaveBeenCalled();
+
+    setRequestId(9);
+    xhr.__didReceiveResponse(requestId, 200, {
+      'Content-Type': 'text/plain; charset=utf-8',
+      'Content-Length': '32',
+    });
+
+    expect(performanceLogger.stopTimespan).toHaveBeenCalledWith(
+      'network_XMLHttpRequest_blabla',
+    );
+    expect(GlobalPerformanceLogger.stopTimespan).not.toHaveBeenCalled();
+  });
 });