Need better error message for "Invariant Violation: Objects are not valid as a React child ..."

[RyanMitchellWilson]

I am getting a red screen from somewhere in my app and the only error I have just says "Invariant Violation: Objects are not valid as a React child ..." and the stack trace only has native components in it. Not a single thing printed in the stack trace is pointing to any of my code.

Environment

Environment:
OS: macOS High Sierra 10.13.3
Node: 7.5.0
Yarn: Not Found
npm: 4.4.1
Watchman: 4.7.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: =16.2.0 => 16.2.0
react-native: =0.53.3 => 0.53.3

Steps to Reproduce

All you need to reproduce this bug is to put an object inside your JSX. The problem here is that the stacktrace for this error does not point at the code that is actually causing the error, it is just a really long stacktrace with only React-Native components printed out.

Expected Behavior

If this error occurs it should have the exact line and file where the error occurred, that way people who run into this error can figure out where it is coming from and can fix it quickly and easily. Currently there is no possible way to figure out where this error came from except for digging through every file in your codebase and console logging every little thing that can be rendered, which if your codebase is a couple hundred files or larger that pretty much is not an option.

Actual Behavior

Currently you just get a stacktrace pointing at a bunch of native code, and nothing pointing at an actual file that you wrote, so it is pretty much impossible to figure out where this error is actually coming from.

[RyanMitchellWilson]

Not sure why this was just marked macOS this happens on all platforms. How do we report a bug in the react-native-bot? Just because I use a mac doesn't automatically make this a mac issue.

[hramos]

The tag is based on the OS listed under Environment. It is not meant to be interpreted as a constraint on where the bug can be found.

[RyanMitchellWilson]

@hramos What more info do you need, I gave you exactly how to reproduce it and all the info about it. Can you please provide some context as to what more is needed and why?

[RyanMitchellWilson]

If you're looking for an example in code here it is:

const foo = {bar: 'baz'}

return (
  <View>
    {foo}
  </View>
)

This will cause the error, but that error does not tell you where in the code this happens. All you get is a 50+ line stack trace saying failed in View and stuff like that. Not a single line in the entire stack trace tells you what line or what file this failed in. Makes it almost impossible to figure out where the error came from.

@hramos Please let me know if you need more info.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[RyanMitchellWilson]

@hramos Has anything been done to solve this issue yet?

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.