Commit Graph
57 Commits
Author SHA1 Message Date
Sam Zhou c120587fe5 Add annotations to fix future natural inference errors in xplat/js: 4/n (#53469)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/53469

Changelog: [Internal]

Reviewed By: marcoww6

Differential Revision: D81067843

fbshipit-source-id: f75116da9be89d35c5befb4c90272ecc67d52caf
2025-08-26 16:42:25 -07:00
Marco Wang 8351a5d186 Pre-Suppress errors for xplat/js for general strict comparison in non-generated files (#53342)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/53342

Commands

```
scripts/flow/tool add-comments --comment 'Error discovered during Constant Condition roll out. See https://fburl.com/workplace/4oq3zi07.' .
```
```
arc f
```

drop-conflicts

Reviewed By: SamChou19815

Differential Revision: D80487235

fbshipit-source-id: 9e7c1a2641ddc0da0400fa1aff598b112a0434d5
2025-08-19 01:09:22 -07:00
Sam Zhou 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 Zhou 35bee1a857 Add annotations to fix future natural inference errors in xplat/js
Summary: Changelog: [Internal]

Reviewed By: marcoww6

Differential Revision: D80207164

fbshipit-source-id: e9a786c83f89a97db8b383812767978c47d9536c
2025-08-13 18:15:27 -07:00
Vitali Zaidman 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
Vitali Zaidman 9af86ab25b renamed CDPMessagesLogging to CdpDebugLogging (#51471)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51471

Changelog: [Internal] renamed CDPMessagesLogging to CdpDebugLogging

Reviewed By: robhogan

Differential Revision: D75062639

fbshipit-source-id: d5c51375ffe1f7275bc48cea514319ac97fe81d4
2025-05-21 06:53:25 -07:00
Tim Yung 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 Zaidman 46f91fd34d Improved the description of the error shown when a previous debugger is closed when a new one is opened (#51296)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51296

Changelog: [General][Internal] Improved the description of the error shown when a previous debugger is closed when a new one is opened

Corresponding DevTools PR:
https://github.com/facebook/react-native-devtools-frontend/pull/162

Reviewed By: hoxyq

Differential Revision: D74657572

fbshipit-source-id: fa601aab22099bbf957e5e66420f94752f03b6f3
2025-05-14 07:23:45 -07:00
Vitali Zaidman 9b4be02ae8 standardize error messages thrown from inspector proxy when connection is closed to debugger (#51227)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51227

Standardize error messages thrown from inspector proxy when connection is closed to debugger and link to where they are used in `react-native-devtools-frontend`

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D74484316

fbshipit-source-id: 7885bc5ea41397539814f97d764c9a376ef50eaa
2025-05-13 04:38:29 -07:00
Alex Hunt 1d8fec19f0 Fix all active ESLint warnings (#50964)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50964

Address/supress ESLint warnings across the codebase, currently flagged on every PR via GitHub's "Unchanged files with check annotations" check.

{F1977480883}

Changelog: [Internal]

Reviewed By: cipolleschi

Differential Revision: D73778510

fbshipit-source-id: 91bed86877eae74fa3b9ebea71e26cdcaeee1761
2025-04-28 09:31:46 -07:00
Vitali Zaidman 71dec84d43 dev-middleware: Remove redundant async queuing (#49982)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49982

In D68708899, we removed dataURI inlining of sources and source maps into `Debugger.scriptParsed` CDP notifications.

After that, all message handling for which we need to preserve order is implemented completely synchronously, so there's no need for a promise queue to preserve order.

This removes the redundant queue.

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D71036230

fbshipit-source-id: d17fb7d06a038b379fe45b4e1c742dbf8ff12f78
2025-03-24 08:43:50 -07:00
Vitali Zaidman f4d2d39ccb add dev middleware ws socket close reasons (#50071)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50071

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

Changelog:
[General][Internal] Send code and close reasons when we close the connection to any websockets from the dev middleware

This should improve the debuggability of our code.

Reviewed By: robhogan

Differential Revision: D71314509

fbshipit-source-id: 1d6fc57a8601bcea78e95a87d423c7c46c51e799
2025-03-17 10:41:47 -07:00
Vitali Zaidman c07334ca03 logging- log socket connection uptime in dev middleware (#50016)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50016

Changelog:
[General][Internal] logging- log socket connection uptime in dev middleware

Reviewed By: robhogan

Differential Revision: D71126344

fbshipit-source-id: 026bac9620ffb933d90db255b59fbf79bfed902b
2025-03-14 09:16:30 -07:00
Vitali Zaidman b899a0013b track maximum cdp proxy messages from device queue size (#49945)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49945

Changelog:
[General][Internal] track maximum cdp messages from device queue size

Reviewed By: robhogan

Differential Revision: D70404011

fbshipit-source-id: 0191301b27f25ab91b2e9549dd14fd9e40bd825e
2025-03-12 13:43:43 -07:00
Vitali Zaidman 21c85ef52d batch debug logging for cdp messages (#49726)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49726

The `InspectorProxy` debug logging became incredibly spammy making it almost unuseful unless the output is manipulated so this commit batches all these cdp messages and only desplays how many were received in the span of 5s. If no messages are received, the throttle is not triggered.

To get the actual CDP messages logged, we still log these to `Metro:InspectorProxyCDPMessages`.

Changelog:
[General][Internal] batch debug logging for cdp messages

Reviewed By: robhogan

Differential Revision: D70324724

fbshipit-source-id: a269302f52e18af6c4be651758c042596abdbad8
2025-03-03 01:49:39 -08:00
Vitali Zaidman 14b0c27045 remove duplicate call to json stringify (#49621)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49621

Changelog:
[General][Internal] - remove duplicate call to json stringify

Reviewed By: robhogan

Differential Revision: D70082245

fbshipit-source-id: 01a4277a73978fcee1fc44b5bc6ae5a728e6b504
2025-02-24 05:07:22 -08:00
Alex Hunt 0d66c524cf Restore Metro log streaming via CLI flag (#49353)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49353

This change adds an opt-in to restore JavaScript log streaming via the Metro dev server, [removed from React Native core in 0.77](https://reactnative.dev/blog/2025/01/21/version-0.77#removal-of-consolelog-streaming-in-metro).

Users can opt into this legacy behaviour by adding the `--client-logs` flag to `npx react-native-community/cli start`.

- The default experience remains without streamed JS logs.
- The existing "JavaScript logs have moved! ..." notice is printed in all cases, and we do not advertise the new flag for new users.
- Under non-Community CLI dev servers (i.e. Expo), log streaming is restored implicitly.

We will clean up this functionality again when we eventually remove JS log streaming over `HMRClient`, tasked in T214991636.

**Implementation notes**

- Logs are always sent over `HMRClient` (previous status quo), even with log streaming off in the dev server. This is a necessary evil to be able to flag this functionality in a user-accessible place, and to move fast for 0.78.
- Necessarily, emitting `fusebox_console_notice` moves to the dev server itself, on first device (Fusebox) connection.

Changelog:
[General][Added] - Add opt in for legacy Metro log streaming via `--client-logs` flag

Reviewed By: robhogan

Differential Revision: D69469039

fbshipit-source-id: be99d02a3b1c977a59bf7d2726f0e6cf2e60b28a
2025-02-12 07:17:15 -08:00
Vitali Zaidman 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
Alex Hunt 7f57018e25 Add profiling_target_registered event, log to terminal (#47968)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47968

Updates the Inspector Proxy to report + log when a profiling build target (experimental) is registered. This notifies the developer that debugging is available for these app(s), which will not otherwise fetch development bundles from Metro.

Changelog: [Internal]

Reviewed By: rubennorte

Differential Revision: D66501771

fbshipit-source-id: e06dee279158094ad5c70bf8e6a90e7c983de48a
2024-11-27 11:42:31 -08:00
Rob Hogan 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 Hogan 5da7ebf99a dev-middleware: Don't assume device-relative and debugger-relative URLs have the same port (#47876)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47876

Currently, if a device is connected to the bundler via, say, `http://10.0.2.2:8081` (Android default), and a debugger is opened on `http://localhost:8081`, we rewrite hostnames `10.0.2.2.`<->`localhost` so that URLs are correct relative to each.

However, if the debugger is on a different port or protocol, this breaks down - because we only rewrite hostnames.

This fixes that by using the debugger's connecting `Host` header and `encrypted` state to derive the base URL of the server relative to the frontend. We then update the rewriting logic to use this actual full origin (protocol + host) in place of the device-relative origin.

Changelog:
[General][Fixed] dev-middleware: Fix URL rewriting where device and debugger reach the server on different ports/protocols.

Reviewed By: huntie

Differential Revision: D66077627

fbshipit-source-id: 01f6565149caa34b1e9e50dd58deb0122485657c
2024-11-21 11:39:20 -08:00
Rob Hogan 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 Hogan 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 Hogan d1b0e9a30b dev-middleware: Use serverBaseUrl for local->server fetches (#47653)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47653

## Context

Currently, when `nativeSourceCodeFetching == false`, `inspector-proxy` attempts to pre-fetch source maps, given the URL from a `Debugger.scriptParsed` event, and embeds them into `Debugger.scriptParsed`'s `sourceMapURL` using a data URI.

This was originally to support frontends that did not perform HTTP requests or were blocked (eg by CORS), but we're retaining it for the moment because it's more performant than lazy loading the source map.

Similarly, we perform middleware->server fetches to respond to `Debugger.getScriptSource` events.

To make these fetches for URLs that target `10.0.2.2` (ie, addressable from within an Android emulator) (etc), we rewrite `10.0.2.2`->`localhost` and perform a `fetch` from the Node process running dev-middleware.

## The problem

Consider a setup where:
 - Metro is running on a remote server, listening on `8081`.
 - Dev machine tunnels `localhost:8082` -> remote `8081`.
 - An app is running on an Android emulator on the dev machine, with bundle URL configured to `10.0.2.2:8082`.

In this case, we'll rewrite `10.0.2.2:8082` to `localhost:8082`, which *is* reachable and correct from the dev machine, but *not* from the machine where Metro is running, so the `fetch` of a source map from the inspector proxy will fail.

## Motivation

This might seem like a niche case, but it's part of fixing a series of unsafe assumptions that currently prevent us from running DevTools on an arbitrary port.

## This fix

Preserve the current behaviour (simple `10.0.2.2`<=>`localhost`) for URLs sent to the frontend, but construct a separate, server-relative URL, using the configured `serverBaseUrl`, for `fetch` calls within dev-middleware.

Changelog:
[General][Fixed] RN DevTools: Fix fetching sources and source maps when the dev-server is remote and not tunnelled via the same port+protocol.

Reviewed By: huntie

Differential Revision: D65993910

fbshipit-source-id: a0cdcf1644e97a2af3d8583f2da2aaa51276f68c
2024-11-18 16:23:53 -08:00
Rob Hogan 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 Hogan 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
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
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 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 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
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
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 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
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
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 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
Alex Hunt 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 Hunt 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 Hunt 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
Alex Hunt 1429378bc0 Improve CDP Flow types (#42816)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/42816

Some refactoring to formalise CDP protocol types (`protocol.js` is aligned with [Chrome's `protocol.d.ts` source](https://github.com/ChromeDevTools/devtools-protocol/blob/master/types/protocol.d.ts)), and to demarcate these from other types in the Inspector Proxy prototol.

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D53352243

fbshipit-source-id: b2e413bdbd6164fd1b8adba6b5853ac107725b34
2024-02-06 04:09:53 -08:00
Moti Zilberman 716c728c7a Distinguish between modern/legacy targets, conditionally disable hacks (#42303)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/42303

Changelog: [Internal]

Adds a coarse-grained mechanism to `inspector-proxy` for distinguishing between legacy and modern debug targets. The guiding principles are:

1. `inspector-proxy` does not interfere in the CDP message stream between the debugger frontend and a modern target, or in the lifecycle of a target.
2. Legacy runtimes (current React Native, React Native Desktop, etc) that rely on `inspector-proxy`'s existing invasive semantics must continue to work seamlessly for now. We'll decide on the right time to deprecate/remove this legacy code in the future.

NOTE: This is an experimental addition to the proxy protocol that may be replaced at any time.

Reviewed By: hoxyq

Differential Revision: D50967795

fbshipit-source-id: bb9c39a8fe755ef3661e2c61507dd324d8dc8894
2024-01-18 07:52:51 -08:00
Moti Zilberman 8ac08c8d18 Deduplicate pages by ID within each device (#42282)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/42282

Changelog: [Internal] `inspector-proxy` now assumes each app will report pages with locally unique IDs.

In order to simplify some upcoming logic changes in `inspector-proxy`, in this diff we begin to enforce the assumption that each app ( = platform-specific implementation of `InspectorPackagerConnection`) assigns a locally unique ID to each inspector page. The inspector proxy will silently drop page descriptors that have conflicting IDs, and log a message to `debug()`.

NOTE: As an implementation detail, integrators may use `DEBUG=Metro:InspectorProxy` to see debug messages from `inspector-proxy`.

Reviewed By: huntie

Differential Revision: D50969752

fbshipit-source-id: a4e6faa91d97594fc5343ce4bee66233523cd175
2024-01-17 22:53:42 -08:00
Moti Zilberman 7a69fe424d Migrate to private member syntax (#42299)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/42299

Changelog: [Internal]

TSIA

Reviewed By: hoxyq

Differential Revision: D52798108

fbshipit-source-id: 9ba980b9fb439b1aeee3eb1b08535b95556d72bb
2024-01-17 08:03:34 -08:00
Ian Park 46d304a101 Add 127.0.0.1 to allowlist for source map fetch
Summary:
Adds ipv4 localhost representation (127.0.0.1) to allowlisted hostnames for the inspector-proxy, to allow for proxied network requests fetching source maps.

Changelog:
[General][Fixed] Allow source map fetching in the inspector proxy from 127.0.0.1

Reviewed By: motiz88

Differential Revision: D52112849

fbshipit-source-id: e6d45fa2fdfd570b7ab4f36121ba615c9b06d442
2023-12-13 04:38:17 -08:00
Oskar Kwaśniewski 7d1a98c43b Lint source files, sort imports, remove unused imports (#41829)
Summary:
This PR lints source files using eslint. I've executed `yarn lint --fix` and also manually fixed some of eslint issues.

Before:

![CleanShot 2023-12-07 at 12 07 10@2x](https://github.com/facebook/react-native/assets/52801365/2b00cf23-e5a0-46b8-802f-adcb67224111)

After:

![CleanShot 2023-12-07 at 12 06 24@2x](https://github.com/facebook/react-native/assets/52801365/bb05b2c0-2b27-4f99-b7b4-cb47a51a3885)

## Changelog:

[GENERAL] [FIXED] - Lint source files, sort imports, remove unused ones

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

Test Plan: CI Green

Reviewed By: christophpurrer

Differential Revision: D51979074

Pulled By: dmytrorykun

fbshipit-source-id: e11b90721e33f5e9949a0833e5f39fe7ba3d1067
2023-12-11 08:54:29 -08:00
Moti Zilberman 1bcd28636f Handle source file / source map fetch errors correctly, add tests (#41342)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41342

While rewriting `Debugger.getScriptSource` messages to fetch code and source map over HTTP, we weren't checking the status code of the fetch calls. This diff fixes that and adds corresponding tests (as well as for the filesystem error case).

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D51013054

fbshipit-source-id: 58e7bb9fcd6a3cf92329b43fb8a139093c80d305
2023-11-08 07:19:40 -08:00