RFC: Decoupling Flipper from React Native core by huntie · Pull Request #641 · react-native-community/discussions-and-proposals

huntie · 2023-04-27T14:05:55Z

Outlines our intent to no longer include Flipper's native integration in React Native 0.74, and to replace Flipper's JS debugging experience in React Native 0.73 with an equivalent one-click debugging flow leveraging Chrome DevTools.

View the rendered RFC

acoates-ms · 2023-05-10T15:16:59Z

Looks good from a react-native-windows perspective.

thymikee · 2023-05-10T16:19:27Z

Good from RN CLI point of view. Since we're essentially losing all the non-js debugging tools working out-of-the-box with Flipper, I'd put emphasis on how to integrate Flipper again to one's codebase. I believe this part is missing in the RFC – what would be the actions that a user needs to take to integrate Flipper after e.g. installing this new package.

usrbowe · 2023-05-15T02:52:09Z

Does this only include Hermes, or this option can be also enabled for JSC (via some proxy server).
Although the JSC likely does not expose Network requests as compared to Hermes.

Also this got me thinking for extensibility option. Would we be able to install custom chrome extensions? Like leverage existing React DevTools or some of state management library DevTools?
Feels like now we heading direction, where we have two separate DevTools (Chrome DevTools and Flipper). So might cause a bit of friction to switch between those depending on the need.
We could technically have also lighter version of Flipper integration, which would only work for JS realm of RN, then we can initiate the connection via js-flipper.

zoontek · 2023-05-16T07:26:40Z

Looks great! Do you have an idea on how will it play with RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD?

kneth · 2023-06-07T17:46:07Z

@huntie @cortinico As a library maintainer, the Realm team has a few comments:

We've been very pleased with the transition to running JavaScript on device when debugging and attaching via the Chrome DevTools Protocol, for apps running Hermes.
So much so, we've removed support for debugging apps using Realm, via the legacy Chrome debugger (which ran JS code in the browser).
We've invested in plugins for Flipper to browse the Realm database in a running app on device.
Of course we're a bit sad that we have sunk cost invested in a product which is no longer enabled by default. And we don't expect to be prioritising work on this until we see the future of Flipper materialising. We do however hope to see Flipper getting revived in some shape or form in the future.
What's vital to us, is that execution of JavaScript stays on device as that's a prerequisite for a performant debugging experience for an app using Realm.

huntie · 2023-06-08T11:19:34Z

@kneth @usrbowe

JSC debugging, on-device debugging

JSC debugging is something we're reviewing ahead of 0.73, but is independent from this proposal (which focuses on Hermes+Flipper → Hermes+DevTools).
The last action around this is removing JSC remote debugging in the Dev Menu (again for 0.73).
- Remove remote debugging from dev menu react/react-native#36754
- Debugging via this method had become broken, and we will be investigating what we can do to re-enable this capability.

What's vital to us, is that execution of JavaScript stays on device

Certainly, we're aligned with this — our hope is for all JavaScript execution and debugging to be on device, for all supported JavaScript engines.
- This will absolutely be the case for Hermes, which is our default and recommended JavaScript engine.

On the future of Flipper and custom plugins

We do however hope to see Flipper getting revived in some shape or form in the future.

The Flipper team will continue maintaining Flipper as a tool, but will not explicitly support React Native use cases.
- Without the default React Native integration, Flipper setup will remain identical to the manual setup currently in the Realm docs. Users can still be directed to this for use cases where a Flipper plugin is needed.
Flipper can coexist with our new default debugging setup, however we are seeking an interested partner to maintain this integration for the community beyond 0.73. New debugging investments from the React Native team will be centred on our Chrome DevTools workflow.

Would we be able to install custom chrome extensions? Like leverage existing React DevTools or some of state management library DevTools?

This will be a medium term gap that is only supported by Flipper today.
- As stated, this RFC is not the end state for React Native debugging — we acknowledge that plugins are an important need for users (e.g. previously filled by react-native-debugger). For these use cases, opting into Flipper will remain necessary.
- We would like a future iteration of our Chrome DevTools Protocol-based experience to support plugins for debugging JavaScript concepts (particularly for state management libraries such as Relay), but cannot commit to this happening within 2023.
- ⬆️ Hopefully, we can share some more news in the coming months.
React DevTools specifically will be included as a one-click workflow for 0.73 (as a standalone window).

