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

[React DevTools] Component Stacks for Timeline Profiler #24170

Closed
3 tasks
lunaruan opened this issue Mar 25, 2022 · 1 comment · Fixed by #24805
Closed
3 tasks

[React DevTools] Component Stacks for Timeline Profiler #24170

lunaruan opened this issue Mar 25, 2022 · 1 comment · Fixed by #24805

Comments

@lunaruan
Copy link
Contributor

lunaruan commented Mar 25, 2022

In the Timeline Profiler, we currently denote each state update with a dot. If you hover on the state update, you get some information about it, such as which component caused the update, the lane the update was rendered at, and the time that the update happened. This is useful for unique components. However, for components (ex. library components) that are used in multiple places, just having the component name is less helpful.

It would be most useful to get a stack of component owners (like in the rendered by section in the Components tab). However, we only have owner metadata in DEV mode, and it usually only makes sense to profile in production. The next best thing we can do, then, is to get all the parent components and create a stack out of that (ie the return path of the fiber rather than the owner path).

image

We want to add component stacks so that we also know which parent(s) caused the update. For this task, a potential solution is:

  • When a state update happens, walk the fiber's return path and save all the component names and their source. (See markStateUpdateScheduled for code pointers on where to put this)
  • After we're done profiling, process the stack so that we create a stack of return fibers
  • Pass the stack to the DevTools front end and add the component stacks to the UI when a user hovers over a state update
@blakef
Copy link
Contributor

blakef commented May 20, 2022

Screenshot 2022-05-20 at 12 29 12

I've got some basic styling that is good enough. One thing that might come up is I'm passing on a maximum of 5 (hardcoded) components along the return path. The concern is that the return path can get very long, and I'm not sure it's all that useful.

The constraints are:

  • the size of the tooltip, and
  • performance impact of traversing when recording (no data to back this up).

I'm not sure what the number should be, but 5 seemed enough to get more context about which component caused the update.

blakef added a commit to blakef/react that referenced this issue May 20, 2022
You now get some idea of the context of a component that causes a state change,
with the tooltip showing the stack of containing components. This is limited to
at most 5 for now from the originating component.

resolves facebook#24170
blakef added a commit to blakef/react that referenced this issue May 20, 2022
You now get some idea of the context of a component that causes a state change,
with the tooltip showing the stack of containing components. This is limited to
at most 5 for now from the originating component.

resolves facebook#24170
@blakef blakef self-assigned this May 20, 2022
blakef added a commit to blakef/react that referenced this issue Jun 17, 2022
You now get some idea of the context of a component that causes a state change,
with a sidebar listing the component's hierarchy. This additionally allows user
to click on components to link to their source code.

resolves facebook#24170
blakef added a commit to blakef/react that referenced this issue Jun 17, 2022
You now get some idea of the context of a component that causes a state change,
with a sidebar listing the component's hierarchy. This additionally allows user
to click on components to link to their source code.

resolves facebook#24170
blakef added a commit to blakef/react that referenced this issue Jun 17, 2022
You now get some idea of the context of a component that causes a state change,
with a sidebar listing the component's hierarchy. This additionally allows user
to click on components to link to their source code.

resolves facebook#24170
blakef added a commit to blakef/react that referenced this issue Jun 17, 2022
You now get some idea of the context of a component that causes a state change,
with a sidebar listing the component's hierarchy. This additionally allows user
to click on components to link to their source code.

resolves facebook#24170
blakef added a commit to blakef/react that referenced this issue Jun 17, 2022
You now get some idea of the context of a component that causes a state change,
with a sidebar listing the component's hierarchy. This additionally allows user
to click on components to link to their source code.

resolves facebook#24170
blakef added a commit to blakef/react that referenced this issue Jun 17, 2022
You now get some idea of the context of a component that causes a state change,
with a sidebar listing the component's hierarchy. This additionally allows user
to click on components to link to their source code.

resolves facebook#24170
blakef added a commit to blakef/react that referenced this issue Jun 17, 2022
You now get some idea of the context of a component that causes a state change,
with a sidebar listing the component's hierarchy. This additionally allows user
to click on components to link to their source code.

resolves facebook#24170
blakef added a commit to blakef/react that referenced this issue Jun 17, 2022
You now get some idea of the context of a component that causes a state change,
with a sidebar listing the component's hierarchy. This additionally allows user
to click on components to link to their source code.

resolves facebook#24170
blakef added a commit to blakef/react that referenced this issue Jun 27, 2022
Adds a side-bar to the profiling tab. Users can now select an update event, and are
shown the callstack from the originating component. When a source path is available
there is now UI to jump to source.

resolves facebook#24170
blakef added a commit to blakef/react that referenced this issue Jun 28, 2022
Adds a side-bar to the profiling tab. Users can now select an update event, and are
shown the callstack from the originating component. When a source path is available
there is now UI to jump to source.

resolves facebook#24170
blakef added a commit to blakef/react that referenced this issue Jun 28, 2022
Adds a side-bar to the profiling tab. Users can now select an update event, and are
shown the callstack from the originating component. When a source path is available
there is now UI to jump to source.

resolves facebook#24170
blakef added a commit to blakef/react that referenced this issue Jun 28, 2022
Enabled for FB internal only, wrapping the new side-bar.
blakef added a commit that referenced this issue Jun 28, 2022
* [DevTools] front-end for profiling event stack

Adds a side-bar to the profiling tab. Users can now select an update event, and are
shown the callstack from the originating component. When a source path is available
there is now UI to jump to source.

Add FB enabled feature flag: enableProfilerComponentTree for the side-bar.

resolves #24170
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants