Skip to content

Commit

Permalink
fix(react-native): pass the protocol from bundle URL to HMR client on…
Browse files Browse the repository at this point in the history
… Android (#48970)

Summary:
We've noticed that the HMR on Android doesn't seem to be connecting when using a HTTPS-proxied Metro instance, where the proxy is hosted through Cloudflare. This is only an issue on Android - not iOS - and likely caused by the HMR Client not being set up properly on Android.

- On Android, we run `.setup('android', <bundleEntryPath>, <proxiedMetroHost>, <proxiedMetroPort>, <hmrEnabled>)` in the [**react/devsupport/DevSupportManagerBase.java**](https://github.com/facebook/react-native/blob/53d94c3abe3fcd2168b512652bc0169956bffa39/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevSupportManagerBase.java#L689-L691) file.
- On iOS, we run `[self.callableJSModules invokeModule:@"HMRClient" method:@"setup" withArgs:@[ RCTPlatformName, path, host, RCTNullIfNil(port), @(isHotLoadingEnabled), scheme ]];` in the [**React/CoreModules
/RCTDevSettings.mm**](https://github.com/facebook/react-native/blob/53d94c3abe3fcd2168b512652bc0169956bffa39/packages/react-native/React/CoreModules/RCTDevSettings.mm#L488-L491) file.

Notice how Android does not pass in the scheme/protocol of the bundle URL, while iOS actually does? Unfortunately, because the default protocol (`http`) mismatches on Android when using HTTPS proxies, we actually try to connect the HMR client over `http` instead of `https` - which is rejected by Cloudflare's infrastructure even before we can redirect or mitigate this issue.

This change adds scheme propagation to Android, exactly like we do on iOS for the HMR Client.

## Changelog:

[ANDROID] [FIXED] Pass the bundle URL protocol when setting up HMR client on Android

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests

Pull Request resolved: #48970

Test Plan: It's a little bit hard to test this out yourself, since you'd need a HTTPS-based proxy and reject HTTP connections for HTTPS/WSS Websocket requests.

Reviewed By: fabriziocucci

Differential Revision: D68711137

Pulled By: javache

fbshipit-source-id: 230c1c91c8189c0a109d20defe085966ac8f5721
  • Loading branch information
byCedric authored and facebook-github-bot committed Jan 27, 2025
1 parent e05a273 commit ba894c9
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 1 deletion.
1 change: 1 addition & 0 deletions packages/react-native/ReactAndroid/api/ReactAndroid.api
Original file line number Diff line number Diff line change
Expand Up @@ -2223,6 +2223,7 @@ public abstract interface class com/facebook/react/devsupport/HMRClient : com/fa
public abstract fun enable ()V
public abstract fun registerBundle (Ljava/lang/String;)V
public abstract fun setup (Ljava/lang/String;Ljava/lang/String;Ljava/lang/String;IZ)V
public abstract fun setup (Ljava/lang/String;Ljava/lang/String;Ljava/lang/String;IZLjava/lang/String;)V
}

public final class com/facebook/react/devsupport/InspectorFlags {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -685,10 +685,12 @@ private void resetCurrentContext(@Nullable ReactContext reactContext) {
URL sourceUrl = new URL(getSourceUrl());
String path = sourceUrl.getPath().substring(1); // strip initial slash in path
String host = sourceUrl.getHost();
String scheme = sourceUrl.getProtocol();
int port = sourceUrl.getPort() != -1 ? sourceUrl.getPort() : sourceUrl.getDefaultPort();
mCurrentReactContext
.getJSModule(HMRClient.class)
.setup("android", path, host, port, mDevSettings.isHotModuleReplacementEnabled());
.setup(
"android", path, host, port, mDevSettings.isHotModuleReplacementEnabled(), scheme);
} catch (MalformedURLException e) {
showNewJavaError(e.getMessage(), e);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,20 @@ public interface HMRClient extends JavaScriptModule {
*/
void setup(String platform, String bundleEntry, String host, int port, boolean isEnabled);

/**
* Enable the HMRClient so that the client will receive updates from Metro.
*
* @param platform The platform in which HMR updates will be enabled. Should be "android".
* @param bundleEntry The path to the bundle entry file (e.g. index.ios.bundle).
* @param host The host that the HMRClient should communicate with.
* @param port The port that the HMRClient should communicate with on the host.
* @param isEnabled Whether HMR is enabled initially.
* @param scheme The protocol that the HMRClient should communicate with on the host (defaults to
* http).
*/
void setup(
String platform, String bundleEntry, String host, int port, boolean isEnabled, String scheme);

/** Registers an additional JS bundle with HMRClient. */
void registerBundle(String bundleUrl);

Expand Down

0 comments on commit ba894c9

Please sign in to comment.