search

pmndrs / react-three-fiber

🇨🇭 A React renderer for Three.js
https://docs.pmnd.rs/react-three-fiber
MIT License
27.62k stars 1.6k forks source link

Add debug info to help find texts in the R3F tree #3302

Closed Amatewasu closed 1 month ago

Amatewasu commented 4 months ago

Hi folks,

Thank you for all your work regarding R3F, three.js, and drei.

The following line displays a warning to let us know that text is not supported by the R3F renderer.

https://github.com/pmndrs/react-three-fiber/blob/4cfe9eff943c61dd2d9ca3f17cd703cb8a57d62c/packages/fiber/src/core/renderer.ts#L306

This warning might be quite relevant to let us understand that some texts are not displayed (but maybe it is better to make it noop as it likely to be expected by developers?). By the way, if I understand well, the react reconcilier documentation suggests we can throw instead, but I think it is a bit extreme.

Anyway, the issue is that I think in a huge app it is currently not that easy to find where this text comes from (especially if it is just a forgotten whitespace somewhere). It would be nice to help developers to find out in which component it comes from.

I would have liked suggest a PR but I was not able to print relevant data.

CodyJasonBennett commented 3 months ago

With a developer build of React with the JSX transform, there are additional debug fields on internal Fibers we could use to trace text nodes. I'll see if we can get a reasonable stack trace or if there is existing work in react-dom.

Amatewasu commented 2 months ago

What do you think of adding an option somewhere onTextInstance: 'noop' | 'warn' | 'throw' (default value: 'warn', other names) so every developer can choose his expected behavior?

Amatewasu commented 1 month ago

I've created a PR but I struggled to test it. It looks like the codesandbox are broken (https://github.com/pmndrs/react-three-fiber/issues/3367)?: https://github.com/pmndrs/react-three-fiber/pull/3366

It looks like the react-reconcilier provide the text, so we could print it in the console.warn: https://github.com/facebook/react/blob/14fdd0e21c420deb4bb96fc1e9021b531543d15a/packages/react-reconciler/README.md?plain=1#L112C1-L112C76 (added in the PR)

Amatewasu commented 1 month ago

Closing the issue as #3366 has been merged and released in v8.17.9