Solomon Eseme I'm a software developer focused on building high-performing and innovative products according to best practices and industry standards. I also love writing about it. https://about.me/solomoneseme

Intro to LogBox, React Native’s new and improved debugging experience

1 min read 473

Intro to LogBox, React Native's New and Improved Debugging Experience

On July 6, React Native announced that a new version of React Native 0.63 would be shipped with LogBox and turned on by default. Prior to this release, the community had raised concerns about errors and warnings that were difficult to debug. The React Native team responded by redesigning the entire error, warnings, and logging system from the ground up.

In this guide, we’ll go over the basics and walk you through how to use LogBox.

Prerequisites

  1. Basic knowledge of React
  2. Basic knowledge of React Native

What is LogBox?

If you’ve ever experienced the hideous red or yellow box in React Native, you’ll understand why something had to be done. To improve velocity and the overall developer experience, the React Native team introduced the LogBox, which offers a completely redesigned logging experience.

LogBox addresses complaints that errors and warnings in React Native were too verbose, poorly formatted, and unactionable. The new solution is:

  1. Concise — logs should only provide information necessary for debugging processes
  2. Formatted — logs should be formatted in such a way that it’s easy and faster to find relevant information
  3. Actionable — logs should be clickable/actionable, so you can go straight to the line where the error is happening.

LogBox is also a complete improvement of the visual design that’s consistent between errors and warnings.

How to use LogBox

In React Native 0.63, LogBox is turned on by default, no configuration needed. If you’re using an older version, you can enable LogBox by importing React Native.

require('react-native').unstable_enableLogBox();

If you run into any errors while you’re coding, LogBox will pop out like this automatically:

Component Exception Error in LogBox

Similarly, when you encounter warnings in your source codes, the new yellow box will display.

VirtualizedList Warning in LogBox

We made a custom demo for .
No really. Click here to check it out.

Building a simple React Native 0.63 Application

To show you LogBox in action, we’ll build a simple application in React Native 0.63.

Installation

If you’re just starting out with React Native, you might want to read this guide to setting up the development environment.

Creating your React Native app

After successful installation and configuration, run the following commands to create a new React Native project.

expo init todos-native
cd todos-native
npm start

Make sure you install the current version, React Native 0.63.

If you want, you can simply clone this React Native app by AndrewMorsillo.

Implementations and errors

For the purpose of this tutorial, we’ll simply modify the App.js file to display a list of information on the screen and introduce error and warning functions.

 

Testing the buggy app

The application should reload automatically once you save your changes. Below we’re presented with the newly and nicely redesigned yellow box.

Useless Stack Warning in LogBox

Conclusion

In this article, we reviewed the new features of React Native. We also showed how the team completely redesigned the logging functionality to improve the developer experience and boost velocity.

Happy debugging!

: Full visibility into your web apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

.
Solomon Eseme I'm a software developer focused on building high-performing and innovative products according to best practices and industry standards. I also love writing about it. https://about.me/solomoneseme

Leave a Reply