refactor[devtools]: lazily define source for fiber based on component stacks #28351

hoxyq · 2024-02-15T22:37:01Z

_debugSource was removed in #28265.

This PR migrates DevTools to define source for Fiber based on component stacks. This will be done lazily for inspected elements, once user clicks on the element in the tree.

DevToolsComponentStackFrame.js was just copy-pasted from the implementation in ReactComponentStackFrame.

Symbolication part is done in #28471 and stacked on this commit.

sebmarkbage · 2024-02-16T03:56:02Z

Nice. Thanks for doing this!

hoxyq · 2024-02-16T13:48:45Z

Fixed tests.

hoxyq · 2024-02-19T16:08:02Z

packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js

-          Reflect.construct(Fake, []);
-        } catch (x) {
-          control = x;
+  // NOTE: keep in sync with the implementation in ReactComponentStackFrame


This implementation was just copy-pasted from ReactComponentStackFrame.

… stack

hoxyq · 2024-03-05T12:09:44Z

Reviewed by @motiz88 in #28471, so going to land this. Tested this on Chrome / FF extension, standalone shell and inline version.

Stacked on #28351, please review only the last commit. Top-level description of the approach: 1. Once user selects an element from the tree, frontend asks backend to return the inspected element, this is where we simulate an error happening in `render` function of the component and then we parse the error stack. As an improvement, we should probably migrate from custom implementation of error stack parser to `error-stack-parser` from npm. 2. When frontend receives the inspected element and this object is being propagated, we create a Promise for symbolicated source, which is then passed down to all components, which are using `source`. 3. These components use `use` hook for this promise and are wrapped in Suspense. Caching: 1. For browser extension, we cache Promises based on requested resource + key + column, also added use of `chrome.devtools.inspectedWindow.getResource` API. 2. For standalone case (RN), we cache based on requested resource url, we cache the content of it.

* feat[devtools]: symbolicate source for inspected element ([hoxyq](https://github.com/hoxyq) in [#28471](#28471)) * refactor[devtools]: lazily define source for fiber based on component stacks ([hoxyq](https://github.com/hoxyq) in [#28351](#28351)) * fix[devtools/tree/element]: onClick -> onMouseDown to handle first click correctly ([hoxyq](https://github.com/hoxyq) in [#28486](#28486)) * [DOM] disable legacy mode behind flag ([gnoff](https://github.com/gnoff) in [#28468](#28468)) * Fix Broken Links In Documentation ([justindhillon](https://github.com/justindhillon) in [#28321](#28321)) * Update /link URLs to react.dev ([rickhanlonii](https://github.com/rickhanlonii) in [#28477](#28477)) * [tests] add support for @GATE pragma ([gnoff](https://github.com/gnoff) in [#28479](#28479)) * Devtools: Unwrap Promise in useFormState ([eps1lon](https://github.com/eps1lon) in [#28319](#28319)) * Add support for rendering BigInt ([eps1lon](https://github.com/eps1lon) in [#24580](#24580)) * Include server component names in the componentStack in DEV ([sebmarkbage](https://github.com/sebmarkbage) in [#28415](#28415))

… stacks (facebook#28351) `_debugSource` was removed in facebook#28265. This PR migrates DevTools to define `source` for Fiber based on component stacks. This will be done lazily for inspected elements, once user clicks on the element in the tree. `DevToolsComponentStackFrame.js` was just copy-pasted from the implementation in `ReactComponentStackFrame`. Symbolication part is done in facebook#28471 and stacked on this commit.

) Stacked on facebook#28351, please review only the last commit. Top-level description of the approach: 1. Once user selects an element from the tree, frontend asks backend to return the inspected element, this is where we simulate an error happening in `render` function of the component and then we parse the error stack. As an improvement, we should probably migrate from custom implementation of error stack parser to `error-stack-parser` from npm. 2. When frontend receives the inspected element and this object is being propagated, we create a Promise for symbolicated source, which is then passed down to all components, which are using `source`. 3. These components use `use` hook for this promise and are wrapped in Suspense. Caching: 1. For browser extension, we cache Promises based on requested resource + key + column, also added use of `chrome.devtools.inspectedWindow.getResource` API. 2. For standalone case (RN), we cache based on requested resource url, we cache the content of it.

* feat[devtools]: symbolicate source for inspected element ([hoxyq](https://github.com/hoxyq) in [facebook#28471](facebook#28471)) * refactor[devtools]: lazily define source for fiber based on component stacks ([hoxyq](https://github.com/hoxyq) in [facebook#28351](facebook#28351)) * fix[devtools/tree/element]: onClick -> onMouseDown to handle first click correctly ([hoxyq](https://github.com/hoxyq) in [facebook#28486](facebook#28486)) * [DOM] disable legacy mode behind flag ([gnoff](https://github.com/gnoff) in [facebook#28468](facebook#28468)) * Fix Broken Links In Documentation ([justindhillon](https://github.com/justindhillon) in [facebook#28321](facebook#28321)) * Update /link URLs to react.dev ([rickhanlonii](https://github.com/rickhanlonii) in [facebook#28477](facebook#28477)) * [tests] add support for @GATE pragma ([gnoff](https://github.com/gnoff) in [facebook#28479](facebook#28479)) * Devtools: Unwrap Promise in useFormState ([eps1lon](https://github.com/eps1lon) in [facebook#28319](facebook#28319)) * Add support for rendering BigInt ([eps1lon](https://github.com/eps1lon) in [facebook#24580](facebook#24580)) * Include server component names in the componentStack in DEV ([sebmarkbage](https://github.com/sebmarkbage) in [facebook#28415](facebook#28415))

… stacks (#28351) `_debugSource` was removed in #28265. This PR migrates DevTools to define `source` for Fiber based on component stacks. This will be done lazily for inspected elements, once user clicks on the element in the tree. `DevToolsComponentStackFrame.js` was just copy-pasted from the implementation in `ReactComponentStackFrame`. Symbolication part is done in #28471 and stacked on this commit. DiffTrain build for commit 61bd004.

hoxyq requested review from sebmarkbage and rickhanlonii February 15, 2024 22:37

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Feb 15, 2024

hoxyq force-pushed the devtools/use-component-stacks-for-defining-source-for-fiber branch from 39f88cc to b3aa93f Compare February 15, 2024 22:38

hoxyq force-pushed the devtools/use-component-stacks-for-defining-source-for-fiber branch from b3aa93f to 440fc26 Compare February 16, 2024 13:30

hoxyq commented Feb 19, 2024

View reviewed changes

hoxyq changed the title ~~refactor[devtools]: lazily define source for fiber based on component stacks~~ [WIP] refactor[devtools]: lazily define source for fiber based on component stacks Feb 27, 2024

hoxyq force-pushed the devtools/use-component-stacks-for-defining-source-for-fiber branch 3 times, most recently from 38f04cf to c9b900b Compare February 28, 2024 23:15

hoxyq mentioned this pull request Feb 29, 2024

feat[devtools]: symbolicate source for inspected element #28471

Merged

hoxyq changed the title ~~[WIP] refactor[devtools]: lazily define source for fiber based on component stacks~~ refactor[devtools]: lazily define source for fiber based on component stacks Feb 29, 2024

hoxyq requested review from EdmondChuiHW, motiz88, huntie and robhogan and removed request for sebmarkbage and rickhanlonii February 29, 2024 12:03

hoxyq force-pushed the devtools/use-component-stacks-for-defining-source-for-fiber branch 2 times, most recently from f8f6b78 to fe9a20a Compare March 4, 2024 23:06

refactor[devtools]: lazily define source for fiber based on component…

e450e6b

… stack

hoxyq force-pushed the devtools/use-component-stacks-for-defining-source-for-fiber branch from fe9a20a to e450e6b Compare March 5, 2024 08:55

hoxyq merged commit 61bd004 into facebook:main Mar 5, 2024
38 checks passed

hoxyq deleted the devtools/use-component-stacks-for-defining-source-for-fiber branch March 5, 2024 12:10

hoxyq mentioned this pull request Mar 5, 2024

React DevTools 5.0.1 -> 5.0.2 #28496

Merged

ztanner mentioned this pull request Mar 18, 2024

Update React from 6c3b8dbfe to a4939017f vercel/next.js#63413

Closed

gnoff mentioned this pull request Mar 25, 2024

Update React from 14898b6a9 to e373190fa vercel/next.js#63685

Closed

ztanner mentioned this pull request Apr 2, 2024

Update React from 14898b6a9 to a870b2d54 vercel/next.js#63976

Closed

eps1lon mentioned this pull request Apr 19, 2024

Update React from 14898b6a9 to c3048aab4 vercel/next.js#64798

Merged

infi-pc mentioned this pull request Apr 23, 2024

bug: Not working in NextJs 14.2.2 infi-pc/locatorjs#153

Open

3 tasks

kmagiera mentioned this pull request May 13, 2024

Element inspector doesn't work in RN 74 software-mansion/radon-ide#240

Closed

This was referenced May 19, 2024

[React 19] Fiber is missing a debug information #29092

Closed

[DevTools Bug]: Version 5.2 shows incorrect source for all the components #29164

Open

dankoster mentioned this pull request Jun 24, 2024

Incorrect line numbers in some projects dankoster/figment#4

Open

ArnaudBarre mentioned this pull request Dec 23, 2024

Not working with React 19 ArnaudBarre/vite-plugin-react-click-to-component#8

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor[devtools]: lazily define source for fiber based on component stacks #28351

refactor[devtools]: lazily define source for fiber based on component stacks #28351

hoxyq commented Feb 15, 2024 •

edited

Loading

sebmarkbage commented Feb 16, 2024

hoxyq commented Feb 16, 2024

hoxyq Feb 19, 2024

hoxyq commented Mar 5, 2024

refactor[devtools]: lazily define source for fiber based on component stacks #28351

refactor[devtools]: lazily define source for fiber based on component stacks #28351

Conversation

hoxyq commented Feb 15, 2024 • edited Loading

sebmarkbage commented Feb 16, 2024

hoxyq commented Feb 16, 2024

hoxyq Feb 19, 2024

Choose a reason for hiding this comment

hoxyq commented Mar 5, 2024

hoxyq commented Feb 15, 2024 •

edited

Loading