Commit Graph
5 Commits
Author SHA1 Message Date
Cedric van Putten 652c74104a fix(dev-middleware): create custom message handler for synthetic page (#43559)
Summary:
This is a follow-up bugfix for expo/expo#27425, related to:
 - https://github.com/facebook/react-native/issues/43291
 - https://github.com/facebook/react-native/issues/43307
 - https://github.com/facebook/react-native/issues/43310
 - https://github.com/facebook/react-native/issues/43364

The middleware API works as intended and can run our extended CDP events. Unfortunately, this only applies to an actual `Page` from the device, not for the `React Native Experimental (Improved Chrome Reloads)` synthetic / virtual page.

That's because the middleware instantiation gets aborted when the page can't be found in `this.#pages.get(pageId)`, which always returns `null` for this synthetic page.

## Changelog:

[GENERAL] [FIXED] Create custom message handler for synthetic page

Pull Request resolved: https://github.com/facebook/react-native/pull/43559

Test Plan: See added test case.

Reviewed By: motiz88

Differential Revision: D55129412

Pulled By: huntie

fbshipit-source-id: 9679d8fe68f3cb4104f4a042f93612b995baddc9
2024-03-20 08:59:46 -07:00
Cedric van Putten c62be78d99 feature(dev-middleware): use userAgent query parameter as fallback when header is unset (#43364)
Summary:
At Expo, we use [Expo Tools](https://github.com/expo/vscode-expo/blob/main/src/expoDebuggers.ts) to connect the [built-in vscode-js-debug](https://github.com/microsoft/vscode-js-debug) to Hermes.

Since there are a few differences in vscode vs chrome devtools, we need to enable a couple of modifications through the [`customMessageHandler` API](https://github.com/facebook/react-native/pull/43291). Unfortunately, vscode itself doesn't set the `user-agent` header when connecting to the inspector proxy. Becuase of that, we'd need a fallback to "manually" mark the debugger as being vscode ([we use this query parameter here](https://github.com/expo/vscode-expo/blob/main/src/expoDebuggers.ts#L208)).

This PR supports setting the `user-agent` through `?userAgent=` when the header is not set.

## Changelog:

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

[GENERAL] [ADDED] - Fallback to query parameter based `user-agent` when header is unset

Pull Request resolved: https://github.com/facebook/react-native/pull/43364

Test Plan:
- Install [Expo Tools](https://marketplace.visualstudio.com/items?itemName=expo.vscode-expo-tools)
- Start Metro with this change.
- Connect a device.
- Run the vscode command `"Expo: Debug Expo app ..."`
- Debugger should connect, and have it's user-agent marked as:
    `vscode/1.87.0 vscode-expo-tools/1.3.0`

Reviewed By: huntie

Differential Revision: D54804556

Pulled By: motiz88

fbshipit-source-id: 1ff558ba5350811ad042d08a713438e046759feb
2024-03-12 09:39:00 -07:00
Cedric van Putten 3dee6d31b9 fix(dev-middleware): allow inspector proxy to fetch sourcemaps on lan connections (#43307)
Summary:
The inspector proxy is inlining source maps on `Debugger.scriptParsed` CDP events. The inlining prevents Chrome DevTools from downloading this remotely, as that's not supported in newer versions anymore.

The current implementation locks this inlining mechanism to just `localhost` and/or `127.0.0.1` addresses, making it incompatible with LAN or tunnel device connections.

This PR removes that limitation to allow source map inlining on these LAN and tunnel connections.

## Changelog:

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

[GENERAL][FIXED] Allow Inspector proxy to inline source maps on LAN connections

Pull Request resolved: https://github.com/facebook/react-native/pull/43307

Test Plan:
- See added test
- Start Metro and connect a device over LAN, open the chrome devtools

Reviewed By: huntie

Differential Revision: D54485247

Pulled By: robhogan

fbshipit-source-id: 6fcb0c6dd762d2f0a013497ba0a1126095b9130b
2024-03-11 03:48:49 -07:00
Cedric van Putten f3ce7cd76e feature(dev-middleware): add inspector proxy nativeNetworkInspection target capabilty flag (#43310)
Summary:
This adds the `nativeNetworkInspection` target capability flag, to enable/disable the proxy-side network inspection handling.

## Changelog:

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

[GENERAL][ADDED] Add inspector proxy `nativeNetworkInspection` target capability flag

Pull Request resolved: https://github.com/facebook/react-native/pull/43310

Test Plan:
Once this lands, and is published through `react-native/dev-middleware`, we (Expo) can disable the proxy-side network inspection handling.

See https://github.com/expo/expo/pull/27425/commits/1a1b601a29fbc5766628238db7259121689f6cd6 on PR expo/expo#27425

Reviewed By: christophpurrer, motiz88

Differential Revision: D54486516

Pulled By: huntie

fbshipit-source-id: cc151349c816fb3866d3ec07af1a29a5f4ff9b00
2024-03-05 04:03:30 -08:00
Cedric van Putten a6397afb7f feat(cli): warn underlying command when using npx react-native init (#43127)
Summary:
This adds a new warning for React Native 0.74, implementing the [RFC 0759](https://github.com/react-native-community/discussions-and-proposals/blob/nc/rnf/proposals/0759-react-native-frameworks.md#the-init-command) init command changes.

- It's added inside `react-native/cli.js` to avoid warning users when actually executing `npx react-native-community/cli` commands.
- The check is fairly simple: `process.argv[2] === 'init'`. The first two args are the Node bin and the actual script bin paths.
- The message is sent over `console.warn` to avoid potentially mixing JSON with non-JSON output.

## Changelog:

[GENERAL] [ADDED] - Warn with future command when using `npx react-native init`

Pull Request resolved: https://github.com/facebook/react-native/pull/43127

Test Plan:
Any command other than `init` must not warn.

- `$ node ./path/to/react-native/cli.js init`
- `$ node ./path/to/react-native/cli.js init --help`
  - Should warn with `Running: npx react-native-community/cli init`
    ![image](https://github.com/facebook/react-native/assets/1203991/a3f5e3d2-7b59-41fe-9a53-bc9ce5a21fd1)
- `$ node ./path/to/react-native/cli.js --help`
  - Must not warn
    ![image](https://github.com/facebook/react-native/assets/1203991/97679429-db35-47f8-bdeb-33187bb167cf)

Reviewed By: cipolleschi

Differential Revision: D54063131

Pulled By: cortinico

fbshipit-source-id: c60b8b6034087b584e98b51f5bedf68a46caf44c
2024-02-24 02:16:55 -08:00