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

JavascriptGoogle Chrome-DevtoolsReact Native

Javascript Problem Overview

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 this on GitHub (https://github.com/facebook/react-native/issues/4122 and https://github.com/facebook/react-native/issues/934) but I don't entirely understand them. It sounds like I need to undo some of React Native's polyfills and then run some commands with extra debugging flags, and maybe modify some Chrome security settings? And apparently there are some security issues involved in doing this that might make it a terrible idea, but nobody involved in the thread has explicitly stated what they are.

Could somebody provide a step-by-step guide to getting the Network tab working with React Native, as well as an explanation of the security issues involved in doing so?

Javascript Solutions

Solution 1 - Javascript

I'm not sure why no one has pointed out this solution so far. Use React Native Debugger - https://github.com/jhen0409/react-native-debugger! It is the best debugging tool for React Native in my opinion and it gives Network Inspection out of the box.

Take a look at these screenshots.

Right click and select 'Enable Network Inspect' Enabling Network Inspect

Right click and select 'Enable Network Inspect' Enabling Network Inspect

Debug away! Network Inspect in action

Solution 2 - Javascript

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

Solution 3 - Javascript

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:

enter image description here

On the network tab:

enter image description here

Solution 4 - Javascript

I use Reactotron for tracking network request.

enter image description here

Solution 5 - Javascript

If you are looking to debug network requests on a release version of your app you can use the library react-native-network-logger. It lets you monitor and view network requests within the app from a custom debug screen.

List of all requests Single request details
react-native-network-logger list react-native-network-logger details

You can then put this behind a build flag or a network flag to disable it for users in the production app.

Just install it with yarn add react-native-network-logger then add this at the entry point of your app:

import { startNetworkLogging } from 'react-native-network-logger';

startNetworkLogging();
AppRegistry.registerComponent('App', () => App);

And this on a debug screen:

import NetworkLogger from 'react-native-network-logger';

const MyScreen = () => <NetworkLogger />;

Disclaimer: I'm the package author.

Solution 6 - Javascript

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

Solution 7 - Javascript

I was able to debug my requests in Chrome by deleting polyfill that React Native provides after importing React Native.

var React = require('react-native');
delete GLOBAL.XMLHttpRequest;

This worked for me for same origin requests. Not sure if you need to disable CORS in Chrome to make it work for cross origin.

Solution 8 - Javascript

Please be careful with this code.

XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
   GLOBAL.originalXMLHttpRequest : GLOBAL.XMLHttpRequest;

It helps and it's great but it destroys upload. I spend 2 days trying to figure out why uploaded files are sending [object Object] instead of the real file. The reason is a code above.

Use it for regular calls not but for multipart/form-data calls

Solution 9 - Javascript

In the past I used GLOBAL.XMLHttpRequest hack to track my API requests but sometimes it is very slow and didn't work for assets requests. I decided to use Postman’s proxy feature to inspect HTTP communication going out from phone. For details look at the official documentation, but basically, there are three easy steps:

  • Set up the proxy in Postman

  • Check your computer’s IP address($ ifconfig)

  • Configure HTTP proxy on your mobile device in wifi settings

Solution 10 - Javascript

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.

enter image description here

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 enter image description here

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.

Solution 11 - Javascript

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

Solution 12 - Javascript

have you guys tried the react-native debugger which comes with the react-native itself? you can enable this by pressing ctrl + M then you can select the open show inspector / toggle inspector

ios emulator android emulator

Solution 13 - Javascript

At the time I'm answering, the react native inspector has this network section that you can see all the requests, but I recommend using other react native debugger client, because with this one is not that good to debug the requests at a tiny phone screen. (You can open the inspector by shaking your phone or pressing Shift + d or Ctrl + m, and pressing "Toggle Inspector" or "Show Inspector".

react native inspector with opened network tab

Solution 14 - Javascript

these days, Flipper is the move.
https://fbflipper.com/

official announcement about this here:
https://reactnative.dev/blog/2020/03/26/version-0.62

Solution 15 - Javascript

  1. Open Android Studio → App Inspection → Select a process to connect to → Network Inspector
  2. Use the app and execute some requests
  3. Click on Network Inspector Visualization
  4. Observe the new panel of Connection View and Overview with request and response.

enter image description here

GL

Solution 16 - Javascript

Add Debugger in the js where you can see the req or response

Categories
Recommended Javascript Solutions
Recommended Google Chrome-Devtools Solutions
Recommended React Native Solutions

Previous Solution:

How to turn off page breaks in Google Docs?

Google Docs

Next Solution:

How to declare a global variable in React?

ReactjsJavascript Globalize

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMark AmeryView Question on Stackoverflow
Solution 1 - JavascriptKashish GroverView Answer on Stackoverflow
Solution 2 - JavascripttryangulView Answer on Stackoverflow
Solution 3 - JavascriptSankalp SinghaView Answer on Stackoverflow
Solution 4 - JavascriptAung Myat HeinView Answer on Stackoverflow
Solution 5 - JavascriptbrazaView Answer on Stackoverflow
Solution 6 - JavascriptJebView Answer on Stackoverflow
Solution 7 - JavascriptlananView Answer on Stackoverflow
Solution 8 - JavascriptDawid DereszewskiView Answer on Stackoverflow
Solution 9 - JavascriptmradziwonView Answer on Stackoverflow
Solution 10 - JavascriptMuhammed OzdoganView Answer on Stackoverflow
Solution 11 - JavascriptRan YefetView Answer on Stackoverflow
Solution 12 - JavascriptAMAL MOHAN NView Answer on Stackoverflow
Solution 13 - JavascriptJoão PauloView Answer on Stackoverflow
Solution 14 - JavascriptschpetView Answer on Stackoverflow
Solution 15 - JavascriptBraian CoronelView Answer on Stackoverflow
Solution 16 - JavascriptPramod MgView Answer on Stackoverflow