Errors and debugging
In development it won't be long before you encounter a "Redbox" error or "Yellowbox" warning.
Redbox errors will show when a fatal error has occurred that prevents your app from running. Warnings will show to let you know of a possible issue that you should probably look into before shipping your app.
You can also create warnings and errors on your own with
console.warn("Warning message") and
console.error("Error message"). Another way to trigger the redbox is to throw an error and not catch it:
throw Error("Error message").
When you encounter an error during development, you will be shown the error message, as well as the "stacktrace," which is a report of the recent calls your application made or was making when it crashed. This stacktrace is shown both in your terminal and in the Expo client app.
This stacktrace is extremely valuable since it gives you the location the error comes from. For example, in the following clip we know that the error came from the file
LinksScreen.js on line 10 and column (character) 15.
When we take a look at that file, in line 10, we can see we are calling the function
this" refers to our
LinksScreen component, and
renderText should be a method in our component, but we haven't declared it! Hence the error message telling us that
this.renderText is undefined (we haven't told the app that
renderText is a function it can call, yet). Once we add that declaration in, our app is working again!
This is a simple example, but it shows how useful error messages and stacktraces can be if you take the time to decipher them. Debugging errors is one of the most frustrating, but also satisyfing parts of development, and remember that you're never alone! The Expo community and the React and React Native communities are great resources for help when you get stuck. There's a good chance someone else has run into the exact same error as you, so make sure to read the documentation, search the forums
, Github issues
, and StackOverflow