How do I properly debug in React Native? From what I've seen so far, the debugging messages given aren't too useful for narrowing down where to look in my code. I just get a stack trace that only mentions dependencies in node_modules For example:
Android emulator image (sorry, don't have enough reputation to show image on this post)
In the above error, I understsand that somewhere a non-Component object got passed in, but I have no idea how to track it down; the entire stack trace only mentions files from node_modules.
I have tried using Chrome Developer Tools as well:
I have also tried React Developer Tools and it wasn't helpful either.
How do I go about getting output from debugging that is actually helpful and linked to the code that I wrote?
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments