Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix[react-devtools]: record timeline data only when supported #31154

Conversation

hoxyq
Copy link
Contributor

@hoxyq hoxyq commented Oct 8, 2024

Stacked on #31132. See last commit.

There are 2 issues:

  1. We've been recording timeline events, even if Timeline Profiler was not supported by the Host. We've been doing this for React Native, for example, which would significantly regress perf of recording a profiling session, but we were not even using this data.
  2. Currently, we are generating component stack for every state update event. This is extremely expensive, and we should not be doing this.

We can't currently fix the second one, because we would still need to generate all these stacks, and this would still take quite a lot of time. As of right now, we can't generate a component stack lazily without relying on the fact that reference to the Fiber is not stale. With enableOwnerStacks we could populate component stacks in some collection, which would be cached at the Backend, and then returned only once Frontend asks for it. This approach also eliminates the need for keeping a reference to a Fiber.

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Oct 8, 2024
@hoxyq hoxyq changed the title React devtools/only record timeline data when requested fix[react-devtools]: record timeline data only when supported Oct 8, 2024
Copy link

vercel bot commented Oct 8, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-compiler-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 9, 2024 1:27pm

) {
const mergedProfilingSettings: ProfilingSettings | void =
typeof profilingSettings === 'object' && profilingSettings != null
? {...profilingSettings, recordTimeline: false}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wait so does it mean we will never respect recordTimeline: true pass in from initialize? Could we add a comment explaining this? e.g. if store is the only way to set this to true

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, yeah, I should just default it to false here. Forgot that react-devtools-core might be used not only for React Native.

@hoxyq hoxyq force-pushed the react-devtools/only-record-timeline-data-when-requested branch from 0415673 to 2b2d55e Compare October 9, 2024 13:25
@hoxyq hoxyq merged commit d5bba18 into facebook:main Oct 9, 2024
184 checks passed
@hoxyq hoxyq deleted the react-devtools/only-record-timeline-data-when-requested branch October 9, 2024 14:27
hoxyq added a commit that referenced this pull request Oct 15, 2024
Fixes tests against React 18 after
#31154:
- Set `supportsTimeline` to true for `Store`.
- Execute `store.profilerStore.startProfiling` after `legacyRender`
import, because this is where `react-dom` is imported and renderer is
registered. We don't yet propagate `isProfiling` flag to newly
registered renderers, when profiling already started see:

https://github.com/facebook/react/blob/d5bba18b5d81f234657586865248c5b6849599cd/packages/react-devtools-shared/src/hook.js#L203-L204
hoxyq added a commit that referenced this pull request Oct 15, 2024
Changes in this release:

* Fix React Compiler badging ([poteto](https://github.com/poteto) in
[#31196](#31196))
* fix[react-devtools]: fixed timeline profiler tests
([hoxyq](https://github.com/hoxyq) in
[#31261](#31261))
* fix[react-devtools]: record timeline data only when supported
([hoxyq](https://github.com/hoxyq) in
[#31154](#31154))
* refactor[react-devtools]: flatten reload and profile config
([hoxyq](https://github.com/hoxyq) in
[#31132](#31132))
* fix[react-devtools]: remove all listeners when Agent is shutdown
([hoxyq](https://github.com/hoxyq) in
[#31151](#31151))
* fix[react-devtools]: removed redundant startProfiling call
([hoxyq](https://github.com/hoxyq) in
[#31131](#31131))
* refactor[react-devtools/fiber/renderer]: optimize durations resolution
([hoxyq](https://github.com/hoxyq) in
[#31118](#31118))
* fix[react-devtools]: update profiling status before receiving response
from backend ([hoxyq](https://github.com/hoxyq) in
[#31117](#31117))
* fix[react-devtools]: wrap key string in preformatted text html element
([hoxyq](https://github.com/hoxyq) in
[#31153](#31153))
* chore[react-devtools]: drop legacy context tests
([hoxyq](https://github.com/hoxyq) in
[#31059](#31059))
* chore[react-devtools]: add legacy mode error message to the ignore
list for tests ([hoxyq](https://github.com/hoxyq) in
[#31060](#31060))
* fix[react-devtools]: request hook initialization inside http server
response ([hoxyq](https://github.com/hoxyq) in
[#31102](#31102))
* [Flight] Serialize Server Components Props in DEV
([sebmarkbage](https://github.com/sebmarkbage) in
[#31105](#31105))
* Add: reload to profile for Fusebox
([EdmondChuiHW](https://github.com/EdmondChuiHW) in
[#31021](#31021))
* refactor: allow custom impl of backend realod-to-profile support check
([EdmondChuiHW](https://github.com/EdmondChuiHW) in
[#31048](#31048))
* fix: use public instance in Fiber renderer and expose it from
getInspectorDataForViewAtPoint ([hoxyq](https://github.com/hoxyq) in
[#31068](#31068))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants