[DevTools] Implement Owner Stacks

[sebmarkbage]

Stacked on #30410.

Use "owner stacks" as the appended component stack if it is available on the Fiber. This will only be available if the enableOwnerStacks flag is on. Otherwise it fallback to parent stacks. In prod, there's no owner so it's never added there.

I was going back and forth on whether to inject essentially captureOwnerStack as part of the DevTools hooks or replicate the implementation but decided to replicate the implementation.

The DevTools needs all the same information from internals to implement owner views elsewhere in the UI anyway so we're not saving anything in terms of the scope of internals. Additionally, we really need this information for non-current components as well like "rendered by" views of the currently selected component.

It can also be useful if we need to change the format after the fact like we did for parent stacks in: #30289

Injecting the implementation would lock us into specifics both in terms of what the core needs to provide and what the DevTools can use.

The implementation depends on the technique used in #30369 which tags frames to strip out with react-stack-bottom-frame. That's how the implementation knows how to materialize the error if it hasn't already.

Firefox:

Follow up: One thing about this view is that it doesn't include the current actual synchronous stack. When I used to append these I would include both the real current stack and the owner stack. That's because the owner stack doesn't include the name of the currently executing component. I'll probably inject the current stack too in addition to the owner stack. This is similar to how native Async Stacks are basically just appended onto the current stack rather than its own.

[vercel]

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 22, 2024 3:25pm

[sebmarkbage]

These filters will likely just be removed and left to ignore listing in the browser, but this is just in line with what the implementation does elsewhere for now.

[react-sizebot]

Comparing: 06763852ded5c85d3f6b7a47f77a59d9336d45d7...790a75535dc3a207fd1e6764437e183f67d9c3a9

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.js	=	6.68 kB	6.68 kB	=	1.83 kB	1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js	=	499.44 kB	499.44 kB	=	89.59 kB	89.59 kB
oss-experimental/react-dom/cjs/react-dom.production.js	=	6.69 kB	6.69 kB	=	1.83 kB	1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js	=	504.26 kB	504.26 kB	=	90.30 kB	90.30 kB
facebook-www/ReactDOM-prod.classic.js	=	599.20 kB	599.20 kB	=	105.80 kB	105.79 kB
facebook-www/ReactDOM-prod.modern.js	=	573.37 kB	573.37 kB	=	101.68 kB	101.68 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 80ceb73