kneth · 2023-06-08T12:49:02Z

@huntie Thank you for the comments, and addressing our concerns. We are happy to see that you also believe that debugging on device is here to stay (and we don't need to maintain a poor shadow implementation of Realm). Of course it will be ideal to support both JSC and Hermes, but for now it is fine to push users in the direction of Hermes.

huntie · 2023-06-21T13:27:18Z

Update: Amended timelines

Just pushed an edit following some of this feedback and our internal discussions.

We're now aiming for a slower timeline. We will deprecate the Flipper integration in 0.73 (remaining on by default), and will remove it in 0.74. This allows more time for the community to be aware of these changes and adapt to the new tooling.
Replacing the Dev Menu actions with non-Flipper replacement flows remains targeted for 0.73.

Note: React Native release dates are not official — just my best guess.

cortinico

LGTM

Pranav-yadav · 2023-06-30T07:05:08Z

We're now aiming for a slower timeline. We will deprecate the Flipper integration in 0.73 (remaining on by default), and will remove it in 0.74. This allows more time for the community to be aware of these changes and adapt to the new tooling.
Replacing the Dev Menu actions with non-Flipper replacement flows remains targeted for 0.73.

@huntie could you please also change the PR desc to add ⬆️.

Not much but the PR link previews are somewhat misleading ;)

Summary: Pull Request resolved: react#38240 ## Context RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641 ## Changes To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo. The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo: - `yarn build` - `yarn clean` - `yarn watch` Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`. ``` const buildConfig /*: BuildConfig */ = { // The packages to include for build and their build options packages: { 'dev-middleware': {target: 'node'}, }, }; ``` For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions. {F1043312771} ## Current integration points - `.circleci/config.yml` — Added to `run_yarn` (with project install). - Root `yarn start` — Convenience for local developers. - `yarn start` within `packages/rn-tester` — Convenience for local developers. **Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages: - https://reactnative.dev/contributing/overview#contributing-code - https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes **This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR. ### Alternative designs **Per-package config file** Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4). ``` "buildConfig": { "type": "node" }, ``` This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`. **Rollup** More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well). **Lerna and Nx** - Most sophisticated setup enabling caching and optimised cloud runs. - Probably the most likely thing we'll move towards at a later stage. Changelog: [Internal] Differential Revision: D46759508 fbshipit-source-id: f16807abaa38035eccbcf416c5b08da924f44f2e

Summary: Pull Request resolved: react#38240 ## Context RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641 ## Changes To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo. The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel and Chokidar. These are available as build commands at the root of the repo: - `yarn build` - `yarn clean` - `yarn watch` Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`. ``` const buildConfig /*: BuildConfig */ = { // The packages to include for build and their build options packages: { 'dev-middleware': {target: 'node'}, }, }; ``` For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions. {F1043312771} ## Current integration points - `.circleci/config.yml` — Added to `run_yarn` (with project install). - Root `yarn start` — Convenience for local developers. - `yarn start` within `packages/rn-tester` — Convenience for local developers. **Planned**: I will be adding notes on `yarn build` to the following "Contributing" website pages: - https://reactnative.dev/contributing/overview#contributing-code - https://reactnative.dev/contributing/how-to-open-a-pull-request#chapter-ii-implementing-your-changes **This is not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR. ### Alternative designs **Per-package config file** Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4). ``` "buildConfig": { "type": "node" }, ``` This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`. **Rollup** More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well). **Lerna and Nx** - Most sophisticated setup enabling caching and optimised cloud runs. - Probably the most likely thing we'll move towards at a later stage. Changelog: [Internal] Differential Revision: D46759508 fbshipit-source-id: af17e146b2f6f6f14156ae7784f61f3a4bfffbee

