Remote Debugging in React Native
After working with complex projects written in React Native we noticed that debugging in Release Builds is really complicated, especially when we had to do it remotely.
While React Native provides awesome tools to debug developer builds, the ways in which you can debug in Release Builds are really limited. Maybe the most common solution is Alert API, but this has many limitations, also it’s not very professional to bother testers with prompts.
In this article I would like to showcase the react-native-debugger and react-debugger-server, which provides a professional way to debug in Release Build.
React Native Debugger
This module implements an efficient Interface & API for live debugging on the device. The installation steps are really simple, and the API gives you a standardised way of sending log events to the debugger UI.
Requirements:
— React Native 35.+
— Redux needs to be integrated into your project
Let’s see the UI
Debugger interface
This interface is responsible for displaying Debug Logs submitted in the course of the runtime of the application.
Categorise your Events
If you have to work with a large number of events, categorisation can help you a lot!
You will need to define your own Event Categories (e.g. Network Event) and select an Event Type for each event. The Event Types are predefined: None, Error, Warning, Success.
The package dynamically generates filters based on your Categories and Event Types to make debugging even easier.
Log Item
Settings panel
On the Settings Panel you can activate and deactivate Event Categories, or Filter Events by their Type.
Installation
Package
npm install --save react-native-debuggerDebugger Enhancer
import { createDebugger } from 'react-native-debugger';createStore(rootReducer, compose(
createDebugger({ // It should be placed before applyMiddleware!
isVisible: true,
allowServerLogging: false,
eventTypes: [
{
TYPE: 'NETWORK_REQUEST',
CATEGORY_NAME: 'Network request logging',
EVENT_NAME: 'Net. Request',
},
],
}),
applyMiddleware(...middlewares)
));
Enhancer Parameters
isVisible — set default visibility of the UI
allowServerLogging — enable server logging
serverUrl — url of your debug server — how to set up my debugger server
authorization — debugger server basic authentication hash
eventTypes — event categories to be displayed
Reducer
import { debuggerReducer } from 'react-native-debugger';combineReducers({
user,
router,
app,
debugger: debuggerReducer // it must be named as 'debugger'
});
Interface
import { DebuggerUI } from 'react-native-debugger';const APP = () => (
<View>
<YourComponents />
<DebuggerUI /> // it should be the last component
</View>
);
Redux Actions
import { actions } from 'react-native-debugger';There are two public Redux Actions in this package.
showDebugger — dispatch it to make the UI visible
hideDebugger — dispatch it to make the UI invisible
Usage
Sending a simple event
import { Debugger } from 'react-native-debugger';Debugger.logAction({
label: 'https://www.myApi.com/getData',
type: 'NETWORK_REQUEST',
logType: Debugger.EVENT_TYPES.SUCCESS,
});
Sending an event with data
import { Debugger } from 'react-native-debugger';Debugger.logAction({
label: 'https://www.myApi.com/getData',
type: 'NETWORK_REQUEST',
logType: Debugger.EVENT_TYPES.SUCCESS,
data: { test: true },
});
What happens if we need to debug a device remotely?
React Debugger Server
This module implements a debugger server which will store and visualise your data sent by react-native-debugger.
Installation
git clone git@github.com:istvanmakary/react-debugger-server.git
npm install
npm startAfter executing npm start it will run a server on your http://localhost:3030/.
Connecting with React Native Debugger
To connect react-native-debugger with your react-debugger-server you have to edit your debugger configuration in your application.
createDebugger({
isVisible: true,
allowServerLogging: true,
serverUrl: 'http://YOUR-IP-ADDRESS/log',
authorization: 'YWRtaW46U2VjcmV0MTIz',
eventTypes: [],
})As the first step you need to add your computer’s IP address to the serverUrl key, so it’s important that your phone has to be on the same network.
What is authorization: ‘YWRtaW46U2VjcmV0MTIz’?
Since react-native-debugger can be installed in a public domain, we have added a basic authentication, just to provide you with minimal security.
YWRtaW46U2VjcmV0MTIz is the default key which can be changed in the server’s configuration.
Changing the authorization key
Go back to your server directory, and edit config.json.
"user": "admin",
"password": "Secret123"After changing the user and password values, you need to generate a new hash by using this tool. This hash has to be added to the react-native-debugger configuration in your app.
Configuring React Debugger Server on a server
After you have moved the package to the right place on your server, you have to change some of the configuration in it.
Open config.json, and change the url and port to match you server configuration.
After making the necessary updates just simply npm start!
In your application change the serverUrl to your current domain & enjoy remote debugging!
Usage
Look up your server url in a Chrome browser, and open your debugger console.
When the first log has been transferred to the server, the device will appear as a connected device in the Connected devices section of the debugger server UI.
After selecting your Device the logs will be listed on your browser’s console!
Download & Upload logs
You are able to download device logs, and also upload them later to perform/make further investigations.
Production usage
DO NOT USE ANY OF THESE MODULES IN PRODUCTION
Conclusion
We strongly believe that the combination of these modules is really useful on every React Native Project where you want to involve external testers. For us it saved many hours of dev time, which we would have spent trying figure out the root cause of an application issue.
Instead of panicking just open react-debugger-server and check the device logs.
