Skip to content

Conversation

eps1lon
Copy link
Collaborator

@eps1lon eps1lon commented Aug 20, 2025

I figured we omit <anonymous> intentionally in the ReactCallSite so we might as well omit it when displayed.

Before:
Array.map @ :NaN
localhost_8080_ (1)

After:
Array.map
localhost_8080_

@meta-cla meta-cla bot added the CLA Signed label Aug 20, 2025
@github-actions github-actions bot added the React Core Team Opened by a member of the React Core Team label Aug 20, 2025
Comment on lines +43 to +45
if (line === 0) {
return nameOnly;
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This is mostly a drive-by. 0 is the bottom value when we have no line number so we should omit it entirely.

@eps1lon eps1lon requested review from sebmarkbage and hoxyq August 20, 2025 12:34
@eps1lon eps1lon marked this pull request as ready for review August 20, 2025 12:34
Comment on lines +66 to +76
{url !== '' && (
<>
{' @ '}
<span
className={linkIsEnabled ? styles.Link : null}
onClick={viewSource}
title={url + ':' + line}>
{formatLocationForDisplay(url, line, column)}
</span>
</>
)}
Copy link
Contributor

Choose a reason for hiding this comment

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

How about displaying something like Array.map @ native? This is aligned with how Chrome displays V8's stacks.

I am not aware of other potential cases where url could be an empty string.

Copy link
Contributor

Choose a reason for hiding this comment

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

Hmm, actually, I think we should extend ReactStackTrace to have boolean isNative instead. Because we already handle it here:

} else if (callSite.isNative()) {
// $FlowFixMe[prop-missing]
const isAsync = callSite.isAsync();
result.push([name, '', 0, 0, 0, 0, isAsync]);

And if its native, we should add @ native suffix, else if url is absent, then just don't display it.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Sure, we can do that in a follow-up. We'd still want something for anonymous sources. Especially for the cases where we don't have access to structured stack traces.

Chrome isn't consistent with displaying the stacks anyway so it doesn't seem terribly important to be perfectly aligned. The @ format is really just in tracing I think. Printing .stack doesn't use that formatting and use at Array.map (<anonymous>) instead.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

isNative() is also false for Array.prototype.map for me:

let error

const awaitedFlags = ['one'].map( (param) => {
    error = new Error()
    return 'a'
}
)

Error.prepareStackTrace = (error, structuredStackTrace) => {
    for (const frame of structuredStackTrace) {
        console.log(frame.toString(), frame.isNative())
    }
    return ''
}

error.stack

@eps1lon eps1lon merged commit 03fda05 into facebook:main Aug 20, 2025
250 checks passed
@eps1lon eps1lon deleted the sebbie/08-20-_devtools_fix_display_of_stack_frames_with_anonymous_sources branch August 20, 2025 15:31
unstubbable pushed a commit to vercel/next.js that referenced this pull request Aug 20, 2025
github-actions bot pushed a commit to code/lib-react that referenced this pull request Aug 23, 2025
github-actions bot pushed a commit to code/lib-react that referenced this pull request Aug 23, 2025
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.

2 participants