Summary: Pull Request resolved: #38718 > NOTE: Replaces #38240 ## Context RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641 ## Changes To support incoming new React Native packages around debugging (including migrating over [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro)) — which target Node.js and require a build step, this PR adds a minimal shared build setup across the `react-native` monorepo. The setup is closely inspired/based on the build scripts in Jest, Metro, and React Native CLI — and is a simple set of script wrappers around Babel. These are available as build commands at the root of the repo: - `yarn build` — Builds all configured packages. Functionally, this: - Outputs a `dist/` directory with built files. - Rewrites package.json `"exports"` to update every `./src/*` reference to `./dist/*` (source of truth). - `scripts/build/babel-register.js` — Allows running all Node.js entry points from source, similar to the current setup in [facebook/metro](https://github.com/facebook/metro). (Example entry point file in this PR: `packages/dev-middleware/src/index.js`) Build configuration (i.e. Babel config) is shared as a set standard across the monorepo, and **packages are opted-in to requiring a build**, configured in `scripts/build.config.js`. ``` const buildConfig /*: BuildConfig */ = { // The packages to include for build and their build options packages: { 'dev-middleware': {target: 'node'}, }, }; ``` For now, there is a single `target: 'node'` option — this is necessary as `react-native`, unlike the above other projects, is a repository with packages targeting several runtimes. We may, in future, introduce a build step for other, non-Node, packages — which may be useful for things such as auto-generated TypeScript definitions. {F1043312771} **Differences from the Metro setup** - References (and compiles out) repo-local `scripts/build/babel-register.js` — removing need for an npm-published dependency. ## Current integration points - **CircleCI** — `yarn build` is added to the `build_npm_package` and `find_and_publish_bumped_packages` jobs. **New Node.js package(s) are not load bearing quite yet**: There are not yet any built packages added to the dependencies of `packages/react-native/`, so this will be further tested in a later PR (and is actively being done in an internal commit stack). ### Alternative designs **Per-package config file** Replace `scripts/build/config.js` with a package-defined key in in `package.json`, similar to Jest's [`publishConfig`](https://github.com/jestjs/jest/blob/1f019afdcdfc54a6664908bb45f343db4e3d0848/packages/jest-cli/package.json#L87C3-L89C4). ``` "buildConfig": { "type": "node" }, ``` This would be the only customisation required, with a single Babel config still standardised. Another option this might receive in future is `enableTypeScriptCodgeen`. **Rollup** More sophisticated build tool for Node.js, used by the React codebase (albeit within a custom script setup as well). **Lerna and Nx** - Most sophisticated setup enabling caching and optimised cloud runs. - Probably the most likely thing we'll move towards at a later stage. Changelog: [Internal] Reviewed By: NickGerleman Differential Revision: D47760330 fbshipit-source-id: 38ec94708ce3d9946a197d80885781e9707c5841

Summary: Pull Request resolved: #38795 ## Context RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641 ## Changes Inits new package `react-native/community-cli-plugin`. This migrates [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro) into the React Native repo, to enable faster iteration by the React Native core team. Specifically: - This package contains several `metro` dependencies, which when removed from CLI will no longer require us to ship new CLI releases to get Metro patches and features to users. - This package contains the `start`, `bundle`, and `ram-bundle` commands (central to the React Native development experience), for which we have incoming debugging-related changes. - This package now **only** exports commands to be attached via a RN CLI plugin. With this move, we're aiming to **internalise** the default implementations of these dev commands within React Native — other RN CLI plugins can continue to override these, but must do so wholesale. (See also the recent fix for this: react-native-community/cli#1999.) In V15: - (Microsoft feedback) Re-export `unstable_buildBundleWithConfig`, marking as unstable. This gives us a time buffer to consider how we repackage this functionality in future. The package source has been converted from TypeScript to Flow, with a number of new `flow-typed/` defs added to meet type coverage requirements. ## To dos - For now, we aren't removing the existing [`react-native-community/cli-plugin-metro`](https://github.com/react-native-community/cli/tree/main/packages/cli-plugin-metro) source — until later PRs consolidate this move by changing dependencies in the `react-native` package. - **Exported API is reduced!**: I'm working with szymonrybczak to decouple references from RN CLI packages react-native-community/cli#2021. Changelog: [Internal] Reviewed By: motiz88 Differential Revision: D46801501 fbshipit-source-id: 7f6b72941a69f487fb437768cdba125a9aa3418d

