[DevTools] Source Map Stack Traces such in await locations #34094
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
React Core Team
eps1lon
reviewed
Aug 4, 2025
|
|
||
| const symbolicatedCallSite: null | ReactFunctionLocation = | ||
| fetchFileWithCaching !== null | ||
| ? use( |
There was a problem hiding this comment.
Do we give up on supporting older React versions for react-devtools-inline?
There was a problem hiding this comment.
What do you mean older React versions? It's all versions if the react-devtools-inline host isn't providing a way to fetch the files?
Older versions won't get any stacks anyway since it won't exist in the data.
There was a problem hiding this comment.
I meant using use which doesn't exist in all versions of React. The frontend is currently written in a way that makes it compatible with older versions of React. So if you implement fetchFileWithCaching but are using React 17 for some reason for the frontend, you'll get error if you're inspecting newer React.
There was a problem hiding this comment.
We already use it elsewhere so I guess we don't support that.
There was a problem hiding this comment.
I didn't see those. Feels odd that we check in some places but not all e.g.
sebmarkbage
force-pushed
the
devtoolssourcemapstacks
branch
from
78291b3 to
e98cc3b
Compare
sebmarkbage
commented
Aug 5, 2025
| columnNumber, // 1-based | ||
| }); | ||
|
|
||
| const column = columnZeroBased + 1; |
There was a problem hiding this comment.
This fixes an existing issue where we were returning a zero based column when the data structure expects a one based column.
eps1lon
approved these changes
Aug 6, 2025
sebmarkbage
added a commit
that referenced
this pull request
Aug 6, 2025
… different owner (#34101) Stacked on #34094. This shows the I/O stack if available. If it's not available or if it has a different owner (like if it was passed in) then we show the `"awaited at:"` stack below it so you can see where it started and where it was awaited. If it's the same owner this tends to be unnecessary noise. We could maybe be smarter if the stacks are very different then you might want to show both even with the same owner. <img width="517" height="478" alt="Screenshot 2025-08-04 at 11 57 28 AM" src="https://github.com/user-attachments/assets/2dbfbed4-4671-4a5f-8e6e-ebec6fe8a1b7" /> Additionally, this adds an inferred await if there's no owner and no stack for the await. The inferred await of a function/class component is just the owner. No stack. Because the stack trace would be the return value. This will also be the case if you use throw-a-Promise. The inferred await in the child position of a built-in is the JSX location of that await like if you pass a promise to a child. This inference already happens when you pass a Promise from RSC so in this case it already has an await - so this is mainly for client promises.
…d in ReactCallSite and ReactFunctionLocation
sebmarkbage
force-pushed
the
devtoolssourcemapstacks
branch
from
7d23f6f to
dded82b
Compare
|
The main one landed as part of #34101. The landed part here is just the fix to columns. |
github-actions bot
pushed a commit
to code/lib-react
that referenced
this pull request
Aug 9, 2025
…34094) Stacked on facebook#34093. Instead of using the original `ReactStackTrace` that has the call sites on the server, this parses the `Error` object which has the virtual call sites on the client. We'll need this technique for things stack traces suspending on the client anyway like `use()`. We can then use these callsites to source map in the front end. We currently don't source map function names but might be useful for this use case as well as getting original component names from prod. One thing this doesn't do yet is that it doesn't ignore list the stack traces on the client using the source map's ignore list setting. It's not super important since we expect to have already ignore listed on the server but this will become important for client stack traces like `use()`. DiffTrain build for [b080063](facebook@b080063)
github-actions bot
pushed a commit
to code/lib-react
that referenced
this pull request
Aug 9, 2025
…34094) Stacked on facebook#34093. Instead of using the original `ReactStackTrace` that has the call sites on the server, this parses the `Error` object which has the virtual call sites on the client. We'll need this technique for things stack traces suspending on the client anyway like `use()`. We can then use these callsites to source map in the front end. We currently don't source map function names but might be useful for this use case as well as getting original component names from prod. One thing this doesn't do yet is that it doesn't ignore list the stack traces on the client using the source map's ignore list setting. It's not super important since we expect to have already ignore listed on the server but this will become important for client stack traces like `use()`. DiffTrain build for [b080063](facebook@b080063)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Stacked on #34093.
Instead of using the original
ReactStackTracethat has the call sites on the server, this parses theErrorobject which has the virtual call sites on the client. We'll need this technique for things stack traces suspending on the client anyway likeuse().We can then use these callsites to source map in the front end.
We currently don't source map function names but might be useful for this use case as well as getting original component names from prod.
One thing this doesn't do yet is that it doesn't ignore list the stack traces on the client using the source map's ignore list setting. It's not super important since we expect to have already ignore listed on the server but this will become important for client stack traces like
use().