React Native 0.63 with LogboxJanuary 02, 2021 Publish By : Expert App Devs 3 min read Viewed By : 994
What is a React Native? -
React native is developed by Facebook in 2015.
And react-native continuously launches the new version and react native team launches the 0.63 version, so let’s see what’s new in the 0.63 version and the importance of the LogBox.
What is new in React Native 0.63? -
- React Native announced a new version 0.63 on 6th July which main focus is LogBox and it turned on by default. Before launching the 0.63, debugging in react native is very tough, every developer has faced many issues just because debugging is very tough in react native.
- React native presents the LogBox at the place of the red Box and yellow box in the 0.63 version.
Problem - Errors and warnings are difficult to debug in React Native.
Solution - And here is the solution in 0.63 which is LogBox.
LogBox - LogBox is a completely redesigned Redbox, a yellow box with logging experience, LogBox addresses complaints that errors and warnings in React Native were too verbose, poorly formatted, and unactionable.
- Concise — Logs only provide the information for the debugging process.
- Formatted — Logs should be formatted in a way that it’s easy and faster to find relevant information.
- Actionable — Logs should be clickable, so you can go straight to the line where the error occurs
How to use LogBox -
In React Native 0.63, LogBox is turned on by default, no configuration is needed. If you’re using an older version, you can enable LogBox manually, If you run into any errors while you’re coding, LogBox will pop out like this automatically.
What LogBox Contains -
To achieve the goals, LogBox includes the following.
- Log notifications: React native team re-designed the warning notifications and added support for errors, it shows the error and warning as a notification at the bottom of the page. Shows it in below image
- Code Frames: Every error and warning now includes a coding frame that shows the source code of the log right inside the app, allowing you to quickly identify the source of your issue, basically it shows the error or warning in source code, shows it in below.
- Component Stacks: Component stacks are fetched error messages and put them into their own section, basically it separates the error messages, like below image
- Stack Frame Collapsing: If there is any frame that is not related to the app we can collapse it, which means that frames not used in code are collapsed.
- Syntax Error Formatting: React native team improved the formatting for syntax errors and added code-frames with syntax highlighting so you can see the source of the error, fix it, syntax error shows like as below image
About Red and yellow LogBox -
Red LogBox shows the error in 3 sections which are.
- Component stack
- Call stack
Yellow LogBox shows the warning in 2 sections which is.
- Call stack
YellowBox is replaced with LogBox APIs -
- LogBox.ignoreLogs(): We use the YellowBox.ignoreLogs() to silence any logs.
- LogBox.ignoreAllLogs(): We use the console.disableYellowBox to turn off error or warning notifications.
Need a consultation?
Drop us a line! We are here to answer your questions 24/7.