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 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?

Kashish Grover · Answer 1 · 2019-07-18T11:02:09.350

256

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'

Debug away!

edited Jul 18 '19 at 11:02

answered Apr 01 '19 at 08:16

Kashish Grover

2,806
1
10
15

32

If you're skimming and see this answer, note that you MUST right-click and `Enable Network Inspect` for it to work. By default, it does not. – Stephen Saucier Jun 24 '19 at 16:38
@SamikshaJagtap I have edited the answer. Take a look :) – Kashish Grover Jul 18 '19 at 11:02
6

Wow, why is this feature hidden by a right click on the main panel. Never knew that existed. Game changer. Json responses weren't showing up...show up straight away on toggle. Thanks! – Matt Apr 27 '20 at 17:19
5

More like why isn't this the default behaviour whenever we visit the Network tab or mark as a setting (checkbox or some sorts) inside that tab! – CyberMew Aug 02 '20 at 09:02
2

You can make it a default by setting the config file: https://github.com/jhen0409/react-native-debugger/blob/master/docs/network-inspect-of-chrome-devtools.md#network-inspect-of-chrome-developer-tools – nicholascm Sep 25 '20 at 03:09
1

@KashishGrover How can I see the network requests for URIs (images) in "Image" components? I mean, I can observe some network request on React Native Debugger but nothing for the images. – honor Sep 28 '20 at 21:19
I think the debugger UI may have changed since this was posted. Where do you right click? – Kyle Clegg Aug 04 '21 at 19:26
1

@KyleClegg right click on the left pane in the UI. I am still seeing the same UI. However they have indeed another way of doing this (permanently) where you edit the config. https://github.com/jhen0409/react-native-debugger/blob/master/docs/network-inspect-of-chrome-devtools.md – Kashish Grover Aug 17 '21 at 14:44
1

Doesn't seem to work with RN Firebase queries. Possibly because they are made from inside a native plugin. Otherwise, this is pretty cool, and yes - should be enabled by default. – TheRealMikeD May 05 '22 at 23:22
it does not show Firebase requests – showtime May 22 '22 at 13:24
i dindn't before that. is there any way to see native request ? – Khurshid Ansari Aug 10 '22 at 11:19
it doesn't log the websocket requests (using SIPjs) – Irfan wani Jul 16 '23 at 05:59
for some weird reason once I Enable the Network Inspector the XHR requests start to throw timeout errors, seems that somehow is blocking the app's connections – Facundo Colombier Aug 16 '23 at 20:43

score 114 · Answer 2 · edited Aug 10 '20 at 20:17

114

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

edited Aug 10 '20 at 20:17

HoldOffHunger

18,769
10
104
133

answered Jun 27 '16 at 22:06

tryangul

1,246
1
8
8

5