Summary: X-link: react/react-native#39045 ## Context RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641 ## Changes - Relocates `metro-inspector-proxy` source from the Metro repo into the React Native repo as part of the `react-native/dev-middleware` package. - Drops the `runInspectorProxy` entry point. - Attaches the Inspector Proxy to the `createDevMiddleware()` API as the new integration point for this functionality. - Documents migrated endpoints + usage of `createDevMiddleware()` in README. Changelog: [Internal] Metro changelog: None (`metro-inspector-proxy` is now an internal component of `react-native`, covered in the [release notes for 0.78.1](https://github.com/facebook/metro/releases/tag/v0.78.1)) Reviewed By: motiz88, blakef Differential Revision: D48066213 fbshipit-source-id: 3fbef5d881f6f451cb5955dcbbc362c53347437e

Summary: Pull Request resolved: #39045 ## Context RFC: Decoupling Flipper from React Native core: react-native-community/discussions-and-proposals#641 ## Changes - Relocates `metro-inspector-proxy` source from the Metro repo into the React Native repo as part of the `react-native/dev-middleware` package. - Drops the `runInspectorProxy` entry point. - Attaches the Inspector Proxy to the `createDevMiddleware()` API as the new integration point for this functionality. - Documents migrated endpoints + usage of `createDevMiddleware()` in README. Changelog: [Internal] Metro changelog: None (`metro-inspector-proxy` is now an internal component of `react-native`, covered in the [release notes for 0.78.1](https://github.com/facebook/metro/releases/tag/v0.78.1)) Reviewed By: motiz88, blakef Differential Revision: D48066213 fbshipit-source-id: 3fbef5d881f6f451cb5955dcbbc362c53347437e

jbrodriguez · 2023-11-01T20:01:02Z

is there a proposal for a network tab ? being able to look at network requests is in many cases critical for troubleshooting

huntie · 2023-11-15T11:25:30Z

@jbrodriguez Debugging via the Network tab in Chrome DevTools is definitely in our long term plans! We are likely to begin working on this in 2024 (no promises on when this ships, though!). We will be prefacing this work with some necessary foundational improvements to how we implement CDP in React Native.

We will be sharing more of our debugging plans publicly in future. Until then, here's a couple of links:

[Talk] DevX improvements in 0.73 and a preview of future debugging features: https://youtu.be/-rCRgbsJumk?si=Tf903PUCH3zWUBRV&t=753
[Discussions] Public notes from the Debugging Working Group (monthly meeting held between React Native partners): https://github.com/react-native-community/developer-experience-wg/discussions/categories/debugging

wrldh · 2024-07-15T15:36:30Z

Well done, RN team! Drop Flipper support and providing nothing for Network debugging instead. You've made my life easier.

huntie changed the title ~~WIP (reserved)~~ WIP: Flipper and JS debugging Apr 27, 2023

huntie force-pushed the flipper-and-js-debugging branch from 876ca21 to 7012ae0 Compare May 10, 2023 12:19

huntie changed the title ~~WIP: Flipper and JS debugging~~ Decoupling Flipper from React Native core May 10, 2023

huntie force-pushed the flipper-and-js-debugging branch from 7012ae0 to 6be3baa Compare May 10, 2023 12:22

huntie changed the title ~~Decoupling Flipper from React Native core~~ RFC: Decoupling Flipper from React Native core May 10, 2023

huntie marked this pull request as ready for review May 10, 2023 12:25

liamjones mentioned this pull request May 10, 2023

Impossible to debug on Android with JSC under new version of Realm? realm/realm-js#4364

Closed

thymikee reviewed May 10, 2023

View reviewed changes

Comment thread proposals/0641-decoupling-flipper-from-react-native-core.md

huntie force-pushed the flipper-and-js-debugging branch from 6be3baa to a1a6d3a Compare May 12, 2023 06:22

This comment was marked as spam.

Sign in to view

thymikee mentioned this pull request May 22, 2023

[react-native init] Add a flag to exclude Flipper installation #655

Closed

tido64 mentioned this pull request May 25, 2023

Breaking changes in 3.0 microsoft/react-native-test-app#1153

Closed

16 tasks

cortinico mentioned this pull request May 31, 2023

App crashes with cryptic error when archived: _ZN10TypedArrayIL14TypedArrayKind react/react-native#37619

Closed

RFC: Decoupling Flipper from React Native core

6aa29a8

huntie force-pushed the flipper-and-js-debugging branch from a1a6d3a to 6aa29a8 Compare June 21, 2023 13:27

