React Native 0.63 with Logbox

January 02, 2021 Publish By : Expert App Devs 3 min read Viewed By : 994
React Native 0.63 with Logbox

What is a React Native? - 
React Native is an Open Source framework for Mobile application development, this framework is based on javascript that is used to create the hybrid mobile apps which run on both android and iOS, Js library is used for creating UI.
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.

LogBox Component Exception and Warning

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. 

  1. Concise — Logs only provide the information for the debugging process.
  2. Formatted — Logs should be formatted in a way that it’s easy and faster to find relevant information.
  3. 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.

component exception

What LogBox Contains - 

To achieve the goals, LogBox includes the following.

  1. 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 imageLog notifications
  2. 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.
    Code Frames
  3. Component Stacks: Component stacks are fetched error messages and put them into their own section, basically it separates the error messages, like below image
    Component Stacks
  4. 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.
  5. 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.

  1. Source
  2. Component stack
  3. Call stack

Yellow LogBox shows the warning in 2 sections which is.

  1. Source
  2. Call stack
    About Red and yellow LogBox

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.