Skip to content

Conversation

sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented Aug 9, 2025

Similar to #34144 but for use().

use() dependencies don't get added to the fiber._debugInfo set because that just models the things blocking the children, and not the Fiber component itself. This picks up any debug info from the thenable state that we stashed onto _debugThenableState so that we know it used use().

Screenshot 2025-08-09 at 4 03 40 PM

Without #34146 this doesn't pick up uninstrumented promises but after it, it'll pick those up as well. An instrumented promise that doesn't have anything in its debug info is not picked up. For example, if it didn't depend on any I/O on the server.

This doesn't yet pick up the stack trace of the use() call. That information is in the Hooks information but needs a follow up to extract it.

@sebmarkbage sebmarkbage force-pushed the devtoolsdebuggablestate branch from f4b1e21 to 48d420a Compare August 11, 2025 15:45
@sebmarkbage sebmarkbage force-pushed the devtoolsdebuggablestate branch from 48d420a to 5d19713 Compare August 11, 2025 16:09
@sebmarkbage sebmarkbage merged commit d587434 into facebook:main Aug 11, 2025
178 of 179 checks passed
sebmarkbage added a commit that referenced this pull request Aug 11, 2025
… if any (#34162)

Stacked on #34148.

This picks up the stack for the await from the `use()` Hook if one was
used to get this async info.

When you select a component that used hooks, we already collect this
information.

If you select a Suspense boundary, this lazily invokes the first
component that awaited this data to inspects its hooks and produce a
stack trace for the use().

When all we have for the name is "Promise" I also use the name of the
first callsite in the stack trace if there's more than one. Which in
practice will be the name of the custom Hook that called it. Ideally
we'd use source mapping and ignore listing for this but that would
require suspending the display. We could maybe make the SuspendedByRow
wrapped in a Suspense boundary for this case.

<img width="438" height="401" alt="Screenshot 2025-08-10 at 10 07 55 PM"
src="https://github.com/user-attachments/assets/2a68917d-c27b-4c00-84aa-0ceb51c4e541"
/>
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