cortinico approved these changes Jun 21, 2023

View reviewed changes

huntie merged commit b604cf3 into react-native-community:main Jun 21, 2023

huntie deleted the flipper-and-js-debugging branch June 21, 2023 14:56

morganick mentioned this pull request Jun 22, 2023

[iOS Simulator] App fails to reload when using custom fonts and New Relic agent newrelic/newrelic-react-native-agent#108

Closed

huntie mentioned this pull request Jul 5, 2023

Create dev-middleware package react/react-native#38194

Closed

hoxyq mentioned this pull request Jul 13, 2023

Persist user preferences of React DevTools when debugging with Flipper react/react-native#29839

Open

huntie mentioned this pull request Aug 1, 2023

Add shared monorepo build setup react/react-native#38718

Closed

huntie mentioned this pull request Aug 4, 2023

Migrate cli-plugin-metro into repo react/react-native#38795

Closed

This was referenced Aug 16, 2023

Move metro-inspector-proxy into dev-middleware react/react-native#39045

Closed

Integrate dev-middleware into start command react/react-native#39059

Closed

huntie mentioned this pull request Aug 23, 2023

Remove Flipper actions in Dev Menu, add new Open Debugger action (iOS) react/react-native#39124

Closed

This was referenced Sep 1, 2023

Remove Flipper actions in Dev Menu, add new Open Debugger action (Android) react/react-native#39254

Closed

Add 'j' to debug key handler react/react-native#39256

Closed

Saadnajmi mentioned this pull request Sep 21, 2023

Bump SocketRocket to 0.7.0 react/react-native#39571

Closed

lunaleaps mentioned this pull request Feb 13, 2024

Debugging iOS issue after upgrade to version 0.73 react/react-native#42999

Closed

mobinahmed mentioned this pull request Mar 7, 2024

FlipperKit cocoapod versions missing for latest releases (0.176.0, 0.176.1 & 0.177.0) facebook/flipper#4382

Open

dev-dong-su mentioned this pull request Mar 14, 2024

fix: android, ios build error gloddy-dev/gloddy-client#659

Merged

leotm mentioned this pull request Apr 8, 2024

SES lockdown Hermes compat tracking issue endojs/endo#1891

Closed

27 tasks

cortinico mentioned this pull request Apr 24, 2024

com.facebook.react:flipper-integration which is missing the version number on v0.73.0 react/react-native#41876

Closed

amir-ibrahim mentioned this pull request Apr 24, 2024

"Could not find com.facebook.react:flipper-integration" error with new Android Studio and react native 0.73.7 facebook/flipper#5586

Closed

fcaldarelli mentioned this pull request May 15, 2024

Flipper doesn't build with Xcode "react-native": "0.70.0", facebook/flipper#4278

Open

fabiendem mentioned this pull request Jun 27, 2024

Use the tool on a React Native project without Flipper or react-native-debugger app apollographql/apollo-client-devtools#1420

Open

jiaoxiaoyuan mentioned this pull request Aug 4, 2025

如何在大于 0.73 版本中手动添加 Flipper react/react-native#53004

Closed

Uh oh!

Conversation

huntie commented Apr 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

View the rendered RFC

Uh oh!

acoates-ms commented May 10, 2023

Uh oh!

thymikee commented May 10, 2023

Uh oh!

Uh oh!

usrbowe commented May 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zoontek commented May 16, 2023

Uh oh!

This comment was marked as spam.

This comment was marked as spam.

kneth commented Jun 7, 2023

Uh oh!

huntie commented Jun 8, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kneth commented Jun 8, 2023

Uh oh!

huntie commented Jun 21, 2023

Uh oh!

cortinico left a comment

Choose a reason for hiding this comment

Uh oh!

Pranav-yadav commented Jun 30, 2023

Uh oh!

jbrodriguez commented Nov 1, 2023

Uh oh!

huntie commented Nov 15, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wrldh commented Jul 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

12 participants

huntie commented Apr 27, 2023 •

edited

Loading

usrbowe commented May 15, 2023 •

edited

Loading

huntie commented Jun 8, 2023 •

edited

Loading

huntie commented Nov 15, 2023 •

edited

Loading

wrldh commented Jul 15, 2024 •

edited

Loading