After I put that piece of code I am able to see the request in the Developer Console but all my request fail with a 404 status. Anyone has any idea why that might happen? – Peter_Fretter Jan 24 '17 at 09:09
XMLHttpRequest is not defined :( – Swapnil Patwa Jun 10 '17 at 07:44
1

This works. Took this from [Github](https://github.com/facebook/react-native/issues/934#issuecomment-269811544) – frevib Jul 28 '17 at 08:33
1

This doesn't work for me. I use android emulator, and the network tab shows empty even requests are being sent – Ville Miekk-oja Aug 27 '17 at 12:37
22

This doesn't work any more, following error comes up in the console (not sure what change caused this): `Uncaught Error: unsupported BodyInit type at Response.Body._initBody (fetch.js:231) at new Response (fetch.js:390) at XMLHttpRequest.xhr.onload (fetch.js:437)` – Maxim Zubarev Mar 23 '18 at 23:30
2

Works on my side on [React Native Debugger](https://github.com/jhen0409/react-native-debugger) with this one-liner set-up. Thanks a million times, @tryangul – Kaloyan Kosev May 30 '19 at 15:44
This will not work if you going to use `XMLHttpRequest` to upload/download data. – nextt1 Jun 18 '19 at 16:31

score 53 · Answer 3 · answered Mar 22 '17 at 12:48

53

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:

answered Mar 22 '17 at 12:48

Sankalp Singha

4,461
5
39
58

That's awesome! Thank you – DJ Forth May 03 '18 at 15:08
At which point of the original request is this fired on? I am actually thinking of using this as a mechanism to fire refresh tokens if a response has a 401. Is there an issue with that? – tushar747 Jul 19 '18 at 09:07
FANTASTIC Sankalp! I have had trouble getting Reacotron working without crashing my Metro builder. Your solution works great. Even works in React Native Debugger. – mediaguru Jul 30 '18 at 11:34
The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:8081' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute. – Nikhil Mahirrao Nov 14 '18 at 06:28
Awesome. Thank you so much – Mark Jan 18 '19 at 09:23
Where exactly am I supposed to add it in app.js? I added this at the top and I get a render error "GLOBAL is not defined" – Ritik Jangir Mar 21 '23 at 12:54

score 37 · Answer 4 · edited Apr 18 '19 at 19:39

37

I use Reactotron for tracking network request.

edited Apr 18 '19 at 19:39

Denys Kniazhev-Support Ukraine

8,862
7
47
63

answered May 27 '18 at 00:32

Aung Myat Hein

4,018
1
36
42

3

this is actually the best solution out of all answers here (for me).. super easy to set up and don't have all the side effects of using chrome – Blue Bot Sep 29 '18 at 10:08
What are the side effects of using chrome you're worried about? Reactotron uses the Chromium Embedded Framework. – Peter Evan Deal Nov 14 '19 at 15:11
awesome !! thanks you saved me days of search over the net – Alain Apr 06 '20 at 12:49
Mine is connected to device but not catching every requests, only on first load. Why is that? – Jeaf Gilbert Oct 14 '20 at 05:55
As `react-native-reanimated-2` doesn't work in debug mode, this is the only solution that allows me to view the network requests. – bonniss Oct 08 '21 at 06:04

braza · Answer 5 · 2021-10-11T11:12:05.607

26

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

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.

edited Oct 11 '21 at 11:12

answered Jun 20 '20 at 18:39

braza

4,260
1
26
36

3

Dude this lib is awesome ! Thank you – Emidomenge Aug 06 '20 at 13:28
This is awesome. I want these info in json whenever application send request. I found getRequests method which return all request in json but how can i get whenever application send request? – Khurshid Ansari Jun 08 '21 at 09:01
`import NetworkLogger from 'react-native-network-logger'; const MyScreen = () => ;` where shold i place these codes – vivek kn Dec 10 '22 at 07:39
You can put it in any one of your view either as it's own screen or a sub component. Have a look at the example here https://github.com/alexbrazier/react-native-network-logger/blob/master/example/src/App.tsx#L87 – braza Dec 11 '22 at 11:24

score 12 · Answer 6 · answered Jun 06 '17 at 16:05

12

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

answered Jun 06 '17 at 16:05

Jeb

170
1
8

Reactotron seemed to work only if you used external library called apisauce. It doesn't work for normal fetch. So if you want to monitor requests send by external libraries in your app, reactotron is no good. – Ville Miekk-oja Aug 27 '17 at 12:35
1

@VilleMiekk-oja in fact reactotron supports Networking with Fetch since March, it's just the documentation was outdated. I tried it myself, and corrected it on the readme :) – Juan Carlos Alpizar Chinchilla Nov 03 '17 at 14:07
this works excellent; I've seen so many issues with: GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest; – Petrogad Mar 21 '18 at 15:05
1

reactotron is really easy to configure and useful to track network calls of react-native applications – Ram Jun 05 '18 at 18:19

score 11 · Answer 7 · answered Dec 13 '17 at 15:22

11

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

answered Dec 13 '17 at 15:22

Dawid Dereszewski

136
1
6

2

Dawid I have had a major problem trying to figure out why my image uploads from react native produced [object Object]. Just about gave up. I ran across this comment while trying to get network activity in the debugger on another app. I have yet to test out what you said, but I THANK YOU anyway. It's the first decent clue I've gotten on why my uploads were broken. – mediaguru Mar 10 '21 at 00:18

score 9 · Answer 8 · answered Dec 16 '15 at 15:09

9

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.

answered Dec 16 '15 at 15:09

lanan

2,742
3
22
29

What's a "same origin" request, in the context of requests made from a React Native app? One that's on the same domain as the debugger (i.e. probably localhost)? – Mark Amery Dec 16 '15 at 15:11
for my case you have to disable CORS in Chrome to make it work for cross origin. check this chrome plugin :https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=fr – Mouhamed Halloul Jan 29 '16 at 08:57
@MouhamedHalloul can you explain how did you use this plugin? – alexmngn Jun 12 '16 at 19:08

score 8 · Answer 9 · answered Apr 30 '20 at 22:35

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.

UPDATE: Network logs has its own separate tab now "Network Inspector", just of the right side of profiler — Sherif Samir, Apr 04 '23 at 12:27

mradziwon · Answer 10 · 2017-09-14T16:01:33.077

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

score 4 · Answer 11 · answered Apr 20 '22 at 00:16

4

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

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

answered Apr 20 '22 at 00:16

schpet

9,664
6
32
35

score 3 · Answer 12 · answered Dec 30 '15 at 09:43

3

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

answered Dec 30 '15 at 09:43

Ran Yefet

3,167
3
15
12

1

Just tried Charles and it seems to only capture `http://localhost:8081/index.android.bundle?platform=android&dev=true` .. how to make it capture ALL requests? (I am hitting an external api) – jakeforaker Jan 06 '16 at 20:09
Is your external API uses HTTPS? If so, you need to configure Charles a little bit to catch those as well. – Ran Yefet Jan 09 '16 at 11:24
when using android, charles can be a bit problematic to capture outgoing requests. you need to 'manually' configure your simulator to access charles (and last time i tried, going in the config panel wouldnt do the job -- proxy ip needed to be passed in from a command line instantiation). – joe Apr 04 '19 at 17:02

score 3 · Answer 13 · answered May 06 '22 at 22:16

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

GL

score 1 · Answer 14 · answered Jun 14 '21 at 12:15

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

AMAL MOHAN N · Answer 15 · 2023-01-10T08:50:23.237

-2

[edit] you can easily integrate flipper with react native apps and get all the logs like device logs, react native logs, the network inspector, etc. You can install plugins to monitor the redux actions also, there are several other plugins available for flipper. Please make use of this, very handy and user friendly dev tool for react native. https://fbflipper.com/docs/getting-started/react-native/ [10 Jan 2023]

[old answer] 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

edited Jan 10 '23 at 08:50

answered Jun 13 '21 at 11:05

AMAL MOHAN N

1,416
2
14
26

At least at the time I wrote this question, that was only an element inspector, with no support for viewing network requests. Has that changed? This answer doesn't say. – Mark Amery Jun 13 '21 at 17:07

score -27 · Answer 16 · answered Dec 01 '15 at 23:41

-27

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

answered Dec 01 '15 at 23:41

Pramod Mg

2,316
1
11
14

lol why this answer is downvoted so much. i used to do this before I know any devtools is existed. put console.log on response, console.error on catch block, and console.time to estimate request time, and there you go – Abid Khairy Mar 17 '21 at 05:50

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

16 Answers16

Linked