Learn about Redbox errors and stack traces in your Expo project.
When developing an application using Expo, you'll encounter a Redbox error or Yellowbox warning. These logging experiences are provided by LogBox in React Native.
A Redbox error is displayed when a fatal error prevents your app from running. A Yellowbox warning is displayed to inform you that there is a possible issue and you should probably resolve it 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").
This is a brief introduction to debugging a React Native app with Expo CLI. For in-depth information, see Debugging.
When you encounter an error during development, you'll see the error message and a stack trace, which is a report of the recent calls your application made when it crashed. This stack trace is shown both in your terminal and the Expo Go app or if you have created a development build.
This stack trace is extremely valuable since it gives you the location of the error's occurrence. For example, in the following image, the error comes from the file HomeScreen.js and is caused on line 7 in that file.
When you look at that file, on line 7, you will see that a variable called
renderDescription is referenced. The error message describes that the variable is not found because the variable is not declared in HomeScreen.js. This is a typical example of how helpful error messages and stack traces can be if you take the time to decipher them.
Debugging errors is one of the most frustrating but satisfying parts of development. 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 your exact error. Make sure to read the documentation, search the forums, GitHub issues, and Stack Overflow.