Add perf markers in XMLHttpRequest

Summary:
ChangeLog: [Both] Adds perf markers for `XMLHttpRequest`s

Makes it easier to see JS-based network operations in performance traces.

Reviewed By: zackargyle

Differential Revision: D19903143

fbshipit-source-id: c5ce60163569e003830d8079cb2b580469d5bd5d

Libraries/Network/XMLHttpRequest.js

@@ -12,6 +12,7 @@
 
 const BlobManager = require('../Blob/BlobManager');
 const EventTarget = require('event-target-shim');
+const GlobalPerformanceLogger = require('react-native/Libraries/Utilities/GlobalPerformanceLogger');
 const RCTNetworking = require('./RCTNetworking');
 
 const base64 = require('base64-js');
@@ -132,6 +133,7 @@ class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): any) {
  _headers: Object;
  _lowerCaseResponseHeaders: Object;
  _method: ?string = null;
+ _perfKey: ?string = null;
  _response: string | ?Object;
  _responseType: ResponseType;
  _response: string = '';
@@ -301,6 +303,8 @@ class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): any) {
  responseURL: ?string,
  ): void {
  if (requestId === this._requestId) {
+ this._perfKey != null &&
+ GlobalPerformanceLogger.stopTimespan(this._perfKey);
  this.status = status;
  this.setResponseHeaders(responseHeaders);
  this.setReadyState(this.HEADERS_RECEIVED);
@@ -514,8 +518,20 @@ class XMLHttpRequest extends (EventTarget(...XHR_EVENTS): any) {
  }
 
  const doSend = () => {
- invariant(this._method, 'Request method needs to be defined.');
- invariant(this._url, 'Request URL needs to be defined.');
+ const friendlyName =
+ this._trackingName !== 'unknown' ? this._trackingName : this._url;
+ this._perfKey = 'network_XMLHttpRequest_' + String(friendlyName);
+ GlobalPerformanceLogger.startTimespan(this._perfKey);
+ invariant(
+ this._method,
+ 'XMLHttpRequest method needs to be defined (%s).',
+ friendlyName,
+ );
+ invariant(
+ this._url,
+ 'XMLHttpRequest URL needs to be defined (%s).',
+ friendlyName,
+ );
  RCTNetworking.sendRequest(
  this._method,
  this._trackingName,