Commit Graph
65 Commits
Author SHA1 Message Date
Moti ZilbermanandFacebook GitHub Bot ab1af2844b Support Fusebox shell experiment in OSS without a custom BrowserLauncher (#53435)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/53435

Changelog: [Internal] Support setting `enableStandaloneFuseboxShell: true` in OSS with no custom `BrowserLauncher`

Makes it possible for frameworks to enable the React Native DevTools standalone shell in open source by passing `unstable_experiments: {enableStandaloneFuseboxShell: true}` to `createDevMiddleware()`.

When this experiment is enabled:

* The RNDT shell binary will be prefetched in the background as soon as the dev server starts (into a local cache managed by [DotSlash](https://dotslash-cli.com/)).
* If prefetching is successful, then "Open DevTools" actions will be handled by launching the RNDT frontend in the standalone shell, instead of in Chrome/Edge.
* If prefetching is not successful, then we'll notify the user about the error, and "Open DevTools" will continue to be handled by Chrome/Edge, as before.
* If the user attempts to open DevTools more than once for the same app, the standalone shell will reuse the existing window (as opposed to the current behaviour of always creating a new Chrome/Edge window).
* The appropriate DevTools window will automatically foreground itself upon pausing on a breakpoint.

Reviewed By: huntie

Differential Revision: D78351937

fbshipit-source-id: 6d5baa8fa866760f1d527108cd3c42bcab68cf57
2025-08-27 05:09:30 -07:00
Sam ZhouandFacebook GitHub Bot cf664c65e2 Standardize subtyping error code into incompatible-type in react native and metro (#53312)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/53312

Changelog: [Internal]

Reviewed By: jbrown215

Differential Revision: D80400976

fbshipit-source-id: 196af69c0b9621b2a2675b232406639773e04933
2025-08-18 09:04:31 -07:00
Sam ZhouandFacebook GitHub Bot af1bcb6d44 Mass replace $FlowIgnore with $FlowFixMe in react-native (#53076)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/53076

Changelog: [Internal]

Reviewed By: marcoww6

Differential Revision: D79672242

fbshipit-source-id: 560f057d8658ed602cf7241e584bade70d8f3a99
2025-08-05 15:44:41 -07:00
Sam ZhouandFacebook GitHub Bot 16fa3d5da4 Update prettier-plugin-hermes-parser in fbsource to 0.31.1 (#52996)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52996

Bump prettier-plugin-hermes-parser to 0.31.1.

Changelog: [internal]

Reviewed By: pieterv

Differential Revision: D79481936

fbshipit-source-id: 4decd5c92722f935a6a03b6d2205bc31b864fb5d
2025-08-01 20:18:36 -07:00
Vitali ZaidmanandFacebook GitHub Bot 794df48ad6 re-write console stack trace frame urls to be relative to debugger (#52704)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52704

Stack traces for console calls are passed to the debugger when they are relative to device. (e.g. 10.0.2.2 for Android emulator)

Changelog: [android][fixed] fix stack trace linkifying failing when using Android emulator and other situations where the device and debugger have different bundle urls

Reviewed By: motiz88

Differential Revision: D78553183

fbshipit-source-id: 91d7e7ccc99d12ec7d06f4201237ecf557a46c4f
2025-07-20 22:39:52 -07:00
Sam ZhouandFacebook GitHub Bot 6b85c54ef4 Add annotations to array and object literal declarations to fix future natural inference errors (#52267)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52267

Changelog: [Internal]

Reviewed By: marcoww6

Differential Revision: D77308192

fbshipit-source-id: 21fa2f6d3df632941327b9b2d7910b035f16b7d2
2025-06-25 13:44:09 -07:00
Tim YungandFacebook GitHub Bot 3e6423fe65 RN: Flowify packages/rn-tester (#51788)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51788

Adds `flow` to the remaining files that are lacking it in the `packages/rn-tester` directory.

This also adds any necessary type annotations and fixes lint warnings.

Changelog:
[Internal]

Reviewed By: SamChou19815

Differential Revision: D75899307

fbshipit-source-id: 27a74ed0007b3b754446a45931c2c148312d5e3a
2025-06-04 12:03:52 -07:00
Moti ZilbermanandFacebook GitHub Bot 55ff50fba5 dev-middleware: Scaffold standalone Fusebox shell experiment (#51687)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51687

Changelog: [Internal]

# Context

This is the first of several commits that aim to implement a **standalone shell for React Native DevTools**. This will be a lightweight desktop app designed to host the debugger frontend, in much the same way as we currently use Chrome or Edge. The launch flow will otherwise remain **very similar** to the one that exists today.

## What's changing for users?

1. With this commit, nothing; we're merely setting up an experiment flag (for stage 1 - Meta-internal testing) and will make separate plans for open source rollout, coordinated with our framework maintainer partners.
2. If the experiment is successful, we aim to *eventually* phase out the use of Chrome/Edge in React Native DevTools and ship the standalone shell as standard to all React Native developers. This is to enable further improvements that will rely on the standalone shell to work.
3. The first iteration of the standalone shell aims to solve some concrete pain points such as the "dead window problem" - the fact that opening DevTools multiple times for the same target will leave behind a now-dead window (that would ideally have been reused).

## This diff

We amend the `unstable_experiments` and `unstable_browserLauncher` APIs in `dev-middleware` to add basic support for launching a standalone shell based on a frontend URL and a *window key* - the latter being an opaque string that the shell process can match against previous launches in order to reuse and foreground existing windows.

We leave it up to `BrowserLauncher` implementers ( = frameworks) to provide a working implementation of `unstable_showFuseboxShell`, and do not provide one with `DefaultBrowserLauncher`. This will effectively allow us to dependency-inject the actual shell implementation at stage 1 so we don't increase the download size of React Native unnecessarily.

Reviewed By: rickhanlonii, robhogan

Differential Revision: D74904547

fbshipit-source-id: fbc6eac97923062bda8892bc130b39051845ea82
2025-05-30 02:23:12 -07:00
Tim YungandFacebook GitHub Bot 84de8a075e RN: Delete @oncall Annotations (#51416)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51416

Deletes `oncall` annotations from the `facebook/react-native` repository.

Changelog:
[Internal]

Reviewed By: javache

Differential Revision: D74902524

fbshipit-source-id: 32a6a5b2ff27281792d572f151e2b094d9a79029
2025-05-17 16:18:05 -07:00
Vitali ZaidmanandFacebook GitHub Bot e18e4feb3a react native devtools extra telemetry (#50737)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50737

Changelog: [Internal][General] the debugger can now be opened with the query param "telemetryInfo"

Corresponding PR on debugger: https://github.com/facebook/react-native-devtools-frontend/pull/157

Reviewed By: huntie

Differential Revision: D72972397

fbshipit-source-id: 51612d90fedb489ffa1079bfd86d27d0f38b6eee
2025-04-16 13:46:04 -07:00
Vitali ZaidmanandFacebook GitHub Bot 0289e4061e fix race condition in getPages test for device disconnection (#49741)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49741

While the test delay `PAGES_POLLING_DELAY` is usually enough to be equal to `PAGES_POLLING_INTERVAL`, in some cases we need extra time to sync that with the polling in `Devices.js`.

Changelog:
[General][Internal] - fix test

Reviewed By: huntie

Differential Revision: D70384823

fbshipit-source-id: ccb18884d32dc27636dbbb3a9786412056f90830
2025-02-28 06:24:03 -08:00
Rubén NorteandFacebook GitHub Bot 3226c328bf Remove unnecessary package data-uri-to-buffer (#49714)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49714

Changelog: [internal]

This package was only needed for testing but it's actually not used.

Reviewed By: hoxyq

Differential Revision: D70318040

fbshipit-source-id: b57ec74932029368117520646972bfee83706017
2025-02-27 05:23:29 -08:00
Vitali ZaidmanandFacebook GitHub Bot ff2e40371e don't inline sourceMapURL in Debugger.scriptParsed (#49001)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49001

In {D42973408}, `Debugger.scriptParsed` was tweaked to be intercepted in `inspector-proxy`, which:
1. Rewrote the `sourceMapURL` to be relative to debugger.
2. Attempted to fetch the contents of the source map from `sourceMapURL` after re-writing again to a server-relative URL, and if successful replaced `sourceMapURL` with a base64 data URL.

1 is still needed until we have `Network.loadNetworkResource`, but 2 was only needed for frontends that did not support http fetch, and is not needed with Fusebox.

Changelog: [General][Changed] `Debugger.scriptParsed` now includes the field `sourceMapURL` as a (rewritten) remote url as opposed to base64 data url

Reviewed By: robhogan

Differential Revision: D68708899

fbshipit-source-id: 95242582c79ce4e9a573d4a3e639b0dc3290869e
2025-01-28 11:09:32 -08:00
Rob HoganandFacebook GitHub Bot 74995bc90a dev-middleware: Generalise URL rewriting, don't only rewrite for Android emulators (#47880)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47880

The previous diffs in this stack have aimed to make URL rewriting by inspector-proxy robust to any configuration of device->server, debugger->server and server->server connections.

Though rewriting was originally introduced to support Android emulator networking, we can now expand it to cover other use cases, like the device reaching the server over an internet address not reachable from the dev machine, or the debugger routing to the server through a tunnel on a different port, without needing CORS workarounds.

Changelog
[General][Fixed] dev-middleware: Rewrite URLs in the inspector proxy to cover all configurations, not just Android emulators.

Reviewed By: huntie

Differential Revision: D66247355

fbshipit-source-id: e9201ebc1f7f5fe2119c71cd4d7b4ca895645404
2024-11-22 10:26:43 -08:00
Rob HoganandFacebook GitHub Bot aae3e03e57 dev-middleware: Refactor urlRegex rewriting, regex-escape IP4 addresses (#47872)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47872

Largely a refactoring to the way we currently rewrite `url`/`urlRegex` in `Debugger.setBreakpointByURL` CDP requests (debugger->target).

Rewriting regexes is fragile, it only really works if we can assume `'localhost'` appears literally and that ports and protocols don't need changing. The intention here is to freeze the current behaviour so as not to break anyone relying on it (if anyone is), and decouple it from more robust rewriting we want to generalise.

Also adds simple regex escaping to host names (always IPv4 addresses) we inject into regex patterns, since the previous approach could've led to false matches in unlikely edge cases.

Changelog:
[General][Fixed] dev-middleware: Regex-escape IP addresses in urlRegex replacements

Reviewed By: huntie

Differential Revision: D66238782

fbshipit-source-id: 4cd0029081d68c193e36d3713057ffdc7ef0656f
2024-11-21 10:09:41 -08:00
Rob HoganandFacebook GitHub Bot 69400be4fc dev-middleware: Only rewrite hostnames if they match device connection hosts (#47685)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47685

Currently, we assume any URL with a hostname of `10.0.2.2` or `10.0.3.2` (device-relative) is eligible for rewriting to `localhost` (frontend-relative), because we assume the device is an Android emulator. We rewrite these URLs between device and dev machine so that the rewritten URLs are reachable from the dev machine.

This diff narrows this logic so that we'll only rewrite URLs where the hostname matches the pre-existing list *and* this matches the host the device is actually connected on, according to its headers from the original connection.

The main motivation for this change is to unblock removing assumptions about device-reachable vs server-reachable hosts. Later in the stack we'll drop the hardcoded listing of `10.0.2.2` etc in favour of identifying URLs that target the dev server, from whatever network.

There's also an edge case fix here that `10.0.2.2` etc might actually refer to a remote LAN server, and not be an Android emulator's alias for for an emulator host.

Changelog:
[General][Fixed] RN DevTools: Don't assume 10.0.2.2 is an alias for localhost unless it's used to establish a connection to the server

Reviewed By: huntie

Differential Revision: D66058704

fbshipit-source-id: bad28717b0c9b1ca43e2ea3391cef13f87892e6c
2024-11-20 06:56:21 -08:00
Rob HoganandFacebook GitHub Bot da62721061 dev-middleware: refactor tests to use undici.request (#47675)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47675

Use `request` over `fetch` in `dev-middleware`'s tests.

This is required by the next diff in the stack to spoof the `Host` header for testing purposes, which isn't permitted by the `fetch` spec.

The return type is a bit different (eg `statusCode` vs `status`, no `ok` prop), but the modifications needed are pretty straightforward.

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D66005427

fbshipit-source-id: f311b0188d6d0ec220a037774fca78df5373163a
2024-11-18 15:14:02 -08:00
Rob HoganandFacebook GitHub Bot acf384a72e dev-middleware: Redefine "serverBaseUrl" as server-relative, '/json/list' by requestor (#47628)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47628

`serverBaseUrl` is currently documented as:

> The base URL to the dev server, as addressible from the local developer machine

This is problematic in general because `dev-middleware` on a server doesn't necessarily know about where clients might be reaching it from, how tunnels or port-forwards are set up, etc., and this can change over the lifetime of the server and vary between clients.

Indeed, our own use of `serverBaseUrl` from both `community-cli-plugin` and internally simply sets it to the host and port the dev server is listening on - ie it's the address of the dev server accessible *from the server*.

This PR changes the docs, redefining `serverBaseUrl`, to match the way we currently specify it.

One usage where we *do* want the previously documented behaviour is in responses to `/json/list` (`getPageDescriptions`) where the URLs in the response should be reachable by a browser requesting `/json/list`.

Here, we use the request (host header, etc.) to attempt to get working base URL.

History:
It should be mentioned that this is the latest in a series of changes like this:
 - https://github.com/facebook/react-native/pull/39394
 - https://github.com/facebook/react-native/pull/39456

Learning from those:
 - This change does *not* break Android emulators, which routes `10.0.2.2` to localhost, or other routed devices, because `/open-debugger` still uses server-relative URLs, and now formally delegates to `BrowserLauncher` to decide what to do with those URLs (internally, VSCode / `xdg-open` handles port forwarding)
 - Middleware configuration is no longer required to specify how it is reachable from clients.

This sets up some subsequent changes for more robust handling of tunnelled connections.

Changelog:
[General][Breaking] dev-middleware: Frameworks should specify `serverBaseUrl` relative to the middleware host.

Reviewed By: huntie

Differential Revision: D65974487

fbshipit-source-id: 1face8fc7715df387f75b329e80932d8543ee419
2024-11-18 13:46:50 -08:00
Rob HoganandFacebook GitHub Bot ca9c56329f dev-middleware: Fix reliance on adb reverse when loading sources on Android (#47652)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47652

## Background
When the `nativeSourceCodeFetching` capability is disabled, `inspector-proxy` rewrites URLs exchanged over CDP between device and frontend so that URLs are addressable from CDT - in particular, when using an Android emulator `10.0.2.2` (host's address from within the emulator) is rewritten to and from `localhost` (the equivalent address reachable from the host).

Previously - before we implemented `Network.loadNetworkResource`, or on old frontends that don't attempt to use that method -  this worked reasonably well. A `fetch` from CDT to Metro would succeed on the rewritten URL.

## Problem
Since we implemented `Network.loadNetworkResource`, but disabled the `nativeSourceCodeFetching` capability, source fetching is broken under Android emulators. We're rewriting URLs to be frontend-relative, but then attempting to fetch them through the device, because as far as CDT is aware, `Network.loadNetworkResource` should still be tried first.

When `Network.loadNetworkResource` responds with a CDP *error*, CDT falls back to a local fetch (which would work), but when it responds with a CDP *result* of `success: false`, there is no fallback.

## Fix
This diff adds an interception guarded behind `nativeSourceCodeFetching == false`, which rejects any calls to `Network.loadNetworkResource` with a CDP error. This restores the previous behaviour from before `Network.loadNetworkResource` was implemented at all.

NOTE: An alternative approach would be to rewrite URLs back to device-relative for `Network.loadNetworkResource`, but IMO it's more correct for the frontend to respect that the device is asserting that it doesn't have that capability, and not to try to use it.

Changelog:
[Android][Fixed] RN DevTools: Fix source loading when using an Android emulator connecting to a dev server on the host.

Reviewed By: huntie

Differential Revision: D66074731

fbshipit-source-id: f2050c014cd5cfa546bff5e9d0412413a5daff35
2024-11-18 12:19:19 -08:00
Alex HuntandFacebook GitHub Bot 6f421230c1 Drop appId from /open-debugger calls, disable matching for modern targets (#47120)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47120

Fixes no-op behaviour of the "Open DevTools" Dev Menu item (bug on `main` introduced with D63329456).

This was caused by a change to the `description` field contents in our CDP `/json/list` response, when under Fusebox. In the `/open-debugger` call from the Dev Menu, we were still using the older `appId` param.

This did not affect `j` to debug, which uses the `target` param.

{F1937186832}

Changes:

In short: Matching against the `description` string is now fully eliminated for modern debugger targets.

- Update native Dev Menu implementation to omit `appId` parameter (`device` param alone is sufficient and fully precise on these platforms).
- Update `/open-debugger` implementation to ignore the `appId` parameter for modern targets, and document this in the `dev-middleware` README.

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D64597581

fbshipit-source-id: 46f536e7d0a4ececab0d52f4c0704e8698466cd0
2024-10-18 11:02:51 -07:00
Tim YungandFacebook GitHub Bot c9ea05552f RN: Fix lint/sort-imports Errors (#47109)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47109

Fixes the `lint/sort-imports` errors that are now surfaced after fixing the lint configuration.

For a couple files, I added lint suppressions instead because the unsorted import ordering is important due to interleaved calls with side effects.

Changelog:
[Internal]

Reviewed By: GijsWeterings

Differential Revision: D64569485

fbshipit-source-id: 26415d792e2b9efe08c05d1436f723faae549882
2024-10-18 04:07:02 -07:00
Edmond ChuiandFacebook GitHub Bot 0d591d9dc3 add appId as a standalone field (#47098)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47098

Changelog: [Internal]

D63329456 updated the `description` field to be human-readable.
Unfortunately, InspectorProxy relies on this field to compare the incoming `/open-debugger` calls.

hoxyq discovered the symptom of Fusebox failing to launch with `No compatible apps connected. React Native DevTools can only be used with the Hermes engine.` in Metro

Reviewed By: hoxyq

Differential Revision: D64547367

fbshipit-source-id: deed6851f3ede2c74be2b492def1eba6e58c43e6
2024-10-17 12:47:05 -07:00
Cedric van PuttenandFacebook GitHub Bot eeb6122f39 fix(dev-middleware): respond with status code 200 when launching RNDT (#46814)
Summary:
This fixes an issue where `POST /open-debugger?appId&device&target` does not return a proper status code, meaning that the request will never be answered and clients might hang until the request timeout is hit.

## 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] - Respond with status code `200` when successfully launching RNDT

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

Test Plan:
- `curl -v -X POST "<deviceUrl>"`
- This should show a proper response for the request.

before | after
 --- | ---
![image](https://github.com/user-attachments/assets/5b820acd-1168-4642-90ec-f2eeec0afc16) | ![image](https://github.com/user-attachments/assets/82bb2a6c-3c7b-483f-a4a1-ad00e5ca0178)

Reviewed By: NickGerleman

Differential Revision: D63837025

Pulled By: huntie

fbshipit-source-id: ac72fc793e015f0eec498f4a35b4fb9e301c5b32
2024-10-04 02:45:59 -07:00
Edmond ChuiandFacebook GitHub Bot 5bbf5a4878 default embedder script for open-source (#46302)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46302

Changelog:
[General][Fixed] - Removed noisy ENOENT error message upon launching the debugger

As described in T200199544, Metro terminal in open-source would show an error message for the missing embedder script.

In this diff, we add a response of an empty file to open-source (no-op)

Reviewed By: hoxyq

Differential Revision: D62103015

fbshipit-source-id: 219bc398b7786527db00528cca175adc13a527a0
2024-09-02 10:33:57 -07:00
Alex HuntandFacebook GitHub Bot 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 HuntandFacebook GitHub Bot 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 PuttenandFacebook GitHub Bot 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
Moti ZilbermanandFacebook GitHub Bot 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
Moti ZilbermanandFacebook GitHub Bot 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 ZilbermanandFacebook GitHub Bot 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 ZilbermanandFacebook GitHub Bot 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 ZilbermanandFacebook GitHub Bot 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
Alex HuntandFacebook GitHub Bot 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 HuntandFacebook GitHub Bot 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
Fabrizio CucciandFacebook GitHub Bot 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
Alex HuntandFacebook GitHub Bot 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
Rob HoganandFacebook GitHub Bot 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
Alex HuntandFacebook GitHub Bot 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
Edmond ChuiandFacebook GitHub Bot 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 HoganandFacebook GitHub Bot 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 PuttenandFacebook GitHub Bot 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 PuttenandFacebook GitHub Bot 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
Moti ZilbermanandFacebook GitHub Bot 4cfac8eea6 Restore Content-Length header in inspector-proxy JSON responses
Summary:
Changelog: [General][Fixed] Re-enable listing Hermes debugger targets in chrome://inspect, broken in 0.74 RC

Fixes https://github.com/facebook/react-native/issues/43259.

Reverts D52958725 and fixes the original `Content-Length` Unicode bug using a different approach.

Reviewed By: fabriziocucci

Differential Revision: D54409847

fbshipit-source-id: ed5bb464ab67f37535947646b124814d8bbf797c
2024-03-01 02:38:48 -08:00
Moti ZilbermanandFacebook GitHub Bot 451fffbb59 Use host-relative WebSocket URLs when launching new debugger
Summary:
Changelog: [Internal]

Uses the capability introduced in https://github.com/facebookexperimental/rn-chrome-devtools-frontend/pull/4 to avoid repeating the dev server's host:port in the `ws` / `wss` parameter we pass to the Chrome DevTools frontend. This gives us more flexibility to handle port forwarding and redirects outside of `dev-middleware`. This is mostly useful in Meta's internal VS Code remoting setup, but this particular change should work equally well in open source.

Reviewed By: huntie

Differential Revision: D54107316

fbshipit-source-id: 68d4dbf4849ca431274bfb0dc8a4e05981bdd5b5
2024-02-26 05:33:18 -08:00
Edmond ChuiandFacebook GitHub Bot 032208d81a Update tests for URL assertions
Summary:
Changelog: [Internal]

Update tests to be more resilient against prod changes; and make it easier to read the actual vs expected values upon failure.

Reviewed By: motiz88

Differential Revision: D53762409

fbshipit-source-id: d627d5041295f645ed00aa5d0645419a9ac4a7f8
2024-02-14 10:37:13 -08:00
Edmond ChuiandFacebook GitHub Bot 496724fbdb Remove URI encoding
Summary:
Changelog: [Internal]

Fixed double-encoding for the websocket url.
`URLSearchParams` already encode the values, passing a pre-encoded `encodeUriComponent` string will cause it to double-encode, making the value unreadable when decoding once.

Missed these lines while splitting the initial diff stack.
Added tests now.

Reviewed By: motiz88

Differential Revision: D53721568

fbshipit-source-id: cfaaa7eb50c40364c904e9ffc5698201df8ab22b
2024-02-14 05:20:46 -08:00
Alex HuntandFacebook GitHub Bot 9ba56f6f5d Remove matching of Modern/Legacy page types (#42885)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/42885

## Context

We're introducing the concept of **capability flags** to provide granular control of behaviours in the Inspector Proxy, to replace the recently added `type: 'Legacy' | 'Modern'` target switch.

A capability flag disables a specific feature/hack in the Inspector Proxy layer by indicating that the target supports one or more modern CDP features.

## This diff

Following D53355413, we're now able to remove the previous `type: 'Legacy' | 'Modern'` page concept, implemented in this diff.

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D53358480

fbshipit-source-id: 62e53a1bd60760291ada3479121dfca9e1f6edbc
2024-02-06 04:09:53 -08:00
Alex HuntandFacebook GitHub Bot 74ea826464 Add nativeSourceCodeFetching capability flag (#42818)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/42818

## Context

We're introducing the concept of **capability flags** to provide granular control of behaviours in the Inspector Proxy, to replace the recently added `type: 'Legacy' | 'Modern'` target switch.

A capability flag disables a specific feature/hack in the Inspector Proxy layer by indicating that the target supports one or more modern CDP features.

## This diff

Implements a second granular flag, `nativeSourceCodeFetching`, and adds tests for this.

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D53352242

fbshipit-source-id: 94b62d84c731c903c5f99f8206d5c91bc501d030
2024-02-06 04:09:53 -08:00
Alex HuntandFacebook GitHub Bot 96db0fd1b6 Add support for target capability flags (#42817)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/42817

## Context

We're introducing the concept of **capability flags** to provide granular control of behaviours in the Inspector Proxy, to replace the recently added `type: 'Legacy' | 'Modern'` target switch.

A capability flag disables a specific feature/hack in the Inspector Proxy layer by indicating that the target supports one or more modern CDP features.

## This diff

- Implements capability flags in `InspectorProxy`, via an optional `"capabilities"` key returned by a device's CDP server.
- Wires up an initial flag, `nativePageReloads`, to disable the legacy "React Native Experimental (Improved Chrome Reloads)" page and emulated page reload behaviour.

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D53352244

fbshipit-source-id: 622fc6028174919b9bf776e3ac52724d97ca2734
2024-02-06 04:09:53 -08:00
Rob HoganandFacebook GitHub Bot cfc0ba04a1 Re-enable InspectorProxy* Jest tests (#42682)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/42682

Since D53125777, these should be safe to re-enable

Changelog:
[Internal] Re-enable dev-middleware InspectorProxy* tests

Reviewed By: huntie

Differential Revision: D53125778

fbshipit-source-id: 38911b5d6f424b46d33bb4dace18c892dc5c8c1a
2024-01-27 06:49:15 -08:00