improve error message for "Objects are not valid as a React child (found: object with keys..."

[javadoug]

This error takes a significant amount of time to debug and reason out where the offending object is being put into the tree. Is there any more information the error message could provide than the keys? It would help to know which line in the code is setting the object as a child. The stack trace has no reference to any of the code in my render() so am forced to step thru all lines of code, which does not always reveal the culprit. So at least starting on a given line would speed up the process of elimination. The keys help but still not enough to determine a precise cause in the code.

It would help if there was a way to detect this condition in the debugger. I've tried things like:

            const fields = buildFieldsFromData();
            fields.forEach(d => {
                // if (!ReactDOM.isValidChildContent(d)) debugger;
                if (typeof d === 'object' && !_.isArray(d) && !d.hasOwnProperty('$$typeof')) {
                    debugger; // never catches my bad child
                }
            });
            return fields;

references
http://stackoverflow.com/questions/33117449/invariant-violation-objects-are-not-valid-as-a-react-child

[zpao]

We try to include the name of the object which is currently rendering, so ensuring your components have displayName is important. Warnings also throw and catch an error so you can turn on the "pause on caught exceptions" option in your JS debugger and inspect the stack a bit. As for getting the exact line number, #6062 is probably something you want to follow along with. I'm going to close because there isn't anything else actionable we can do that isn't tracked elsewhere.