Commit Graph

216 Commits

Author SHA1 Message Date
Alex Hunt 94e7a87f23 Remove --experimental-debugger option (#46231)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46231

Removes this option from `npx react-native start`. Flipper will no longer be the default launch flow in 0.76.

The debugger frontend variant remains controlled by `target.reactNative.capabilities?.prefersFuseboxFrontend`. This will always be Fusebox, since D60893243.

Changelog:
[General][Changed] Remove `--experimental-debugger` option from start command

Reviewed By: robhogan

Differential Revision: D61852415

fbshipit-source-id: 3351f0e12c24717916a70dd1ea28f8690bb5509f
2024-08-28 03:20:17 -07:00
Alex Hunt 773fc8d0f1 Remove useFuseboxInternalBranding experiment (#46230)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46230

Follows https://github.com/facebookexperimental/rn-chrome-devtools-frontend/pull/101.

Changelog: [Internal]

Reviewed By: hoxyq

Differential Revision: D61850578

fbshipit-source-id: 9283e74dd5fddac001f9748115dc8e85b8d0d491
2024-08-27 07:10:02 -07:00
Cedric van Putten 30a3e6e8df refactor(dev-middleware): drop node-fetch in favor of Node built-in fetch (#45227)
Summary:
Node 22 doesn't work well with `node-fetch@2`, as one of their polyfills is using the deprecated `punycode` module. This causes unnecessary warnings like:

<img width="986" alt="image" src="https://github.com/facebook/react-native/assets/1203991/13f66c5b-b6f4-4894-8576-ca9631d93f77">

Instead of upgrading to the [much larger `node-fetch@3`](https://packagephobia.com/result?p=node-fetch%403.3.2), this change drops `node-fetch` in favor of Node's own built-in `fetch` implementation (using [undici](https://github.com/nodejs/undici#readme)).

> Note, `react-native/dev-middleware` [already has the `engines.node >= 18`](https://github.com/facebook/react-native/blob/c7988c9c82793b6b41d4c9190a28ce1202410fa0/packages/dev-middleware/package.json#L38-L40) (which is required for fetch).

## Changelog:

[GENERAL] [CHANGED] - Drop `node-fetch` in favor of Node's built-in fetch from `undici` in `react-native/dev-middleware`

<!-- 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: https://github.com/facebook/react-native/pull/45227

Test Plan: See CI for passing tests

Reviewed By: NickGerleman

Differential Revision: D59202017

Pulled By: robhogan

fbshipit-source-id: 15da5d5602e63958b8a3dc581dc1512649f16c12
2024-07-03 09:14:02 -07:00
Alex Hunt ebf1a7b79b Bump packages for next major release (#45015)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45015

Set package versions to `0.76.0-main` (`0.75-stable` branch was cut).

Changelog: [Internal]

Reviewed By: cipolleschi

Differential Revision: D58687399

fbshipit-source-id: 27ed987e4557705845d57d64e7547cddbd982a03
2024-06-26 07:59:49 -07:00
Gijs Weterings 80cfacef78 Upgrade ws from 6.2.2 to 6.2.3 (#45130)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45130

Changelog: [General][Security] Update ws from 6.2.2 to 6.2.3 (CVE-2024-37890)

6.2.3 is a patch to mitigate a dos vuln https://github.com/websockets/ws/releases/tag/6.2.3

Reviewed By: hoxyq

Differential Revision: D58946681

fbshipit-source-id: ff73f31ffd9b14392e3bea4e616cb5f4c9b8d13f
2024-06-25 17:30:10 -07:00
Rob Hogan 88ba9a6042 Inspector: Support /open-debugger specifying target param (#45138)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45138

Add a new `/open-debugger` endpoint format that allows specifying `target` - the proxy-unique target `id`. This is logically equivalent to specifying both device and page.

Changelog:
[General][Added]: Inspector: Support `/open-debugger` specifying `target` param

Reviewed By: hoxyq

Differential Revision: D58950622

fbshipit-source-id: 9665f8a24ba2bb0561cc3c693dfb84bfffdeb4a4
2024-06-25 06:28:57 -07:00
Rob Hogan c7970379a1 Inspector: Enforce device and appId filters if both are given to /open-debugger (#45140)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45140

Previously, if the `/open-debugger` endpoint was provided with both `device` and `appId` query params, we would:
 - Try to find a target with a matching `device` (note that these logical "devices" are unique per-app) - if found, use it. Otherwise,
 - Try to find a target with a matching `appId` - if found, use that.

This could go "wrong" in two ways:
 - If a `device` is given with a spurious `appId`, we'd open to a target with an `appId` differing from the one specified.
 - If the `device` has gone away but there is a different target with the same app, we'd use that as a fallback (right app, wrong device).

This applies the filters more strictly so that if both are given, both must match.

Changelog:
[General][Changed]: Inspector: Enforce device and appId filters if both are given to /open-debugger

Reviewed By: hoxyq

Differential Revision: D58951952

fbshipit-source-id: a95f1160e5c88f957445058f3273e922a5d28c1e
2024-06-25 06:28:57 -07:00
Moti Zilberman a7adfef0bb Reject debugger connections to unknown page IDs (#45148)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45148

Changelog: [General][Fixed] Reconnecting to an unknown inspector page no longer results in a zombie connection

TSIA

Reviewed By: hoxyq

Differential Revision: D58954759

fbshipit-source-id: 99c5caccc3cc917e0691e94326c7a35874f9a385
2024-06-24 12:59:53 -07:00
Rob Hogan 2a6a895b17 Debugger: j opens debugger on most recently connected target (#45060)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45060

Currently, `j`, (i.e., `/open-debugger` with no parameters), connects the "first available" target, which in practice is the first page of the first connected device still connected.

In the absence of a target selection UI, a better guess at user intent is to use the *latest* target (most recently added page of most recently connected device).

Also slightly reduces CLI noise by not claiming that we're launching a debugger when there's no target, and not qualifying which target when there's only one.

Changelog:
[General][Changed] Debugger: `j` opens most recent (not first) target.

Reviewed By: huntie

Differential Revision: D58736151

fbshipit-source-id: 3d106a1fa958f9e5c91b16e04075609e1abf6e97
2024-06-19 11:28:36 -07:00
Rob Hogan 53951d7fec Debugger: Make /json/list ordered (#45069)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45069

Currently, `/json/list` returns pages within each device in the iteration order of a C++ `unordered_map`, which doesn't tell us anything useful. Page IDs happen to be sequential, but only as an implementation detail.

Change this contract so that we guarantee ordering reflects addition order, allowing clients to consistently select e.g. most recently added page for a given device.

The implementation of this is as simple as switching from an `unordered_map` to a key-ordered`map`, because we already assign keys (page IDs) with an incrementing integer. Within the inspector proxy, devices already use an insertion (connection)-ordered JS `Map`, so we just document this guarantee.

Changelog:
[General][Changed] Debugger: Make `/json/list` return connection-addition-ordered targets.

Reviewed By: huntie

Differential Revision: D58735947

fbshipit-source-id: 7a132cc5e750475792a2b845afc9a42424690bf1
2024-06-19 11:28:36 -07:00
Moti Zilberman e55ea2daf1 Fix debugger handoff logic to prevent "zombie" state (#45035)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45035

Changelog: [General][Fixed] Avoid a zombie state when opening a second debugger frontend concurrently.

The problem here was that we were sending proxy-protocol messages to the device in the wrong order (`disconnect` *after* `connect`):

 {F1701266597}

The root cause was that we were depending on the outgoing debugger socket's async `close` event to trigger sending the `disconnect` message to the device. This would happen after we'd already (synchronously) sent the `connect` message.

With this diff, we send the `disconnect` message synchronously with calling `close()` on the debugger socket, which fixes the ordering problem at the source. To avoid sending duplicate `disconnect` messages (e.g. one before calling `close()` and one from the `close` event handler), we store some extra state on `Device` (`#connectedPageIds`).

Reviewed By: robhogan, huntie

Differential Revision: D58730634

fbshipit-source-id: 0f54af2e4f8071a8f6d97cc9e3d8a4ea89a46f43
2024-06-18 09:39:35 -07:00
Moti Zilberman 9cca4c1ec1 Add test for connecting multiple debuggers to a single page, reproing "zombie" state (#45034)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45034

Changelog: [Internal]

TSIA

Reviewed By: hoxyq

Differential Revision: D58728261

fbshipit-source-id: 32d4b05d69f88e68b5327dc5c8e837291e3d7726
2024-06-18 09:39:35 -07:00
Moti Zilberman 6695b6e3b8 Reuse Device instances when handing off connections based on device ID (#45027)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45027

Changelog: [Internal]

Changes the device ID collision handling logic to reuse `Device` instances instead of creating new ones. This enables further refactoring of `Device` to improve session state isolation.

Reviewed By: hoxyq

Differential Revision: D58724884

fbshipit-source-id: bc11ce45ce8c80c58c32dcd1b07b28f1d1753a62
2024-06-18 09:39:35 -07:00
Moti Zilberman db2c44a7eb Make inspector-proxy protocol types mutable by default (#45021)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45021

Changelog: [Internal]

TSIA, hoisted from an upcoming refactor of `Device` in inspector-proxy.

Reviewed By: hoxyq

Differential Revision: D58723496

fbshipit-source-id: af272b08bc280d681bd7e1adb60d2a411a549864
2024-06-18 08:25:32 -07:00
Moti Zilberman 43d69ee26c Fix ReactNativeReloads test case (#45011)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45011

Changelog: [Internal]

Fixes an inspector-proxy test case that was (silently) incorrect. This is in preparation for an upcoming rewrite of the core of inspector-proxy to more strictly isolate session state, which causes the incorrect test to fail.

Reviewed By: hoxyq

Differential Revision: D58193527

fbshipit-source-id: bdc27179210117ca9249b272f2e4aff19ba8a06c
2024-06-18 02:53:18 -07:00
Moti Zilberman 4c6bff01b3 Fix bug in device ID collision handling, add tests (#45010)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45010

D46482492 added logic for handing off state across "device" connections that have the same ID. This logic currently has no test coverage. It also contains a bug whereby the new device's pages are removed from the target listing endpoint (`/json`) when the *old* device's socket is closed.

This diff adds tests and fixes the bug.

Changelog: [General][Fixed] inspector-proxy no longer accidentally detaches connected devices.

## Next steps

It seems that the device ID handoff logic exists to paper over a deeper problem with the inspector proxy protocol (or its implementation in React Native): The React Native runtime should not routinely be creating new "device" connections without tearing down previous ones.

In followup diffs, I'll explore changing this behaviour for Fusebox, based on the new test coverage.

Reviewed By: robhogan

Differential Revision: D51013056

fbshipit-source-id: e0c17678cc747366a3b75cef18ca2a722fc93acd
2024-06-17 09:56:14 -07:00
Edmond Chui 20462ca984 fix timing of terminating an unresponsive debugger socket (#44811)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44811

Changelog:
[General][Fixed] - Debugger frontend socket-termination countdown now begins after the ping message is actually sent

The debugger is currently disconnected if a ping-pong message is missed.

This causes the debugger to be unusable if it happens to be lagging, e.g. when the initialisation is competing with the flood of log spam T191394188

There are a few ways to fix this as discused with motiz88 and robhogan:

1. Ensure the websocket has a chance to respond, e.g. in via web worker
1. Lengthen the time allowed for the pong resopnse

I've done some digging to find the root cause of the UI being blocked in CDT, However, profiling shows that most of the work is not simple to break up, i.e. the number of expensive re-layout calls. Diving into that rabbit hole could mean accidentally writing React.

Because we ping every 10 seconds, we could get un/lucky where CDT happens to be busy _at that exact moment_, making this a flaky symptom to fix, even if we lengthen the allowed time-to-respond.

# V2+

So upon further investigation, CDT websocket is actually responding to the pings in due time:

{F1679132204}

(CDT doesn't show the ping/pong API as frames, so a custom tick/tock message was used to visualise the timing)

Over here in dev-middleware, we currently start a timeout to terminate the socket after sending the ping:

https://www.internalfb.com/code/fbsource/[813870db697a8701f2512d25a7fed730f0ec6ed9]/xplat/js/react-native-github/packages/dev-middleware/src/inspector-proxy/InspectorProxy.js?lines=306-307

If CDT doesn't respond in time, websocket would be terminated.

But we saw CDT respond immediately above, even during the log spam, so the delay must be coming from somewhere else.

The intuition is that during the log-spam, the middleware takes a perf hit too when it's processing the spam from the device and forwarding it to the CDT websocket.

We can confirm this by passing a "sent" callback via `socket.ping(cb)`:

https://github.com/websockets/ws/blob/9bdb58070d64c33a9beeac7c732aac0f4e7e18b7/lib/websocket.js#L246-L254

This gives us the timing between calling `socket.ping()` and when the ping is actually sent.

Regular, stress-free operation without log-spam shows most pings are sent within the same millisecond:

 {F1679223326}

With the pong response grace period at 5 seconds, there's plenty of time for CDT to `pong` back. That's why it has been working in most cases.

However, during the log-spam, we easily see this send-sent delay over 5 seconds. In extreme cases, almost 30 seconds would have passed before middleware sent a message to CDT, which then responded under 2 seconds:

 {F1679163335}

This means while CDT is getting flooded and has observable lag in the UI, the smoking gun is actually the middleware.

Digging a little deeper, we know that incoming messages from the target goes into a Promise queue, including the console logs:

https://www.internalfb.com/code/fbsource/[d5d312082e9c]/xplat/js/react-native-github/packages/dev-middleware/src/inspector-proxy/Device.js?lines=155-157

This means during the flood of logs from the target, the Promise queue keeps getting chained rapidly for each message.

Meanhile, the `ws` lib uses the underlying NodeJS `Socket.write` method for `ping(…)` and `send(…)`:

https://github.com/websockets/ws/blob/9bdb58070d64c33a9beeac7c732aac0f4e7e18b7/lib/sender.js#L349

…which is guaranteed to fire the callback asynchronously:

https://github.com/nodejs/help/issues/1504#issuecomment-422879594

Promise queue is in the macro task queue, which gets priority before the micro task queue. So if the Promise queue is not cleared yet, the websocket queue will have a hard time getting executed in time – explaining the extreme send-sent durations during a log spam.

The fix is simple:

1. Start the terminate-socket-timer until the `ping` is actually sent
1. Treat any incoming message (along with `pong`s) as a terminate-socket-timer reset
    1. This also applies if `pong` comes in between `send` and `sent`, which can happen sometimes due to the async nature of the callback:

 {F1679288626}

# V1

~~In this diff, a more forgiving mechanism is introduced, i.e. CDT is allowed to miss a ping-pong roundtrip 3 times before the websocket connection is terminated.~~

~~This allows a bit more breathing room for CDT's initialisation during log spam while maintaining the same ping-pong interval for VS Code to keep the auto SSH tunnel alive.~~

Reviewed By: huntie

Differential Revision: D58220230

fbshipit-source-id: 7111c9878492d8755a6110a5cdf4ef622265001d
2024-06-12 09:45:34 -07:00
Alex Hunt d72ac96e8e Remove nonstandard "vm" field from modern CDP targets (#44835)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44835

As titled. The `vm` field is not part of the CDP spec and will not be used by the modern debugger frontend or proxy.

This change affects modern CDP targets only (using `InspectorPackagerConnection`). We aim to enable sharing of more detailed metadata over 1/ a new, dedicated CDP domain, and 2/ namespaced under the existing `reactNative` field (for the latter, strictly limited to metadata necessary for dev server functionality).

Changelog: [Internal]

(Note: `/json` endpoint behaviour is unchanged for legacy CDP targets)

Reviewed By: robhogan

Differential Revision: D58285587

fbshipit-source-id: dfef3a56b20486ba11891df9940f6c7bef59528e
2024-06-11 08:48:45 -07:00
Alex Hunt df19e597e3 Remove faviconUrl field from CDP list response (#44834)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44834

- Remove the nonstandard, unused `faviconUrl` field from CDP `/json` response targets (note: both legacy and modern targets).
- Reorder `PageDescription` members.

Changelog:
[General][Removed] - `react-native/dev-middleware`: Remove nonstandard `faviconUrl` field from CDP `/json` response

Reviewed By: hoxyq

Differential Revision: D58092090

fbshipit-source-id: a593be00464853a3fe179305efae5643d616573b
2024-06-07 08:23:45 -07:00
Edmond Chui 82a3bb8f75 add fusebox flag to error case of launch debugger event (#44696)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44696

Changelog: [Internal]

Add `prefers_fusebox_frontend` annotation to the error case for the launch debugger event

Reviewed By: hoxyq

Differential Revision: D57866634

fbshipit-source-id: fcd3655539c936d9965b0c79a47b1b58bb9a4e48
2024-05-29 06:00:36 -07:00
Alex Hunt 352d4b1c83 Add default browser fallback to debugger launch flow (#44673)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44673

Changelog: [Internal]

Reviewed By: hoxyq

Differential Revision: D57726648

fbshipit-source-id: 66eaab1dd0d53fe2befb3dc96d5deb426b86e3e7
2024-05-27 02:53:36 -07:00
Alex Hunt 5d827d83c1 Simplify debugger launch flow to invoke Chrome directly, drop kill API (#44672)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44672

Swaps out and simplifies the internals of the debugger launch flow.

We observed that we could achieve better launch/windowing behaviour by passing the `--app` argument directly to the detected Chrome path.

This shares the user's default Chrome profile:
- Fixes unwanted behaviour such as a separate dock icon on macOS (which, when clicked, would launch an unwanted empty window).
- Enables settings persistence.

This change also removes the `LaunchedBrowser.kill` API.

Changelog: [Internal]

Reviewed By: hoxyq

Differential Revision: D57726649

fbshipit-source-id: fc3a715dc852a50559048d1d1c378f64aeb2013f
2024-05-27 02:53:36 -07:00
Alex Hunt 7e0f86f34b Revert debugger launch behaviour to default profile (#44638)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44638

Reverts the debugger launch flow to use the default `ChromeLauncher` profile. This is the approach used in the current `--experimental-debugger` experiment and by Expo.

This is motivated after a review of the tradeoffs of a guest profile — which allow us to programatically quit the browser process, however takes over system URL handling.

Changelog: [Internal]

Reviewed By: hoxyq

Differential Revision: D57619542

fbshipit-source-id: 3713e1cf8eed61e7a70ed1e4eb58f02da845155f
2024-05-27 02:53:36 -07:00
Fabrizio Cucci 95de14dc53 Drop unused code + minor lint fixes (#44645)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44645

Changelog: [Internal]

As per title.

Reviewed By: NickGerleman

Differential Revision: D57664819

fbshipit-source-id: 2388bd01c00d814a12de7f2e285b78f207e6012c
2024-05-22 12:11:33 -07:00
Edmond Chui cc99e924ca add prefersFuseboxFrontend field to debugger_command (#44499)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44499

Changelog: [internal]

As [discussed](https://fb.workplace.com/groups/react.devx.team/permalink/930483712103526/), we'll begin segmenting Telemetry signals by Fusebox/non-Fusebox.

* Add new flag in event reporter for `debugger_command` (other events in subsequent diffs)
* Add new column to the Scuba destination

Reviewed By: blakef

Differential Revision: D57140479

fbshipit-source-id: 7ea813b1b4d53a282873fa95c8ee82e5d6f3d1d3
2024-05-09 03:43:38 -07:00
Edmond Chui 75dc42f4df extract param type (#44498)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44498

Changelog: [internal]

Quick refactor to reduce commit noise in the following diff in the stack

Reviewed By: blakef

Differential Revision: D57140480

fbshipit-source-id: aa1fef83d5347b8a11651d3d5c4112b4adf7a7d5
2024-05-09 03:43:38 -07:00
Blake Friedman 3ddf509924 Back out "conditional Babel registration no longer necessary"
Summary:
Original commit changeset: 6bec706c639f

Original Phabricator Diff: D56839521

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D57052476

fbshipit-source-id: 7c598f43b23959f1accf555be38abc95e4ef35fd
2024-05-07 08:36:04 -07:00
Blake Friedman 47848ad15f conditional Babel registration no longer necessary (#44362)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44362

Packages that are built and directly run in the monorepo no longer need to worry about
conditionally registering themselves to transpile Flow -> JS at runtime. Our build step
strips this file now.

Changelog: [Internal] changes in published packages no longer require conditional calls to Babel register.

Reviewed By: huntie

Differential Revision: D56839521

fbshipit-source-id: 6bec706c639f1ab4138e0b790be8a07654333046
2024-05-07 03:16:00 -07:00
Alex Hunt 185f63b0db Add experiment to configure internal debugger branding (#44388)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44388

Towards the open source rollout of the `rn_fusebox.ts` entry point.

NOTE: Requires https://github.com/facebookexperimental/rn-chrome-devtools-frontend/pull/59, but can (and should) be landed safely beforehand.

Changelog: [Internal]

Reviewed By: motiz88

Differential Revision: D56883040

fbshipit-source-id: acee5d53c0f93ef9dc2d498001291b1e35237824
2024-05-02 09:15:30 -07:00
Edmond Chui b7de916664 move launch ID gen out of dev-middleware
Summary: Changelog: [General][Removed] `launchId` query param for `/debugger-frontend` is no longer generated automatically for each `/open-debugger` call. Caller of `/open-debugger` is now responsible for generating the `launchId`, which will be passed along to `/debugger-frontend`.

Reviewed By: robhogan

Differential Revision: D55164645

fbshipit-source-id: b83303eda77b6fb86ebf50f699d9f308676533c6
2024-04-29 11:55:28 -07:00
Edmond Chui 820d1e1ff4 add fields to launch_debugger_frontend
Summary: Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D56610268

fbshipit-source-id: 37abee41dd068f3cafa19466b914545f6460a3f0
2024-04-29 11:55:28 -07:00
Alex Hunt 548fcd8b3b Update "Open Debugger" to print extended Flipper guidance
Summary:
Supports the removal of Flipper from the template in 0.74, paried with additional blog post messaging: https://reactnative.dev/blog/2024/04/22/release-0.74#removal-of-flipper-react-native-plugin.

Changelog:
[General][Changed] - Update "Open Debugger" action to print extended Flipper guidance

Reviewed By: cipolleschi

Differential Revision: D56705236

fbshipit-source-id: d7e869625262ebb02bc2454c924f832cccfbcd31
2024-04-29 10:18:45 -07:00
Moti Zilberman b1bb0bee41 Align debugger Chrome launch flags with Meta-internal version (#44180)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44180

Changelog: [General][Changed] Update Chrome launch flags for `--experimental-debugger` launch flow

Internally at Meta, we've been testing the experimental debugger launch flow with a different set of Chrome flags than are currently shipped in open source. This diff fixes those differences:

* Removes `--disable-backgrounding-occluded-windows`
* Adds `--guest`

Reviewed By: EdmondChuiHW

Differential Revision: D56418271

fbshipit-source-id: 884c5746e93cad89f17e4ef9e3ef193a2a454eb5
2024-04-22 08:37:32 -07:00
Rob Hogan a52bd7dd08 Inspector proxy: Rewrite 127.0.0.1 to localhost in source map URLs to support IPv4->IPv6 tunnels (#44092)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44092

In a setup where a device retrieves a bundle from `http://127.0.0.1:8081`, but this is tunnelled to a remote host with only an IPv6 stack (eg, FB dev servers), the host running the inspector-proxy will fail to fetch source or source maps from 127.0.0.1 despite typically being on the same host (indeed, process) as Metro.

This causes a surprising inconsistency where using a bundler URL of `localhost` from the device results in source maps being inlined into `Debugger.scriptParsed`, but using a bundler URL of `127.0.0.1` causes inspector-proxy to fall back to preserving URLs, which are typically fetched lazily by CDT later.

This should be unnecessary once we've implemented CDP `Network.loadNetworkResource` and removed `Debugger.scriptParsed` rewriting, but for now it brings IPv6 tunnelled servers in line with local servers.

Changelog:
[General][Changed] Inspector proxy: Rewrite 127.0.0.1 to localhost in source map URLs for better IPv4->IPv6 tunnelling support.

Reviewed By: motiz88

Differential Revision: D56138742

fbshipit-source-id: b65c9cc8225a0ed54cf32171f640ef9e6408c762
2024-04-16 03:00:13 -07:00
Rob Hogan 704756352c Inspector proxy: Add ping/pong keepalive/heartbeat to debugger connection (#44086)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44086

When a debugger frontend is connected to inspector-proxy via another proxy or tunnel that times out on idle (such as [VS Code's remote tunnel](https://github.com/microsoft/vscode/blob/main/src/vs/platform/tunnel/node/tunnelService.ts)), the connection between proxy and debugger may be dropped.

In addition, when the connection is dropped without a closing handshake, the proxy does *not* detect the disconnection - no disconnect is logged to the reporter and no notifications are sent to any connected devices.

This adds a mechanism using the WebSocket-standard `ping` and `pong` frames to:
1. Keep the connection alive
2. Detect when the debugger has gone away

Note that as all WebSocket clients already **must** reply to a ping with a pong, this is non-breaking for compliant implementations: https://datatracker.ietf.org/doc/html/rfc6455#section-5.5.2

Changelog:
[General][Added] Inspector proxy: Add ping/pong keepalive to debugger connections.

Reviewed By: hoxyq

Differential Revision: D56069185

fbshipit-source-id: e322de631c652a502f3d554c15ed5412a751ee04
2024-04-15 08:55:05 -07:00
Alex Hunt 0b23ff6631 Add capability flag to select rn_fusebox debugger frontend (#43688)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43688

Context: https://github.com/facebookexperimental/rn-chrome-devtools-frontend/pull/34.

Changelog: [Internal]

Reviewed By: EdmondChuiHW

Differential Revision: D55474522

fbshipit-source-id: 4f514dba228bfa4df41a0eb9687f2525cc32b2d7
2024-04-02 10:12:49 -07:00
Rob Hogan e05319cc87 Inspector proxy: catch and report errors in device message handling (#43697)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43697

Currently, messages from a device are handled by async handlers added to a promise chain.

If a handler rejects, the end of the chain becomes a rejected promise, picked up only asynchronously by Metro's global `unhandledRejection` handler.

This triggers a warning from Node.js, and worse, prevents any `then()` callback chained by subsequent messages from being invoked at all.

Handlers *should* attempt to gracefully deal with errors (as we do with source map fetching errors, for example), but this diff adds a catch-all fallback for anything we might've missed (in this case, a frontend socket disconnecting while we're busy fetching a source map). Errors are caught and logged to EventReporter.

**To follow**: Gracefully handle socket disconnections while an async handler is working or queued.

Changelog:
[General][Fixed] Inspector proxy: prevent errors proxying a device message from blocking the handler queue or spamming logs.

Reviewed By: EdmondChuiHW

Differential Revision: D55482735

fbshipit-source-id: bb726218495e105f9cb4f723a1d110c9815abdef
2024-03-30 15:29:47 -07:00
Rob Hogan fd1e5e7063 Inspector proxy: Fix "Buffer() is deprecated" warning (#43686)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43686

Under Node 20, the use of `new Buffer(string)` is deprecated and logs a warning. This replaces it with the recommended `Buffer.from(string)`.

Changelog:
[General][Fixed] FIx "Buffer() is deprecated" warning from debugger proxy.

Reviewed By: huntie

Differential Revision: D55472025

fbshipit-source-id: 8b5af9e2d7e026cbdf6aa68f71ff0f856fb164db
2024-03-28 15:17:02 -07:00
Edmond Chui af309127a4 Add support for launch ID (#43585)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43585

Changelog: [internal]

Related PR: https://github.com/facebookexperimental/rn-chrome-devtools-frontend/pull/27

Reviewed By: hoxyq

Differential Revision: D55164646

fbshipit-source-id: 0f25f150603a24654020093697e76d85d0d8cc02
2024-03-28 13:48:30 -07:00
Rob Hogan ac714b1c33 Inspector proxy: preserve ordering of messages from device (#43639)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43639

Currently, the `react-native/dev-middleware` inspector proxy intercepts `Debugger.scriptParsed` notifications from the target and replaces `sourceMapURL` with a data uri, via an async fetch from Metro. During this async fetch, other notifications from the debugger may pass through the proxy, which results in the frontend receiving them before `Debugger.scriptParsed`.

This reordering causes problems in breakpoint resolution and pausing, because `Debugger.breakpointResolved` and `Debugger.paused` events may reference `scriptId`s unknown to the frontend while the corresponding `Debugger.scriptParsed` is delayed.

In particular, breakpoint UI state and backend state can fall out of sync, and breakpoints hit may open to the incorrect source location.

This diff modifies the proxy to use a simple per-target promise queue to ensure messages are handled in the order they were received from the target.

Changelog:
[General][Fixed] Fix breakpoints opening to incorrect location or disappearing from debugger frontend UI.

Reviewed By: motiz88

Differential Revision: D55200617

fbshipit-source-id: 27c95f822266875ed668d0bf8a525da49554cafd
2024-03-25 13:02:00 -07:00
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
Moti Zilberman 1ae379c6ec Migrate back to chromium-edge-launcher since Windows fix was merged (#43562)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43562

A resubmission of D55013623 (Pull Request resolved: https://github.com/facebook/react-native/pull/43524) with a fix for the internal `.flowconfig` issue that got the initial diff reverted.

 ---

The [Windows fix](https://github.com/cezaraugusto/chromium-edge-launcher/pull/1) was merged and published. We no longer need to use the fork.

## Changelog:

[INTERNAL] [FIXED] - Fix experimental debugger launch flow with Edge on Windows

Reviewed By: NickGerleman

Differential Revision: D55087731

fbshipit-source-id: 6fd28a32447ad07dacdf6cd77390e18489fd6cfb
2024-03-20 03:55:35 -07:00
Wendi Du ff5e1a605a Revert D55013623: Migrate back to chromium-edge-launcher since Windows fix was merged
Differential Revision:
D55013623

Original commit changeset: bff2aa2801dd

Original Phabricator Diff: D55013623

fbshipit-source-id: d7f19068327b5cf427750fbcae01d3c10f9c89b5
2024-03-18 14:29:02 -07:00
Tommy Nguyen 43ffce9fb3 Migrate back to chromium-edge-launcher since Windows fix was merged (#43524)
Summary:
The [Windows fix](https://github.com/cezaraugusto/chromium-edge-launcher/pull/1) was merged and published. We no longer need to use the fork.

## Changelog:

[INTERNAL] [FIXED] - Fix experimental debugger launch flow with Edge on Windows

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

Test Plan: n/a

Reviewed By: robhogan

Differential Revision: D55013623

Pulled By: motiz88

fbshipit-source-id: bff2aa2801dd0dcdd6975dca0a2ec2aa9864ff6f
2024-03-18 10:45:04 -07:00
Blake Friedman a380ea55fb Summary: minor fix found in nightly logs from Publish NPM job (#43519)
Summary:
Minor fix to package.json which newer version of npm warn about when publishing, after running `npm pkg fix -ws` on the workspace.

{F1470070110}

## Changelog: [Internal] npm pkg fix -ws

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

Test Plan: eyescloseddog

Reviewed By: cortinico

Differential Revision: D55012872

Pulled By: blakef

fbshipit-source-id: ff3c63a3eefaf56d369219a3d4b32d44d6d842c9
2024-03-18 08:29:10 -07:00
Cedric van Putten 3f41fb5d5b feature(dev-middleware): add custom message handlers to extend CDP capabilities (#43291)
Summary:
This is a proposal for the `react-native/dev-middleware` package, to allow implementers to extend the CDP capabilities of the `InspectorProxy`. It's unfortunately needed until we can move to the native Hermes CDP layer.

At Expo, we extend the CDP capabilities of this `InspectorProxy` by injecting functionality on the device level. This proposed API does the same, but without having to overwrite internal functions of both the `InspectorProxy` and `InspectorDevice`.

A good example of this is the network inspector's capabilities. This currently works through the inspection proxy, and roughly like:
- Handle any incoming `Expo(Network.receivedResponseBody)` from the _**device**_, store it, and stop event from propagating
- Handle the incoming `Network.getResponseBody` from the _**debugger**_, return the data, and stop event from propagating.

This API brings back that capability in a more structured way.

## API:

```ts
import { createDevMiddleware } from 'react-native/dev-middleware';

const { middleware, websocketEndpoints } = createDevMiddleware({
  unstable_customInspectorMessageHandler: ({ page, deviceInfo, debuggerInfo }) => {
    // Do not enable handler for page other than "SOMETHING", or for vscode debugging
    // Can also include `page.capabilities` to determine if handler is required
    if (page.title !== 'SOMETHING' || debuggerInfo.userAgent?.includes('vscode')) {
      return null;
    }

    return {
      handleDeviceMessage(message) {
        if (message.type === 'CDP_MESSAGE') {
          // Do something and stop message from propagating with return `true`
          return true;
        }
      },
      handleDebuggerMessage(message) {
        if (message.type === 'CDP_MESSAGE') {
          // Do something and stop message from propagating with return `true`
          return true;
        }
      },
    };
  },
});
```

## Changelog:

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

Pick one each for the category and type tags:

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

[GENERAL] [ADDED] - Add inspector proxy device message middleware API

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

Test Plan: See added tests and code above

Reviewed By: huntie

Differential Revision: D54804503

Pulled By: motiz88

fbshipit-source-id: ae918dcd5b7e76d3fb31db4c84717567ae60fa96
2024-03-12 09:58:51 -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
Alex Hunt f57be12977 Bump packages for next major release (#43132)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43132

Command run:

```
node scripts/releases/set-version 0.75.0-main --skip-react-native-version
```

Changelog: [Internal]

Reviewed By: lunaleaps, cipolleschi

Differential Revision: D54006327

fbshipit-source-id: 7afe9e7ca3020faf399fdba2221fab8a102c56c7
2024-03-04 07:54:37 -08:00