[GH-ISSUE #1407 ] Debugging React Native on Android breaks when using Proxyman #1402

Author

Owner

@NghiaTranUIT commented on GitHub (Oct 26, 2022):

Thanks for the update. I will try again to reproduce and fix it this weekend 👍

@NghiaTranUIT commented on GitHub (Oct 26, 2022): Thanks for the update. I will try again to reproduce and fix it this weekend 👍

kerem commented

Author

Owner

@yoniholmes commented on GitHub (Mar 7, 2023):

Hi @Justin-Credible, thanks very much for raising this ticket and sharing your work around. Would you be able to elaborate on your Proxy auto-config solution? Where do you place this code / how is it run?

I'm facing a similar issue. My React Native app is successfully proxying all network traffic to Proxyman only what I believe are the metro bundler calls, /inspector, /message, /status are all resulting in Internal Error 999 and therefore the app returns an error saying that it cannot connect to the development server. ’adb reverse tcp:/8081 tcp:8081’ is not helping - hence would like to try to prevent these calls from proxying through Proxyman.

Many thanks to anyone in advance with any thoughts!

@yoniholmes commented on GitHub (Mar 7, 2023): Hi @Justin-Credible, thanks very much for raising this ticket and sharing your work around. Would you be able to elaborate on your Proxy auto-config solution? Where do you place this code / how is it run? I'm facing a similar issue. My React Native app is successfully proxying all network traffic to Proxyman only what I believe are the metro bundler calls, /inspector, /message, /status are all resulting in Internal Error 999 and therefore the app returns an error saying that it cannot connect to the development server. ’adb reverse tcp:/8081 tcp:8081’ is not helping - hence would like to try to prevent these calls from proxying through Proxyman. Many thanks to anyone in advance with any thoughts!

kerem commented

Author

Owner

@Justin-Credible commented on GitHub (Mar 17, 2023):

@yoniholmes

Sure, it looks like this:

Create a proxy.pac file with the contents of the above post
Change 192.168.1.60:9090 part of the script to be the IP/port of your Proxyman instance
Place proxy.pac on a webserver and ensure it is served with a Content-Type: application/x-ns-proxy-autoconfig response header
Edit the Android device's WiFi settings; set Proxy to Proxy Auto-Config
Enter the full URL to the proxy.pac file and save the changes

From now on, the contents of the proxy.pac script will execute for each URL to determine if it should be passed through the proxy or not. The simple script above will ignore any requests to localhost which should be the metro bundler. Everything else will be proxied.

Hope this helps!

@Justin-Credible commented on GitHub (Mar 17, 2023): @yoniholmes Sure, it looks like this: 1. Create a `proxy.pac` file with the contents of the [above post](https://github.com/ProxymanApp/Proxyman/issues/1407#issuecomment-1291126992) 2. Change `192.168.1.60:9090` part of the script to be the IP/port of your Proxyman instance 3. Place `proxy.pac` on a webserver and ensure it is served with a `Content-Type: application/x-ns-proxy-autoconfig` response header 4. Edit the Android device's WiFi settings; set Proxy to `Proxy Auto-Config` 5. Enter the full URL to the `proxy.pac` file and save the changes From now on, the contents of the `proxy.pac` script will execute for each URL to determine if it should be passed through the proxy or not. The simple script above will ignore any requests to `localhost` which should be the metro bundler. Everything else will be proxied. Hope this helps!

kerem commented

Author

Owner

@yoniholmes commented on GitHub (Mar 17, 2023):

Thanks! I’ll give it a try. I managed to point my wifi config to a server
hosting the pac file but I didn’t serve it with the Content-Type:
application/x-ns-proxy-autoconfig header. Thanks for coming back to me! 🤞

On Fri, 17 Mar 2023 at 21:17, Justin Unterreiner @.***>
wrote:

@yoniholmes https://github.com/yoniholmes

Sure, it looks like this:

Create a proxy.pac file with the contents of the above post
https://github.com/ProxymanApp/Proxyman/issues/1407#issuecomment-1291126992

Change 192.168.1.60:9090 part of the script to be the IP/port of
your Proxyman instance

Place proxy.pac on a webserver and ensure it is served with a Content-Type:
application/x-ns-proxy-autoconfig response header

Edit the Android device's WiFi settings; set Proxy to Proxy
Auto-Config

Enter the full URL to the proxy.pac file and save the changes

From now on, the contents of the proxy.pac script will execute for each
URL to determine if it should be passed through the proxy or not. The
simple script above will ignore any requests to localhost which should be
the metro bundler. Everything else will be proxied.

Hope this helps!

—
Reply to this email directly, view it on GitHub
https://github.com/ProxymanApp/Proxyman/issues/1407#issuecomment-1474410933,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AABNCDOJZK4ADLDNNYUSUDTW4TIGFANCNFSM6AAAAAARKTROMY
.
You are receiving this because you were mentioned.Message ID:
@.***>

@yoniholmes commented on GitHub (Mar 17, 2023): Thanks! I’ll give it a try. I managed to point my wifi config to a server hosting the pac file but I didn’t serve it with the Content-Type: application/x-ns-proxy-autoconfig header. Thanks for coming back to me! 🤞 On Fri, 17 Mar 2023 at 21:17, Justin Unterreiner ***@***.***> wrote: > @yoniholmes <https://github.com/yoniholmes> > > Sure, it looks like this: > > 1. Create a proxy.pac file with the contents of the above post > <https://github.com/ProxymanApp/Proxyman/issues/1407#issuecomment-1291126992> > 2. Change 192.168.1.60:9090 part of the script to be the IP/port of > your Proxyman instance > 3. Place proxy.pac on a webserver and ensure it is served with a Content-Type: > application/x-ns-proxy-autoconfig response header > 4. Edit the Android device's WiFi settings; set Proxy to Proxy > Auto-Config > 5. Enter the full URL to the proxy.pac file and save the changes > > From now on, the contents of the proxy.pac script will execute for each > URL to determine if it should be passed through the proxy or not. The > simple script above will ignore any requests to localhost which should be > the metro bundler. Everything else will be proxied. > > Hope this helps! > > — > Reply to this email directly, view it on GitHub > <https://github.com/ProxymanApp/Proxyman/issues/1407#issuecomment-1474410933>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AABNCDOJZK4ADLDNNYUSUDTW4TIGFANCNFSM6AAAAAARKTROMY> > . > You are receiving this because you were mentioned.Message ID: > ***@***.***> >

kerem commented

Author

Owner

@yoniholmes commented on GitHub (Apr 3, 2023):

I managed to get this working. Steps:

Created an express server, hosting a proxy.pac, returning with a Content-Type: application/x-ns-proxy-autoconfig header, as per the contents shared above, i.e.:

function FindProxyForURL(url, host) {
  if (host.indexOf('localhost') > -1) {
  	return null;
  }
  if (host.indexOf('10.0.2.2') > -1) {
  	return null;
  }

  return "PROXY 192.168.1.60:9090"; // Replaced with my IP address 
}

Within my Android Emulator I disabled Mobile data, to ensure connectivity to the internet went solely through WiFi:

Settings > Network & Internet > Mobile network > Mobile data (switched it off)

I then configured my Wifi Proxy to point to the pac file:

Settings > Network & Internet > AndroidWifi > Pencil icon > Proxy (set to 'Proxy Auto-Config') > Pac URL (set to http://[my IP Address]:8080), note I don't specify proxy.pac in the URL

I then re-ran the 'Override Emulator' script from Proxyman (in Proxyman: Certificate > Install Certificate on Android > Emulators > Override Emulator

After this point all traffic from my Android was passing through Proxyman, and there were no issues with the Metro bundler failing to connect.

@yoniholmes commented on GitHub (Apr 3, 2023): I managed to get this working. Steps: 1. Created an express server, hosting a `proxy.pac`, returning with a `Content-Type: application/x-ns-proxy-autoconfig` header, as per the contents shared above, i.e.: ```js function FindProxyForURL(url, host) { if (host.indexOf('localhost') > -1) { return null; } if (host.indexOf('10.0.2.2') > -1) { return null; } return "PROXY 192.168.1.60:9090"; // Replaced with my IP address } ``` 2. Within my Android Emulator I disabled Mobile data, to ensure connectivity to the internet went solely through WiFi: - _Settings > Network & Internet > Mobile network > Mobile data (switched it off)_ 3. I then configured my Wifi Proxy to point to the pac file: - _Settings > Network & Internet > AndroidWifi > Pencil icon > Proxy (set to 'Proxy Auto-Config') > Pac URL (set to `http://[my IP Address]:8080`)_, note I don't specify proxy.pac in the URL 4. I then re-ran the 'Override Emulator' script from Proxyman (in Proxyman: Certificate > Install Certificate on Android > Emulators > Override Emulator After this point all traffic from my Android was passing through Proxyman, and there were no issues with the Metro bundler failing to connect.

kerem commented

Author

Owner

@yoniholmes commented on GitHub (Apr 5, 2023):

So, while this worked for about a day - and what a glorious day it was - the setup later stopped working. I use a VPN so my IP address changed. But no amount of updating IP addresses have fixed the issue, so I can no longer inspect network traffic with Proxyman with my Android Emulator. I've spent at least a day trying to get it to work - but the Emulator consistently fails to attach to the metro bundler, both with and without the proxy.pac file in use.

Would be great if someone could share and insight or success with using Proxyman with Android. Many thanks in advance.

@yoniholmes commented on GitHub (Apr 5, 2023): So, while this worked for about a day - and what a glorious day it was - the setup later stopped working. I use a VPN so my IP address changed. But no amount of updating IP addresses have fixed the issue, so I can no longer inspect network traffic with Proxyman with my Android Emulator. I've spent at least a day trying to get it to work - but the Emulator consistently fails to attach to the metro bundler, both with and without the `proxy.pac` file in use. Would be great if someone could share and insight or success with using Proxyman with Android. Many thanks in advance.

kerem commented

Author

Owner

@NghiaTranUIT commented on GitHub (Apr 5, 2023):

@yoniholmes do you have any current solution with other tools like Charles Proxy + React Native? Maybe I should look into it and make it easier 🤔

@NghiaTranUIT commented on GitHub (Apr 5, 2023): @yoniholmes do you have any current solution with other tools like Charles Proxy + React Native? Maybe I should look into it and make it easier 🤔

kerem commented

Author

Owner

@yoniholmes commented on GitHub (Apr 5, 2023):

Hi @NghiaTranUIT, thanks. I haven't tried Charles Proxy.

With React Native Debugger I can see most network calls. However, I cannot see network calls from web views (I can with Proxyman on iOS, and once on Android). Also, React Native Debugger doesn't let me modify requests or responses. I really like Scripting with Proxyman, and would love to use it to debug the Android specific bug I'm facing.

Only, as mentioned, I cannot get this to work. To be clear, Android can successfully pass traffic to Proxyman, which I can inspect. But the React Native app fails to connect to the metro bundler, which is a fatal error meaning I cannot test my app.

@yoniholmes commented on GitHub (Apr 5, 2023): Hi @NghiaTranUIT, thanks. I haven't tried Charles Proxy. With React Native Debugger I can see most network calls. However, I cannot see network calls from web views (I can with Proxyman on iOS, and once on Android). Also, React Native Debugger doesn't let me modify requests or responses. I really like Scripting with Proxyman, and would love to use it to debug the Android specific bug I'm facing. Only, as mentioned, I cannot get this to work. To be clear, Android can successfully pass traffic to Proxyman, which I can inspect. But the React Native app fails to connect to the metro bundler, which is a fatal error meaning I cannot test my app.

kerem commented

Author

Owner

@NghiaTranUIT commented on GitHub (Apr 5, 2023):

To intercept traffic from the Webview inside the Android app, you should check this doc: https://docs.proxyman.io/debug-devices/android-device#intercept-traffic-from-embedding-webview

Do you any sample React Native App that I can reproduce it?

@yoniholmes can I use https://reactnative.dev/ to create an app for testing?

@NghiaTranUIT commented on GitHub (Apr 5, 2023): To intercept traffic from the Webview inside the Android app, you should check this doc: https://docs.proxyman.io/debug-devices/android-device#intercept-traffic-from-embedding-webview ----------------- Do you any sample React Native App that I can reproduce it? @yoniholmes can I use https://reactnative.dev/ to create an app for testing?

kerem commented

Author

Owner

@yoniholmes commented on GitHub (Apr 5, 2023):

Re: Webview inpsection
Actually this was working fine, I didn't need to make any further configuration changes

Re: Sample React Native App
Yes that site should get you set up quite quickly. I don't have a sample app for you at the moment, and may not be able to set one up immediately.

@yoniholmes commented on GitHub (Apr 5, 2023): **Re: Webview inpsection** Actually this was working fine, I didn't need to make any further configuration changes **Re: Sample React Native App** Yes that site should get you set up quite quickly. I don't have a sample app for you at the moment, and may not be able to set one up immediately.

kerem commented

Author

Owner

@yoniholmes commented on GitHub (Apr 5, 2023):

These are the errors I get. With Proxyman off, Android works fine.

@yoniholmes commented on GitHub (Apr 5, 2023): These are the errors I get. With Proxyman off, Android works fine. <img src="https://user-images.githubusercontent.com/184589/230048897-cb1068e5-8b8f-42a1-a123-6c9bbecd4089.png" width="400" /> ![IMG_6657](https://user-images.githubusercontent.com/184589/230049026-b0f6a7ab-c3fc-4aaa-883f-a1585b24669c.jpeg)

kerem commented

Author

Owner

@NghiaTranUIT commented on GitHub (Apr 5, 2023):

@yoniholmes Can you try to add this IP to the Bypass list in the Wifi?

You can find it at System Setting -> Wifi -> Details -> Proxy -> Bypass Proxy Setting

@NghiaTranUIT commented on GitHub (Apr 5, 2023): @yoniholmes Can you try to add this IP to the Bypass list in the Wifi? You can find it at System Setting -> Wifi -> Details -> Proxy -> Bypass Proxy Setting ![CleanShot 2023-04-05 at 17 09 54@2x](https://user-images.githubusercontent.com/5878421/230050841-a15b400d-a489-4ffc-9be1-298e2638c458.jpg)

kerem commented

Author

Owner

@yoniholmes commented on GitHub (Apr 5, 2023):

Sure I'll try that and let you know.

@yoniholmes commented on GitHub (Apr 5, 2023): Sure I'll try that and let you know.

kerem commented

Author

Owner

@NghiaTranUIT commented on GitHub (Apr 5, 2023):

Just wondering what Proxyman for macOS version you're using?

I've tried on the latest build, and it seems the Metro is still working fine 🤔 I can update the App.js and hot-reload is still working.

Only warning is Bridge was already shutdown.

@NghiaTranUIT commented on GitHub (Apr 5, 2023): Just wondering what Proxyman for macOS version you're using? I've tried on the latest build, and it seems the Metro is still working fine 🤔 I can update the App.js and hot-reload is still working. - Only warning is `Bridge was already shutdown.` ![Screenshot 2023-04-05 at 17 23 51](https://user-images.githubusercontent.com/5878421/230054079-b5c92d82-bdaa-492d-aa22-5ecc903af5cc.jpg)

kerem commented

Author

Owner

@yoniholmes commented on GitHub (Apr 5, 2023):

Thanks for sharing. I'm using Proxyman 4.5.0 (45000).

Still failing for me after putting 10.0.2.2 into my wifi proxy bypass settings.

I'm not sure whether Expo might play any role – that port 19000 looks to be related to Expo, which is used in the React Native quick start. My project doesn't use Expo, so am not sure whether that's a factor.

I've tried both with and without VPN. Traffic from Android is all proxying to Proxyman, but the metro bundler 10.0.2.2:8081 calls all fail with code 999, Status 'Internal Error'

The message in the 'Response' panel in Proxyman says:

The operation couldn't be completed.
(NIOCore.ChannelError error O.) (code=0)

@yoniholmes commented on GitHub (Apr 5, 2023): Thanks for sharing. I'm using Proxyman 4.5.0 (45000). Still failing for me after putting 10.0.2.2 into my wifi proxy bypass settings. I'm not sure whether Expo might play any role – that port 19000 looks to be related to [Expo](https://expo.dev/), which is used in the [React Native quick start](https://reactnative.dev/docs/environment-setup). My project doesn't use Expo, so am not sure whether that's a factor. I've tried both with and without VPN. Traffic from Android is all proxying to Proxyman, but the [metro bundler](https://reactnative.dev/docs/troubleshooting) 10.0.2.2:8081 calls all fail with code 999, Status 'Internal Error' The message in the 'Response' panel in Proxyman says: ``` The operation couldn't be completed. (NIOCore.ChannelError error O.) (code=0) ```

kerem commented

Author

Owner

@NghiaTranUIT commented on GitHub (Apr 5, 2023):

@yoniholmes I found a solution for React Native via Metro Bundler 👍

Android Emulator

Open Proxyman -> Certificate -> Install for Android -> Emulator -> Click on the "Revert the Proxy"
Open Android Emulator -> Setting App -> Network -> Wifi -> Find a way to change the proxy
Change the HTTP Proxy manually by using the Proxyman IP & Port
Before saving, enter the localhost in the bypass Proxy List ✅

Done
The Bridge Was shutdown warning is gone ✅

Android Device

Open Android Emulator -> Setting App -> Network -> Wifi -> Find a way to change the proxy
Change the HTTP Proxy manually by using the Proxyman IP & Port
Before saving, enter the your IP in the bypass Proxy List ✅ . In your case, it's 10.0.2.2
Done

@NghiaTranUIT commented on GitHub (Apr 5, 2023): @yoniholmes I found a solution for React Native via Metro Bundler 👍 ### Android Emulator 1. Open Proxyman -> Certificate -> Install for Android -> Emulator -> Click on the "Revert the Proxy" 2. Open Android Emulator -> Setting App -> Network -> Wifi -> Find a way to change the proxy 3. Change the HTTP Proxy manually by using the Proxyman IP & Port 4. Before saving, enter the `localhost` in the bypass Proxy List ✅ ![CleanShot 2023-04-05 at 22 28 12 2@2x](https://user-images.githubusercontent.com/5878421/230129476-4bd5d1a0-c3c5-4c73-bb79-81f14a071e63.jpg) 5. Done 6. `The Bridge Was shutdown` warning is gone ✅ ### Android Device 1. Open Android Emulator -> Setting App -> Network -> Wifi -> Find a way to change the proxy 2. Change the HTTP Proxy manually by using the Proxyman IP & Port 3. Before saving, enter the `your IP` in the bypass Proxy List ✅ . In your case, it's `10.0.2.2` 4. Done

kerem commented

Author

Owner

@yoniholmes commented on GitHub (Apr 5, 2023):

Hi @NghiaTranUIT, yes! Thank you very much, I now have Android working with Proxyman. Truly appreciated, was stuck on this for a long time!

After making the manual WiFI proxy changes within Android (I'd switched off mobile data previously, so the only network I was using as the Emulator's WiFi network), along with the bypass settings (I added "localhost,10.0.2.2" to be sure, but I can test the difference later), then I could run my app, no metro bundler connectivity issues, and I could inspect network traffic from my app. 🎉

Without adding the res/xml/network_security_config.xml, the metro bundler would still connect, and I could see the domains that my app was calling, but I could not inspect them. After restoring the network_security_config.xml file, I could then run my Android app, no metro bundler issues, and I could inspect the calls being made from the app.

Thanks again & hope you enjoy the rest of your week!

@yoniholmes commented on GitHub (Apr 5, 2023): Hi @NghiaTranUIT, yes! Thank you very much, I now have Android working with Proxyman. Truly appreciated, was stuck on this for a long time! After making the manual WiFI proxy changes within Android (I'd switched off mobile data previously, so the only network I was using as the Emulator's WiFi network), along with the bypass settings (I added "localhost,10.0.2.2" to be sure, but I can test the difference later), then I could run my app, no metro bundler connectivity issues, and I could inspect network traffic from my app. 🎉 Without adding the `res/xml/network_security_config.xml`, the metro bundler would still connect, and I could see the domains that my app was calling, but I could not inspect them. After restoring the `network_security_config.xml` file, I could then run my Android app, no metro bundler issues, and I could inspect the calls being made from the app. Thanks again & hope you enjoy the rest of your week!

kerem commented

Author

Owner

@NghiaTranUIT commented on GitHub (Apr 6, 2023):

Awesome, I will add my instruction to the React Native document page.

@NghiaTranUIT commented on GitHub (Apr 6, 2023): Awesome, I will add my instruction to the [React Native](https://docs.proxyman.io/debug-devices/react-native) document page.

kerem commented

Author

Owner

@coofzilla commented on GitHub (Feb 15, 2024):

I was having a similar issue. Does the automated setup work with react-native ? Basically pressing this override emulator or do you have to manually add it in the actual settings of the emulator?

Also, do you have to add it to both settings?

Referencing this automated setup.

Current setup:

but then I get the same like above:

I tried those steps; but, still facing the same issue :/

Got it fixed

Can someone enlighten me as to why that is needed ? 🤔

@coofzilla commented on GitHub (Feb 15, 2024): I was having a similar issue. Does the automated setup work with `react-native` ? Basically pressing this `override emulator` or do you have to manually add it in the actual settings of the emulator? Also, do you have to add it to _both_ settings? Referencing this automated setup. ![image](https://github.com/ProxymanApp/Proxyman/assets/75731066/1e572ff4-f03c-4238-9ad2-1f266734a319) Current setup: ![image](https://github.com/ProxymanApp/Proxyman/assets/75731066/6dd1fae4-b50b-4948-be17-4c1b51892751) but then I get the same like above: ![image](https://github.com/ProxymanApp/Proxyman/assets/75731066/46a17e0a-0af4-4180-9438-9cebc73a526a) I tried those steps; but, still facing the same issue :/ **Got it fixed** ![image](https://github.com/ProxymanApp/Proxyman/assets/75731066/3788bf3d-8297-456d-bbbd-4f32ab73078b) Can someone enlighten me as to why that is needed ? 🤔

kerem commented

Author

Owner

@NghiaTranUIT commented on GitHub (Feb 15, 2024):

@coofzilla:

Does the automated setup work with react-native ?

Yes, it's.

Basically pressing this override emulator or do you have to manually add it in the actual settings of the emulator?

You only either use the Emulator or manual setting for Android devices. Don't need to use twice.

Also, do you have to add it to both settings?

If you mean the step 3 that you modify the network.xml, it's required.

@NghiaTranUIT commented on GitHub (Feb 15, 2024): @coofzilla: > Does the automated setup work with react-native ? Yes, it's. > Basically pressing this override emulator or do you have to manually add it in the actual settings of the emulator? You only either use the Emulator or manual setting for Android devices. Don't need to use twice. > Also, do you have to add it to both settings? If you mean the step 3 that you modify the `network.xml`, it's required.

kerem commented

Author

Owner

@coofzilla commented on GitHub (Feb 15, 2024):

@NghiaTranUIT Thank you for the response, the only issue I have now is, when I quit proxyman. I have to undo everything to get it to work normally again. Conversely, setting up, I have to redo everything I just undid such as setting up all the local host stuff. Is that intended?

@coofzilla commented on GitHub (Feb 15, 2024): @NghiaTranUIT Thank you for the response, the only issue I have now is, when I quit proxyman. I have to undo everything to get it to work normally again. Conversely, setting up, I have to redo everything I just undid such as setting up all the local host stuff. Is that intended?

kerem commented

Author

Owner

@NghiaTranUIT commented on GitHub (Feb 15, 2024):

Yes, you have to revert all proxy settings if you don't use Proxyman on your emulator.

Please click on the Revert Button at the end 👍

Proxyman uses the adb command line to modify your Android emulator.

@NghiaTranUIT commented on GitHub (Feb 15, 2024): Yes, you have to revert all proxy settings if you don't use Proxyman on your emulator. Please click on the Revert Button at the end 👍 <img width="537" alt="Screenshot 2024-02-15 at 09 06 45" src="https://github.com/ProxymanApp/Proxyman/assets/5878421/5bf0783e-4ad7-47ca-97d4-97467eee8489"> -------- Proxyman uses the `adb` command line to modify your Android emulator.

kerem commented

Author

Owner

@MariuzM commented on GitHub (Jul 16, 2024):

I don’t know on Android with RN+Expo nothing works for me :(

And tried again

Tried new emulator and just follow the steps for RN but nothing works

@MariuzM commented on GitHub (Jul 16, 2024): I don’t know on Android with RN+Expo nothing works for me :( <img width="1378" alt="image" src="https://github.com/user-attachments/assets/49f3a686-91cd-4a2f-8f48-0e1e89955917"> And tried again <img width="877" alt="image" src="https://github.com/user-attachments/assets/3591cd79-34d6-4674-b21b-032ccf2f8920"> <img width="397" alt="image" src="https://github.com/user-attachments/assets/bc6aa8ad-e715-4ec9-b897-3f87637a281e"> Tried new emulator and just follow the steps for RN but nothing works

kerem commented

Author

Owner

@wijskinner commented on GitHub (Aug 29, 2024):

Really struggling here as well. Network traffic all going through but metro telling me to do one.

@wijskinner commented on GitHub (Aug 29, 2024): Really struggling here as well. Network traffic all going through but metro telling me to do one. <img width="1372" alt="image" src="https://github.com/user-attachments/assets/ffee8d2d-2ea3-4193-b975-261e3ef5f887"> <img width="450" alt="image" src="https://github.com/user-attachments/assets/86ba642f-b4b4-49b6-8f6f-ae2e470f4d34"> <img width="450" alt="image" src="https://github.com/user-attachments/assets/ddd7e105-b31c-4c15-b790-991fb44f9ac9">

kerem commented

Author

Owner

@NghiaTranUIT commented on GitHub (Aug 30, 2024):

@wijskinner if you don't mind, can you share with me a sample Metro React Native project that I can reproduce?

Maybe the Getting Started project from Metro will work?

@NghiaTranUIT commented on GitHub (Aug 30, 2024): @wijskinner if you don't mind, can you share with me a sample Metro React Native project that I can reproduce? Maybe the Getting Started project from Metro will work?

kerem commented

Author

Owner

@NghiaTranUIT commented on GitHub (Aug 30, 2024):

@wijskinner from what I know, React Native (Expo) is working fine with Proxyman, and Metro is deprecated, right?

On the React Native website, I don't see any Setup for Metro anymore.

@NghiaTranUIT commented on GitHub (Aug 30, 2024): @wijskinner from what I know, React Native (Expo) is working fine with Proxyman, and Metro is deprecated, right? On the React Native website, I don't see any Setup for Metro anymore.

kerem commented

Author

Owner

@wijskinner commented on GitHub (Aug 30, 2024):

@NghiaTranUIT Thanks for response. They have fairly recently switched to recommending expo as the default setup. Metro is just the bundler that react-native and expo uses under the hood to enable live bundling/reloading of the underlying javascript. There are a LOT of non expo react-native projects out there as back in the day there were a lot of restrictions on what you could do with a non ejected expo project. It is virtually impossible to switch to expo on a large codebase that didn't start with it.

With regards to metro - there isn't a setup as such. It is included with a normal react native setup. I'm guessing the difference between expo bundler and vanilla metro will be to do with how it handles ports and reverse proxying etc on android.

Setup for RN app without expo is still in the docs https://reactnative.dev/docs/getting-started-without-a-framework

@wijskinner commented on GitHub (Aug 30, 2024): @NghiaTranUIT Thanks for response. They have fairly recently switched to recommending expo as the default setup. Metro is just the bundler that react-native and expo uses under the hood to enable live bundling/reloading of the underlying javascript. There are a LOT of non expo react-native projects out there as back in the day there were a lot of restrictions on what you could do with a non ejected expo project. It is virtually impossible to switch to expo on a large codebase that didn't start with it. With regards to metro - there isn't a setup as such. It is included with a normal react native setup. I'm guessing the difference between expo bundler and vanilla metro will be to do with how it handles ports and reverse proxying etc on android. Setup for RN app without expo is still in the docs https://reactnative.dev/docs/getting-started-without-a-framework

kerem commented

Author

Owner

@wijskinner commented on GitHub (Sep 6, 2024):

@NghiaTranUIT any update on this?

@wijskinner commented on GitHub (Sep 6, 2024): @NghiaTranUIT any update on this?

kerem commented

Author

Owner

@NghiaTranUIT commented on GitHub (Sep 15, 2024):

@wijskinner not yet, let me investigate the RN Metro with Proxyman and get back to you 👍

@NghiaTranUIT commented on GitHub (Sep 15, 2024): @wijskinner not yet, let me investigate the RN Metro with Proxyman and get back to you 👍

kerem commented

Author

Owner

@NghiaTranUIT commented on GitHub (Sep 15, 2024):

@wijskinner @Justin-Credible good news: Here is the solution 🎉

Please note that this issue is not Proxyman's bug. It also happens on Charles Proxy.

React Native - Metro - iOS app

No issue so far, Proxyman can connect to Metro bundler without issue.
Make sure to install the certificate on iOS Simulator (Certificate menu -> Install for iOS -> Simulator), so it can decrypt HTTPS traffic.

React Native - Metro - Android Emulator

Open Proxyman -> Tools menu -> Map Remote
Add this config:

Rule: http://10.0.2.2:8081
Check on "Include all subpath"
Select ANY Method
Protocol: http
Host: 127.0.0.1
Port: 8081
Done

Certificate menu -> Install for Android -> Emulator -> Click on Override Emulator -> It auto set the Proxy and install the certificate in 1 click
Reload your Metro bundler
Done: No Metro Bundler error ✅

If you'd like to decrypt HTTPS on your Android Emulator, make sure to add the network.xml config to your Android project.

@NghiaTranUIT commented on GitHub (Sep 15, 2024): @wijskinner @Justin-Credible good news: Here is the solution 🎉 Please note that this issue is not Proxyman's bug. It also happens on Charles Proxy. ### React Native - Metro - iOS app - No issue so far, Proxyman can connect to Metro bundler without issue. - Make sure to install the certificate on iOS Simulator (Certificate menu -> Install for iOS -> Simulator), so it can decrypt HTTPS traffic. ![Screenshot 2024-09-15 at 9 41 06 AM](https://github.com/user-attachments/assets/03cf7670-736e-4afb-85df-a4f02a20f1b7) ### React Native - Metro - Android Emulator 1. Open Proxyman -> Tools menu -> Map Remote 2. Add this config: - Rule: http://10.0.2.2:8081 - Check on "Include all subpath" - Select ANY Method - Protocol: http - Host: 127.0.0.1 - Port: 8081 - Done ![Screenshot 2024-09-15 at 11 25 53 AM](https://github.com/user-attachments/assets/3050cad8-f5f4-4ed3-8fc2-7c698617c1aa) 3. Certificate menu -> Install for Android -> Emulator -> Click on `Override Emulator` -> It auto set the Proxy and install the certificate in 1 click 4. Reload your Metro bundler 5. Done: No Metro Bundler error ✅ ![Proxyman decrypts HTTPS from React Native Android Metro Bundler](https://github.com/user-attachments/assets/027604fc-8828-4ce9-b3c3-8d2470ba5732) ---------------- If you'd like to decrypt HTTPS on your Android Emulator, make sure to add the `network.xml` config to your Android project.

kerem commented

Author

Owner

@NghiaTranUIT commented on GitHub (Sep 15, 2024):

I will add some logic to automatically fix this issue in build v5.9.0, so it can work out of the box. No need to use Map Remote 👍

@NghiaTranUIT commented on GitHub (Sep 15, 2024): I will add some logic to automatically fix this issue in build v5.9.0, so it can work out of the box. No need to use Map Remote 👍

kerem commented

https://github.com/user-attachments/assets/de9d93b1-a13a-4dab-a44a-c273a3d468fc

Author

Owner

@NghiaTranUIT commented on GitHub (Sep 15, 2024):

cc @wijskinner @Justin-Credible @MariuzM @coofzilla @yoniholmes

If you don't mind, let's try this Beta build: https://download.proxyman.io/beta/Proxyman_5.8.0_Fix_React_native_with_metro_bundler_for_android.dmg

Changelog

Fix the Metro Bundler issue ("Unable to load script, ...") when using Android Emulator with Proxyman
✅ Work out of the box. No need to define a Map Remote, as a previous solution (https://github.com/ProxymanApp/Proxyman/issues/1407#issuecomment-2351361641)
Just start the Android yarn android and it works
If you'd like to decrypt the HTTPS traffic, make sure to install the certificate on your Android by following the Certificate menu -> Install for Android -> Emulator

Video

@NghiaTranUIT commented on GitHub (Sep 15, 2024): cc @wijskinner @Justin-Credible @MariuzM @coofzilla @yoniholmes If you don't mind, let's try this Beta build: https://download.proxyman.io/beta/Proxyman_5.8.0_Fix_React_native_with_metro_bundler_for_android.dmg ### Changelog - Fix the Metro Bundler issue ("Unable to load script, ...") when using Android Emulator with Proxyman - ✅ Work out of the box. No need to define a Map Remote, as a previous solution (https://github.com/ProxymanApp/Proxyman/issues/1407#issuecomment-2351361641) - Just start the Android `yarn android` and it works - If you'd like to decrypt the HTTPS traffic, make sure to install the certificate on your Android by following the Certificate menu -> Install for Android -> Emulator ### Video https://github.com/user-attachments/assets/de9d93b1-a13a-4dab-a44a-c273a3d468fc

kerem commented

Author

Owner

@wijskinner commented on GitHub (Sep 27, 2024):

Sorry just caught up here. Will try that build and report back. Thanks a bunch for looking at this.

@wijskinner commented on GitHub (Sep 27, 2024): Sorry just caught up here. Will try that build and report back. Thanks a bunch for looking at this.

kerem commented