How can I view network requests (for debugging) in React Native?

Question

I\'d like to view my network requests in React Native to help me debug - ideally in the \'Network\' tab of Chrome\'s devtools.

There are some closed issues about thi

Answer 1

I know this is an old question, but there's a much safer way to do this now that does not require disabling CORS or altering the React Native source code. You can use a third party library called Reactotron that not only tracks API calls (using the network plugin), but also can track your Redux store, and Sagas with additional setup:

https://github.com/infinitered/reactotron https://github.com/infinitered/reactotron/blob/master/docs/plugin-networking.md

Answer 2

I suggest using Charles to inspect your network requests. It's really good and provide more visibility and allows you to do advanced stuff.

http://charlesproxy.com

Answer 3

This is what I've been using in the entry point of my app

const _XHR = GLOBAL.originalXMLHttpRequest ?  
    GLOBAL.originalXMLHttpRequest :           
    GLOBAL.XMLHttpRequest                     

XMLHttpRequest = _XHR

EDIT: frevib linked to more concise syntax below. Thanks frevib!

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

Explanation:

GLOBAL.originalXMLHttpRequest refers the Chrome Dev Tools copy of XHR. It is provided by RN as an escape hatch. Shvetusya's solution will only work if the dev tools are open and thus providing XMLHttpRequest.

EDIT: You will need to allow cross origin requests when in debugger mode. With chrome you can use this handy plugin.

EDIT: Read about the RN github issue that lead me to this solution

Answer 4

I use the following in my app ( Add this in your main app.js entry point file ) :

// To see all the requests in the chrome Dev tools in the network tab.
XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
    GLOBAL.originalXMLHttpRequest :
    GLOBAL.XMLHttpRequest;

  // fetch logger
global._fetch = fetch;
global.fetch = function (uri, options, ...args) {
  return global._fetch(uri, options, ...args).then((response) => {
    console.log('Fetch', { request: { uri, options, ...args }, response });
    return response;
  });
};

The best thing is that it also shows the fetch logs in the console as well which are well formatted.

Screenshot:

On the network tab:

Answer 5

If you have an android phone or emulator,

• npx react-native start

Then open the Android Studio.

Open the android folder of your project as a Android Studio Project.

Click that blue icon which it is Android Profiler

After the Android Profiler start, you can add your app via grey plus icon near the SESSIONS label

Now you can inspect networking via this tool. You can see triangles that shows your network activity.

Please check this for more info about inspecting network traffic.

Answer 6

I use Reactotron for tracking network request.