[DevTools Bug]: React Profiler: Flamegraph section overflows and not resizable

[shogunsea]

Website or app

https://stackoverflow.com/help/minimal-reproducible-example

Repro steps

note: the URL I linked is not relevant and only meant to make the bug report submit pass, previously closed here since I couldn't find any production site with a development build, so I don't think it makes sense to outright fail bug reports for react profiler related issue.

actual bug report: I have a page that has lots of component so the component tree is pretty long, when I profile on it, the flamechart just overflows by default and I have to put it fullscreen to see the "why did this render" side bar

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

[anshul2807]

I'm Working on this Issue.. Can you explain me in brief about the issue?

[lunaruan]

Hey! Thanks for reporting!

I tried profiling an app with a large component tree but unfortunately I can't repro this issue. Could you provide a more concrete repro case?

[bvaughn]

@shogunsea Since we can't repro this, it would be helpful for you to provide more details about your system: operating system and version, browser and version, DevTools version.

[shogunsea]

@bvaughn @lunaruan @anshul2807 thanks for following up! I think this might be some tricky edge cases 😬 it actually works as expected if I profile on a development build, but rather it happens when I enabled the profiler on a production build.

So I have two hypotheses , either 1) this issue happens on a production build with profiler enabled (as instructed by @bvaughn 's this post), or 2) it might be due to the way we enabled the profiler on a prod build: instead of using the webpack alias approach suggested in the post, we wanted the flexibility and avoiding a different build(since it takes too long), so on staging(prod-like env) when we load page with a special param, we swap react-dom with react-dom/profiling bundle on the client side using some webpack hack, this way we were able to use the profiler on a normal prod build.
Please let me know if you could reproduce issue on a prod profiler build or not, otherwise it's very likely because of the latter hypothesis.

[bvaughn]

@shogunsea You haven't shared your code with us, I think. (So we can't run your custom production build setup.) Can you share it?

[shogunsea]

@bvaughn sure can do, however the setup is tightly coupled to our prod app (therefore the hack 😅 ), I'll try to build a mini app to reproduce the issue, will ping you once I can share it.