Intercept XMLHttpRequest network operations and gather their information in inspector tool
Summary:
This diff
- creates `XHRInterceptor` to intercept all XMLHttpRequest network operations in React Native by monkey-patching.
- enables `XHRInterceptor` in RN development tool "inspector".
This interception and inspector tool work well on both Android and iOS. And this supports interception on any network API based on XMLHttpRequest, especially the Fetch API.
By now, we can intercept 12 information fields of a XMLHttpRequest including method, url, data sent, status, response type, response size, requestHeaders, responseHeaders, response, responseURL, responseType and timeout.
Follow-up:
- Will add UIs in the inspector on top of this diff, to display all the network operation information. (Not in this diff just to make this shorter)
- Will extend this to gather other valuable information towards one XMLHttpRequest.
- Should support other network request APIs like WebSocket.
Reviewed By: davidaurelio
Differential Revision: D3598873
fbshipit-source-id: 3221050ab2ebd876a718fc326646c344d0944a5f
2016-07-27 19:17:03 +00:00
|
|
|
/**
|
|
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
|
|
* All rights reserved.
|
|
|
|
*
|
|
|
|
* This source code is licensed under the BSD-style license found in the
|
|
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
|
|
*
|
|
|
|
* @providesModule XHRInterceptor
|
|
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
const XMLHttpRequest = require('XMLHttpRequest');
|
|
|
|
const originalXHROpen = XMLHttpRequest.prototype.open;
|
|
|
|
const originalXHRSend = XMLHttpRequest.prototype.send;
|
|
|
|
const originalXHRSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
|
|
|
|
|
|
|
|
var openCallback;
|
|
|
|
var sendCallback;
|
|
|
|
var requestHeaderCallback;
|
|
|
|
var headerReceivedCallback;
|
|
|
|
var responseCallback;
|
|
|
|
|
|
|
|
var isInterceptorEnabled = false;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* A network interceptor which monkey-patches XMLHttpRequest methods
|
|
|
|
* to gather all network requests/responses, in order to show their
|
|
|
|
* information in the React Native inspector development tool.
|
|
|
|
* This supports interception with XMLHttpRequest API, including Fetch API
|
|
|
|
* and any other third party libraries that depend on XMLHttpRequest.
|
|
|
|
*/
|
|
|
|
const XHRInterceptor = {
|
|
|
|
/**
|
|
|
|
* Invoked before XMLHttpRequest.open(...) is called.
|
|
|
|
*/
|
|
|
|
setOpenCallback(callback) {
|
|
|
|
openCallback = callback;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Invoked before XMLHttpRequest.send(...) is called.
|
|
|
|
*/
|
|
|
|
setSendCallback(callback) {
|
|
|
|
sendCallback = callback;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Invoked after xhr's readyState becomes xhr.HEADERS_RECEIVED.
|
|
|
|
*/
|
|
|
|
setHeaderReceivedCallback(callback) {
|
|
|
|
headerReceivedCallback = callback;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Invoked after xhr's readyState becomes xhr.DONE.
|
|
|
|
*/
|
|
|
|
setResponseCallback(callback) {
|
|
|
|
responseCallback = callback;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Invoked before XMLHttpRequest.setRequestHeader(...) is called.
|
|
|
|
*/
|
|
|
|
setRequestHeaderCallback(callback) {
|
|
|
|
requestHeaderCallback = callback;
|
|
|
|
},
|
|
|
|
|
|
|
|
isInterceptorEnabled() {
|
|
|
|
return isInterceptorEnabled;
|
|
|
|
},
|
|
|
|
|
|
|
|
enableInterception() {
|
|
|
|
if (isInterceptorEnabled) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
// Override `open` method for all XHR requests to intercept the request
|
|
|
|
// method and url, then pass them through the `openCallback`.
|
|
|
|
XMLHttpRequest.prototype.open = function(method, url) {
|
2016-08-02 15:23:53 +00:00
|
|
|
if (openCallback) {
|
|
|
|
openCallback(method, url, this);
|
|
|
|
}
|
Intercept XMLHttpRequest network operations and gather their information in inspector tool
Summary:
This diff
- creates `XHRInterceptor` to intercept all XMLHttpRequest network operations in React Native by monkey-patching.
- enables `XHRInterceptor` in RN development tool "inspector".
This interception and inspector tool work well on both Android and iOS. And this supports interception on any network API based on XMLHttpRequest, especially the Fetch API.
By now, we can intercept 12 information fields of a XMLHttpRequest including method, url, data sent, status, response type, response size, requestHeaders, responseHeaders, response, responseURL, responseType and timeout.
Follow-up:
- Will add UIs in the inspector on top of this diff, to display all the network operation information. (Not in this diff just to make this shorter)
- Will extend this to gather other valuable information towards one XMLHttpRequest.
- Should support other network request APIs like WebSocket.
Reviewed By: davidaurelio
Differential Revision: D3598873
fbshipit-source-id: 3221050ab2ebd876a718fc326646c344d0944a5f
2016-07-27 19:17:03 +00:00
|
|
|
originalXHROpen.apply(this, arguments);
|
|
|
|
};
|
|
|
|
|
|
|
|
// Override `setRequestHeader` method for all XHR requests to intercept
|
2016-07-28 21:01:51 +00:00
|
|
|
// the request headers, then pass them through the `requestHeaderCallback`.
|
Intercept XMLHttpRequest network operations and gather their information in inspector tool
Summary:
This diff
- creates `XHRInterceptor` to intercept all XMLHttpRequest network operations in React Native by monkey-patching.
- enables `XHRInterceptor` in RN development tool "inspector".
This interception and inspector tool work well on both Android and iOS. And this supports interception on any network API based on XMLHttpRequest, especially the Fetch API.
By now, we can intercept 12 information fields of a XMLHttpRequest including method, url, data sent, status, response type, response size, requestHeaders, responseHeaders, response, responseURL, responseType and timeout.
Follow-up:
- Will add UIs in the inspector on top of this diff, to display all the network operation information. (Not in this diff just to make this shorter)
- Will extend this to gather other valuable information towards one XMLHttpRequest.
- Should support other network request APIs like WebSocket.
Reviewed By: davidaurelio
Differential Revision: D3598873
fbshipit-source-id: 3221050ab2ebd876a718fc326646c344d0944a5f
2016-07-27 19:17:03 +00:00
|
|
|
XMLHttpRequest.prototype.setRequestHeader = function(header, value) {
|
2016-08-02 15:23:53 +00:00
|
|
|
if (requestHeaderCallback) {
|
|
|
|
requestHeaderCallback(header, value, this);
|
|
|
|
}
|
Intercept XMLHttpRequest network operations and gather their information in inspector tool
Summary:
This diff
- creates `XHRInterceptor` to intercept all XMLHttpRequest network operations in React Native by monkey-patching.
- enables `XHRInterceptor` in RN development tool "inspector".
This interception and inspector tool work well on both Android and iOS. And this supports interception on any network API based on XMLHttpRequest, especially the Fetch API.
By now, we can intercept 12 information fields of a XMLHttpRequest including method, url, data sent, status, response type, response size, requestHeaders, responseHeaders, response, responseURL, responseType and timeout.
Follow-up:
- Will add UIs in the inspector on top of this diff, to display all the network operation information. (Not in this diff just to make this shorter)
- Will extend this to gather other valuable information towards one XMLHttpRequest.
- Should support other network request APIs like WebSocket.
Reviewed By: davidaurelio
Differential Revision: D3598873
fbshipit-source-id: 3221050ab2ebd876a718fc326646c344d0944a5f
2016-07-27 19:17:03 +00:00
|
|
|
originalXHRSetRequestHeader.apply(this, arguments);
|
|
|
|
};
|
|
|
|
|
|
|
|
// Override `send` method of all XHR requests to intercept the data sent,
|
|
|
|
// register listeners to intercept the response, and invoke the callbacks.
|
|
|
|
XMLHttpRequest.prototype.send = function(data) {
|
2016-08-02 15:23:53 +00:00
|
|
|
if (sendCallback) {
|
|
|
|
sendCallback(data, this);
|
|
|
|
}
|
Intercept XMLHttpRequest network operations and gather their information in inspector tool
Summary:
This diff
- creates `XHRInterceptor` to intercept all XMLHttpRequest network operations in React Native by monkey-patching.
- enables `XHRInterceptor` in RN development tool "inspector".
This interception and inspector tool work well on both Android and iOS. And this supports interception on any network API based on XMLHttpRequest, especially the Fetch API.
By now, we can intercept 12 information fields of a XMLHttpRequest including method, url, data sent, status, response type, response size, requestHeaders, responseHeaders, response, responseURL, responseType and timeout.
Follow-up:
- Will add UIs in the inspector on top of this diff, to display all the network operation information. (Not in this diff just to make this shorter)
- Will extend this to gather other valuable information towards one XMLHttpRequest.
- Should support other network request APIs like WebSocket.
Reviewed By: davidaurelio
Differential Revision: D3598873
fbshipit-source-id: 3221050ab2ebd876a718fc326646c344d0944a5f
2016-07-27 19:17:03 +00:00
|
|
|
if (this.addEventListener) {
|
|
|
|
this.addEventListener('readystatechange', () => {
|
2016-08-02 15:23:53 +00:00
|
|
|
if (!isInterceptorEnabled) {
|
|
|
|
return;
|
|
|
|
}
|
Intercept XMLHttpRequest network operations and gather their information in inspector tool
Summary:
This diff
- creates `XHRInterceptor` to intercept all XMLHttpRequest network operations in React Native by monkey-patching.
- enables `XHRInterceptor` in RN development tool "inspector".
This interception and inspector tool work well on both Android and iOS. And this supports interception on any network API based on XMLHttpRequest, especially the Fetch API.
By now, we can intercept 12 information fields of a XMLHttpRequest including method, url, data sent, status, response type, response size, requestHeaders, responseHeaders, response, responseURL, responseType and timeout.
Follow-up:
- Will add UIs in the inspector on top of this diff, to display all the network operation information. (Not in this diff just to make this shorter)
- Will extend this to gather other valuable information towards one XMLHttpRequest.
- Should support other network request APIs like WebSocket.
Reviewed By: davidaurelio
Differential Revision: D3598873
fbshipit-source-id: 3221050ab2ebd876a718fc326646c344d0944a5f
2016-07-27 19:17:03 +00:00
|
|
|
if (this.readyState === this.HEADERS_RECEIVED) {
|
|
|
|
const contentTypeString = this.getResponseHeader('Content-Type');
|
|
|
|
const contentLengthString =
|
|
|
|
this.getResponseHeader('Content-Length');
|
|
|
|
let responseContentType, responseSize;
|
|
|
|
if (contentTypeString) {
|
|
|
|
responseContentType = contentTypeString.split(';')[0];
|
|
|
|
}
|
|
|
|
if (contentLengthString) {
|
|
|
|
responseSize = parseInt(contentLengthString, 10);
|
|
|
|
}
|
2016-08-02 15:23:53 +00:00
|
|
|
if (headerReceivedCallback) {
|
|
|
|
headerReceivedCallback(
|
|
|
|
responseContentType,
|
|
|
|
responseSize,
|
|
|
|
this.getAllResponseHeaders(),
|
|
|
|
this,
|
|
|
|
);
|
|
|
|
}
|
Intercept XMLHttpRequest network operations and gather their information in inspector tool
Summary:
This diff
- creates `XHRInterceptor` to intercept all XMLHttpRequest network operations in React Native by monkey-patching.
- enables `XHRInterceptor` in RN development tool "inspector".
This interception and inspector tool work well on both Android and iOS. And this supports interception on any network API based on XMLHttpRequest, especially the Fetch API.
By now, we can intercept 12 information fields of a XMLHttpRequest including method, url, data sent, status, response type, response size, requestHeaders, responseHeaders, response, responseURL, responseType and timeout.
Follow-up:
- Will add UIs in the inspector on top of this diff, to display all the network operation information. (Not in this diff just to make this shorter)
- Will extend this to gather other valuable information towards one XMLHttpRequest.
- Should support other network request APIs like WebSocket.
Reviewed By: davidaurelio
Differential Revision: D3598873
fbshipit-source-id: 3221050ab2ebd876a718fc326646c344d0944a5f
2016-07-27 19:17:03 +00:00
|
|
|
}
|
|
|
|
if (this.readyState === this.DONE) {
|
2016-08-02 15:23:53 +00:00
|
|
|
if (responseCallback) {
|
|
|
|
responseCallback(
|
|
|
|
this.status,
|
|
|
|
this.timeout,
|
|
|
|
this.response,
|
|
|
|
this.responseURL,
|
|
|
|
this.responseType,
|
|
|
|
this,
|
|
|
|
);
|
|
|
|
}
|
Intercept XMLHttpRequest network operations and gather their information in inspector tool
Summary:
This diff
- creates `XHRInterceptor` to intercept all XMLHttpRequest network operations in React Native by monkey-patching.
- enables `XHRInterceptor` in RN development tool "inspector".
This interception and inspector tool work well on both Android and iOS. And this supports interception on any network API based on XMLHttpRequest, especially the Fetch API.
By now, we can intercept 12 information fields of a XMLHttpRequest including method, url, data sent, status, response type, response size, requestHeaders, responseHeaders, response, responseURL, responseType and timeout.
Follow-up:
- Will add UIs in the inspector on top of this diff, to display all the network operation information. (Not in this diff just to make this shorter)
- Will extend this to gather other valuable information towards one XMLHttpRequest.
- Should support other network request APIs like WebSocket.
Reviewed By: davidaurelio
Differential Revision: D3598873
fbshipit-source-id: 3221050ab2ebd876a718fc326646c344d0944a5f
2016-07-27 19:17:03 +00:00
|
|
|
}
|
|
|
|
}, false);
|
|
|
|
}
|
|
|
|
originalXHRSend.apply(this, arguments);
|
|
|
|
};
|
|
|
|
isInterceptorEnabled = true;
|
|
|
|
},
|
|
|
|
|
|
|
|
// Unpatch XMLHttpRequest methods and remove the callbacks.
|
|
|
|
disableInterception() {
|
|
|
|
if (!isInterceptorEnabled) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
isInterceptorEnabled = false;
|
|
|
|
XMLHttpRequest.prototype.send = originalXHRSend;
|
|
|
|
XMLHttpRequest.prototype.open = originalXHROpen;
|
|
|
|
XMLHttpRequest.prototype.setRequestHeader = originalXHRSetRequestHeader;
|
|
|
|
responseCallback = null;
|
|
|
|
openCallback = null;
|
|
|
|
sendCallback = null;
|
|
|
|
headerReceivedCallback = null;
|
|
|
|
requestHeaderCallback = null;
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
module.exports = XHRInterceptor;
|