React Native Debugger prevents network requests - react-native

I'm working on a React Native app, testing in an android emulator. I've used the standalone React Native Debugger app as well as the debugger that opens in Chrome. In the Chrome window, the Network tab shows no activity, so that's no help. In the standalone debugger, the same is true until you right-click and choose Enable Network Inspect. The problem I'm having is that after I enable network inspecting in the debugger, all network requests fail - the inspector shows their status going from Pending to Canceled after a few seconds. I can see in my server logs that no requests are coming in. It's like debugger itself is somehow blocking the requests.
I've set up adb to run as root. When I run react-native run-android the output includes Running adb -s emulator-5554 reverse tcp:8081 tcp:8081, so I think things are starting up fine. The network requests from the app (login etc.) work fine (a typical URL would be http://10.0.2.2:2080/api/LoginScreenController/GetIdentityStatus), until I choose "enable network inspect" in the debugger, at which point all network requests fail as described above.
Any suggestions would be appreciated.

I know that I'm too late but perhaps it will save time for somebody.
During the update of the react-native, I did update the version of the react-native-reanimated from v1 => v2, and after it, I faced the same behavior.
Version 2 requires to enable Hermes engine if it won't be enabled then all the requests will be in pending status

Related

React Native Network Request Failed randomly (HTTPS + URL)

So I have this strange error with React Native, where randomly network requests hangs.
This can be provoked by either listening to a remote audio file, or creating a new user and logging into the app.
This is an issue for all React Native versions at least over 0.59 (havent tested below that).
So to give a bit of background:
When I navigate to a new tab, I load data for that tab. Randomly it will just hang, and give a Network Request Failed with no further information. Once that arrives, and I navigate from and back to the screen it starts working again, until a couple minutes later where it will randomly hang one request.
Tried putting an aggressive timeout on it to provoke an early escape, but seems the native layer has to throw a Network Request Failed for it to start working again.
I've been biting nails for weeks trying to debug this issue, as it's limiting the release of the application.

react-devtools for react-native

Recently I started developing in react-native. When trying to debug using the react-devtools extension on the browser (Chrome) I only get access to the console, because all the components and elements are the ones displayed in the devtools web-page (http://localhost:8081/debugger-ui/)
So now I am trying using the react-native standalone version but it is "waiting for React to connect.."
and I get a message at the bottom saying "The server is listening on the port 8097".
I don't know much about ports but it looks to me that the application is on one port (8081) whereas the react-devtools is listening to another (8097).
I tried using adb reverse tcp:8097 tcp:8097 before running the react-devtools but it made no difference.
How do I check what port my app is listening to?
How can I make the standalone devtools run?
And if anyone can link me to a good documentation about ports for people with no background it would be very nice as well.
you are on the right track, after assigning port 8097.
Run Command+d to open the development menu and it is automatically detected by react-devtools.

React native - console logging with remote debugging

Tried to do a bit of research without finding a result, however:
I am connecting to my development server over the same wifi network and using hot reloading to update react native Application on physical device, however I can’t seem to find a way to display the console output like I normally would through the temrinal. Normally I would build my app with physical cable and display log through the console and use react-native log-android.
What’s the way to show console logging when connecting wirelessly?
TIA.
have you tried the option Debug Js remotely, which opens a new tab in the browser and from there if you press f12 and go to developer tools ,in the console tab there you can view all the console log statements. And to start Debug Js remotely, you shake the phone and the option will be displayed. I hope it helps.

How can I see an actual error from server (react native)?

I send a request:
And get an error:
How can I see details of this error?
You can use the debugger to look at all of your Network requests.
The answer to this question will allow you to view your requests.
(Assuming you're on iOS) - Once you've added the code and your application is running, click on Hardware > Shake Gesture and then select Debug JS Remotely.
Once the debugger opens, you should start to see your requests on the Network tab.

Stop exp from switching to LAN URL when tunneling

When trying to run exp start --tunnel in a react-native project, I often see the warning:
22:15:31 [exp] Your URL is: exp://192.168.200.83:19000
....
22:15:31 [exp] Switched to a LAN URL because the tunnel appears to be down. Only devices in the same network can access the app. Restart with exp start --tunnel to try reconnecting.
This is a problem since none of my devices or the AVD can connect to this URL to download the project.
The problem does not seem to related to any firewall settings as it does not occur every time (just very consistently). When the error does not happen, I get a URL that I can work with that looks like:
22:44:38 [exp] Your URL is: exp://en-ux3.myexpousername.myapp.exp.direct:80
Is there something that can be done about this to get it to stop switching? What causes this switching exactly? Is there some way to get devices to be able to use this URL instead (I have an android device connected to same wifi, but seems to be unable to download the project from the LAN URL)?
** Totally new to react-native and expo, so if I am missing evidence of any common debugging steps for this kind of problem, please let me know what they may be in the comments so I can update the question.
UPDATE:
A similar question to this is addressed in the expo forums: https://forums.expo.io/t/switched-to-a-lan-url-because-the-tunnel-appears-to-be-down-only-devices-in-the-same-network-can-access-the-app-you-can-restart-the-project-to-try-reconnecting/4483.
I was having the message
Switched to a LAN URL because the tunnel appears to be down. Only devices in the same network can access the app. You can restart the project to try reconnecting.
And I've solved it closing Visual Studio (then pressing the Restart button from Expo XDE)