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

Remove top stack frame from getCurrentStack #30306

Merged
merged 1 commit into from
Jul 11, 2024

Conversation

sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented Jul 10, 2024

The full stack is the current execution stack (new Error().stack) + the current owner stack (React.captureOwnerStack()).

The idea with the top frame was that when we append it to console.error we'd include both since otherwise the true reason would be obscured behind the little > to expand. So we'd just put both stack front and center. By adding this into getCurrentStack it was easy to use the same filtering. I never implemented in Fizz or Flight though.

However, with the public API React.captureOwnerStack() it's not necessary to include the current stack since you already have it and you'd have filtering capabilities in user space too.

Since I'm removing the component stacks from React itself we no longer need this. It's expected that maybe RDT or framework polyfill would include this same technique though.

@sebmarkbage sebmarkbage requested a review from hoxyq July 10, 2024 19:19
Copy link

vercel bot commented Jul 10, 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 Jul 10, 2024 7:21pm

let error;
try {
await act(() => {
root.update(
<Suspense fallback={<Text text="Loading..." />}>
<LazyText text="Hi" />
Copy link
Collaborator Author

@sebmarkbage sebmarkbage Jul 10, 2024

Choose a reason for hiding this comment

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

We have a lot of test like this that execute at the top level and so has no owner. Therefore doesn't get any owner stack which means that it doesn't have a component stack which fails our assertions. This is why I usually try to add a single frame if possible. Mainly due to our tests.

https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberComponentStack.js#L143-L156

This test was relying on the top stack to be able to have a single stack frame at all.

We could maybe also add a "Lazy" frame for a lazy component if there's no other owner.

This is all academic though because it only affects our tests that asserts on component stacks and real apps rarely has no owner.

@sebmarkbage sebmarkbage merged commit 433068e into facebook:main Jul 11, 2024
138 checks passed
github-actions bot pushed a commit that referenced this pull request Jul 11, 2024
The full stack is the current execution stack (`new Error().stack`) +
the current owner stack (`React.captureOwnerStack()`).

The idea with the top frame was that when we append it to console.error
we'd include both since otherwise the true reason would be obscured
behind the little `>` to expand. So we'd just put both stack front and
center. By adding this into getCurrentStack it was easy to use the same
filtering. I never implemented in Fizz or Flight though.

However, with the public API `React.captureOwnerStack()` it's not
necessary to include the current stack since you already have it and
you'd have filtering capabilities in user space too.

Since I'm removing the component stacks from React itself we no longer
need this. It's expected that maybe RDT or framework polyfill would
include this same technique though.

DiffTrain build for commit 433068e.
github-actions bot pushed a commit that referenced this pull request Jul 11, 2024
The full stack is the current execution stack (`new Error().stack`) +
the current owner stack (`React.captureOwnerStack()`).

The idea with the top frame was that when we append it to console.error
we'd include both since otherwise the true reason would be obscured
behind the little `>` to expand. So we'd just put both stack front and
center. By adding this into getCurrentStack it was easy to use the same
filtering. I never implemented in Fizz or Flight though.

However, with the public API `React.captureOwnerStack()` it's not
necessary to include the current stack since you already have it and
you'd have filtering capabilities in user space too.

Since I'm removing the component stacks from React itself we no longer
need this. It's expected that maybe RDT or framework polyfill would
include this same technique though.

DiffTrain build for [433068e](433068e)
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