Summary:
This diff enables network inspection for WebSocket APIs, so by now XMLHttpRequest, Fetch and WebSocket are all supported. Android and iOS are both supported.
This diff monkey-patches the RCTWebSocketModule which WebSocket API builds on, and now it is able to intercept all WebSocket requests when app is running. The intercepted information of a WebSocket includes url, protocols, status, messages (sent and received), close reason, server close event and server error information, etc.
Reviewed By: davidaurelio
Differential Revision: D3641770
fbshipit-source-id: 393df0da74ed95b1fd60e38b0d67ed61b3dd5ff3
Summary: In previous `XHRInterceptor`, it sometimes crashes when restarting the network inspector because the id of the XHR objects are not unique all time. Fix this in diff by adding a global id "generator" for all intercepted xhr objects in order to make it safe across inspector restarts.
Reviewed By: davidaurelio
Differential Revision: D3641624
fbshipit-source-id: f9a1589f278023243aa182d3da93ce69c985587c
Summary: It sometimes happens that there are already some existing `XMLHttpRequest` objects before we turn on the network inspector. So it is a must to check whether a `XMLHttpRequest` object has a property `_index` to determine if it should be tracked.
Reviewed By: davidaurelio
Differential Revision: D3635184
fbshipit-source-id: a5552d7244c994b0fe782ac35baae39ec7488494
Summary:
This diff adds a detail view for the network inspector. When pressing one item in the network flow list, a popup scrollView with detailed information about the network request will be shown. More interesting, the detail information is shown in real time, which means the detail information will be updated dynamically as soon as the network request is updated (maybe receiving a response after waiting).
Also have made sure this works on both Android and iOS.
Reviewed By: davidaurelio
Differential Revision: D3627566
fbshipit-source-id: e868d0c0287d392018b9fa64fce53b4c4b3d76d9
Summary:
This diff adds a UI to display network information flows in the inspector tool (Android and iOS both supported):
- uses a ListView to show network flows, always scrolling to the latest item when a new network request occurs.
- displays the network requests as soon as they were created.
- highlights the selection row and toggles events to log the detailed intercepted information. (Next diff will draw UIs for this).
Follow-up:
- Will add one detail view to show all valuable information about a network request, after user clicks on one item in the ListView.
- Add more tabs in the detail view, ideally looking like the chrome network panel.
Reviewed By: davidaurelio
Differential Revision: D3598900
fbshipit-source-id: 5ec9ade6d13e3a9110db105fafbc7ba52adc515d
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
Konstantin Raev
Jan Kassens
Tim Yung
Siqi Liu