Level up your log in React-Native with Reactotron

A Log - Many Logs

Log is the essential part of programming. If you ever worked with mobile programming or react-native, you will find that log is a the essential for monitor your app. In this post, I just want to a share a little bit trick to log in react-native app :)

Console.log is bad!!!

React-Native come with the default console.log to be able to see the log messages. You have to turn on Debug JS Remotely and open Inspector in chrome to view the message. This is bad because
Debug mode is very slow. If you write a long message, it can crash your app The app continues warning about keeping chrome on foreground

Reactotron come to rescue!!!

https://github.com/infinitered/reactotron

Yes!!! with reactotron, you DON’T NEED to turn-on Debug JS to be able to see log, and the log is also FASTER btw. The example below show how to configure Reactotron with redux for simulator and real device

import Reactotron from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux';
import DeviceInfo from 'react-native-device-info';
import { Configs } from '../constants/configs';
// DEV
// config with redux
if (__DEV__) {
  if (DeviceInfo.isEmulator()) {
    // simulator
    Reactotron.configure({
      name: 'App',
    })
    .use(reactotronRedux())
    .connect();
  } else {
    // device
    Reactotron.configure({
      name: 'App',
      host: '192.168.0.100',
    })
    .use(reactotronRedux())
    .connect();
  }
}

Then you can write a Utils to help you write log. I prefer to customize the reactotron log using Reactotron.display so I can customize the preview message without need to expand the log in Reactotron

import Reactotron from 'reactotron-react-native';
export default class LogUtils {
  static log(message, ...args) {
    if (__DEV__) return;
    Reactotron.display({
      name: 'LOG',
      preview: message,
      value: { message, args },
    });
  }
  static warn(message, ...args) {
    if (__DEV__) return;
    Reactotron.display({
      name: 'WARN',
      preview: message,
      value: { message, args },
      important: true,
    });
  }
  static error(message, ...args) {
    if (__DEV__) return;
    Reactotron.display({
      name: 'ERROR',
      preview: message,
      value: { message, args },
      important: true,
    });
  }
}

And then, use it:

import LogUtils from "src/shared/utils/LogUtils";
LogUtils.log("happy log! reactotron is really fast");

But I have to import Utils everywhere!!! Yes, write log this way is very inconvenient because you have to import everywhere, and for other low-level modules, import another modules make it less independent and not reusable
Luckily, JS is a very dynamic language :)

Configure, Don’t Integrate
Rule 37 — The Pragmatic Programmer

JS allow you to assign a function, so we can overwrite the default consolelog with our reactotron log

function connectConsoleToReactotron() {
  console.info = info;
  console.log = log;
  console.warn = warn;
  console.error = error;
}

The full LogUtils now change to LogConfig like this : ) (I’m using TypeScript, so the namespace is just a way to grouping functions. If you use JS, you can replace it with class ). The whole file is actually same as above, only connectConsoleToReactotron is the new one.

Yes!!! Now in your App.js (or any file that is the main entrance of your app) you can use it like this, and in other place, you just write as a usual: console.log But now, the log is Reactotron :)

if (__DEV__) {
  LogConfig.configure({ enableLog: true });
}

Hope this post help a little bit in your daily work :) Happy coding :)