Add debug info to help find texts in the R3F tree

[Amatewasu]

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.

react-three-fiber/packages/fiber/src/core/renderer.ts

Line 306 in 4cfe9ef

console.warn('Text is not allowed in the R3F tree! This could be stray whitespace or characters.')

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]

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]

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]

I've created a PR but I struggled to test it. It looks like the codesandbox are broken (#3367)?: #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]

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