LogBox in React Native

LogBox, a Completely Redesigned Logging Experience

React Native 0.63 launched LogBox as the default logging experience instead of RedBox and YellowBox.

LogBox focuses on three main aspects: Concise, Formatted, and Actionable logs.

LogBox main aspects

Red LogBox displays errors in 3 sections: Source, Component Stack, and Call Stack.

Yellow LogBox displays warnings in 2 sections: Source, and Call Stack.

Red and Yellow LogBox

LogBox contains the following features:

• Log Notification including warning and errors shows up as notifications at the bottom of the app screen.

Log Notification sample

• Code Frame containing error and warning shows the log source code.

Code Frames sample

• Component Stacks are separated from error messages and put into their section.

Component Stacks sample

• Stack Frames that are not related to the application’s code, are collapsed by default.
• Syntax Error Formatting is improved and code frames with highlighted syntax are added.

Syntax Error Formatting sample

Take Away Points 🤓

Check out the LogBox Source section for the compact info about the error or warning.

Find out the error location at the bottom of the Source section.

Conclusion

LogBox is offered as the default logging experience in React Native 0.63 to make the errors and warnings debugging easier.

LogBox focuses on three main complaints about redundant errors and warnings, poorly formatted, and unactionable logs.

It is time to enjoy amazing LogBox features. 😎