Unfortunately the stack trace isn't always helpful since in this case you have to go through the bridge, and there isn't any single catch-all answer to how to get the information you need.
In this case, you're right that you most likely made a mistake returning a proper JSX object in one of your components. If you remember which components you recently added to your app, which components make up the navigator route that led to the problem, etc, you can make an educated guess as to the set of possible problematic components, and narrow that set down by commenting things out. Once that set is a reasonable size, triple-check your render methods and make sure nothing weird is going on.
You can write your own debug messages to the chrome developer console to help give yourself an idea what your app is doing (e.g. rendering this component, fetching that data from shared store, etc) using if(__DEV__) console.log("Your message here")
. This will check if the app is running in a debug vs release build, and only log the messages if you are running a debug build.
You can use adb logcat
for android and the XCode console for iOS to see the native debug logs, although I don't think they'll help in this case.
You can draw a picture of your component tree, put a debugger
statement at the beginning of every render method, and check off components one-by-one until your app stops trying to render things and you know you've hit a problematic component (React will render components recursively, going from top-to-bottom for components on the same level in the tree).
I know it's frustrating when you can't immediately tell where the problem is by glancing at the stack trace but sometimes that's life.