Diagnosing React Native crashes

React Native applications, like any software, can encounter crashes during development and production. These crashes may arise for various reasons, such as the use of incompatible dependencies, incorrect data handling, programming errors, or hardware failure. If not promptly identified and fixed, the crashes can lead to a frustrating user experience, which will result in poor reviews on app stores.

In React Native, application crashes may result from issues in either JavaScript or native components. In this article, we’ll focus on crashes that originate from the underlying native components and discuss how to diagnose these crashes with Logcat.

To follow along with this article, you should:

• Be familiar with React Native
• Have Android Studio and the Android SDK installed on your development machine
• Have a device or emulator to test the application

Jump ahead:

• Project setup
• What is Logcat?
  • Logcat message classifications
• Debugging with the Logcat CLI
  • Filtering Logcat error logs
• Debugging with the Logcat viewer in Android Studio
• Debugging React Native Android app crashes on start
• Proactive debugging tips

Project setup

To simulate a crash in our demo application, we’ll use the react-native-crash-tester package to force the application to crash on startup.

To follow along, clone the demo application from GitHub using the command below:

git clone https://github.com/emmanuelhashy/debug-react-native-crash-example.git

What is Logcat?

Logcat is a command-line tool that outputs log messages generated by system processes, hardware components, and user applications in a mobile device. The Logcat window is also a part of the Android SDK, which means you need to have the SDK on your machine to use it.

With Logcat, we can view, filter, and analyze logs generated by our application while it is running. It’s useful for debugging React Native applications in two ways:

1. Using the Logcat CLI: This is a command line tool for viewing log messages generated in the device and our running application
2. Using the Android Studio Logcat viewer: Unlike the Logcat CLI, the Logcat viewer in Android Studio provides an interactive GUI with advanced filtering and search capabilities

Logcat message classifications

Log messages are classified into six levels according to their level of importance. These include:

1. Verbose (V): The lowest log level, verbose log messages are stripped from production builds, but generally contain log messages that provide additional context for debugging during development
2. Debug (D): These logs provide more specific information about the application’s execution, such as function calls, state changes, and so on. They are helpful for debugging in the development phase and are not included in production builds
3. Info (I): These logs include reports about the application’s operation and events generated in the application. They are part of both the development and production builds
4. Warning (W): These logs report potential issues or unexpected events that may not directly impact the application’s functionality, but could lead to problems
5. Error (E): These logs indicate significant issues that occur during the application’s execution, such as problems that prevent the app from functioning as normal, causing a crash. These log messages are particularly useful for diagnosing crashes in our application
6. Assert: These logs report situations that should never happen. They are triggered when a condition that is supposed to evaluate to true turns out to be false

During debugging, we can filter log messages based on these levels to get the most relevant information. An example of log messages is shown below:

Debugging with the Logcat CLI

To begin debugging with the Logcat CLI, ensure that either your Android device is connected via USB or you have an Android emulator running.

Next, run the command below in a terminal to launch your React Native application if it’s not already running:

npx react-native run-android

While the application is running, we can view log messages related to React Native by running the following command in a terminal:

adb Logcat "*:S" ReactNative:V ReactNativeJS:V

This command shows the log messages generated by both the native and JavaScript components of our application. However, these messages — while useful for debugging — may not tell us why our application crashed.

Filtering Logcat error logs

To view logs related to the application’s crash, we can filter the log messages to only those at the Error level by running the following command in a terminal:

adb Logcat *:E

The command above will show the Error-level log messages generated in the device. However, these messages may be quite difficult to navigate, as new messages are produced quickly. For this reason, we can further filter the log messages to show those with a specific log tag.

Log messages usually contain tags to identify message sources. For example, messages produced by React Native components usually have the ReactNative and ReactNativeJS tags.

Generally, when an Android application crashes, a stack trace is produced as part of the logs. These logs often contain the AndroidRuntime log tag, which we can use to filter for messages related to our application’s crash, as shown in the example below:

adb Logcat "*:S" AndroidRuntime:E

The command above will show the stack trace of the event that led to the crash, as illustrated below:

The stack trace contains the following information, which we can use to further diagnose the reason for the application crashing:

• The type of exception thrown, which indicates what went wrong. This could be a NullPointerException, IOException, etc.
• The part of code where the exception was thrown, including the function calls leading up to the exception

By examining the stack trace and the code that triggered the exception, you can identify the problem that led to the application’s crash.

Debugging with the Logcat viewer in Android Studio

As noted previously, Android Studio provides the Logcat viewer, a GUI we can use to view and filter log messages easily.

Let’s begin by opening the project in Android Studio:

Next, launch the application on the connected Android device or emulator by executing the command below in a terminal:

npx react-native run-android

After that, click the Logcat tab in the bottom pane of the IDE. In the Logcat pane, select the application’s package name from the dropdown list, as shown below:

Next, click the log levels dropdown menu to select a log level; we are only interested in the Error log level:

Afterward, scroll through the log messages in the Logcat viewer to see the stack trace of the exception that led to the crash:

As you can see from the image above, the Logcat viewer shows a stack trace of the exception that triggered the crash. This information can now be used to further diagnose the problematic part of the code that caused the crash.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

In addition, we can use the search bar in the Logcat viewer to easily navigate and look through log messages displayed by the Logcat.

Debugging React Native Android app crashes on start

In the previous sections, we’ve seen examples of how to debug crashes that arise immediately after launching an application. Nonetheless, we can also use Logcat to debug crashes that occur during the lifecycle of our application, even while the application is running in the background by following the same steps.

In most cases, you’ll have to examine the logs to identify the error messages related to the crash. Look for messages containing these keywords:

• Error
• Exception
• Fatal
• Crash

These logs will give you valuable information about the cause of the crash and potential fixes.

Once you’ve identified the error causing the crash, you can take the necessary steps to fix it. The solution will depend on the specific error message, but some common issues include:

• Missing or misconfigured dependencies: Ensure all required libraries are installed and properly linked in your React Native project
• Incorrect or deprecated API usage: Update your code to use the correct or latest APIs, as per their respective documentation
• Issues with native modules: Check for any issues with native modules or third-party libraries and ensure they are compatible with your app’s React Native version
• JavaScript errors: Debug your JavaScript code and fix any syntax errors, type mismatches, or logical issues

Proactive debugging tips

A lot of time can be spent trying to diagnose why an application is crashing. However, we can put different measures in place to ensure that errors are caught in time, saving development time.

Some of the proactive steps we can take include:

• Writing tests: React Native has different libraries that we can be used to test code during development, such as Jest, React Native testing library, and Detox
• Error reporting and logging: We can easily capture errors and crashes by using error reporting and logging tools, which help identify the root cause of crashes faster
• Using static analyzers and linters: These tools help catch potential errors early and improve code quality. Some popular ones that can be used with React Native include ESLint and Prettier

Conclusion

The Logcat is a powerful tool for debugging crashes in React Native applications. By analyzing the log messages and stack traces generated by Logcat, you can identify the source of the crash in your application. Through the use of filters, you can focus on specific tags, log levels, or processes, to streamline your debugging process.

Overall, Logcat is a crucial tool in any React Native developer’s debugging toolkit. With careful analysis and troubleshooting, you can quickly resolve crashes and improve the stability and performance of your app.

LogRocket: Instantly recreate issues in your React Native apps

LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.

LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.

Start proactively monitoring your React Native apps — try LogRocket for free.