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 :)

Comments

  1. Really impressed with the article you provided. It was quite informative, effective, and easy to use. Chat apps have certainly grown to the top today and we, as Suffescom Solutions, are also working in the same niche. Be it clubhouse clone or any other cloning platform, we are the best entertainment app, clone providers. We use first-level interference to provide the best React Slack Clone chat App.

    ReplyDelete
  2. It's really a nice and helpful piece of information. Thank you for sharing this with us. React Native App Development

    ReplyDelete
  3. Oh, my God! Fantastic article, dude! I've been looking for information on this subject for a while and yours is the best I've found so far. This is Very useful article. The Netflix clone is an excellent way to provide your users with a personalized video-streaming platform that includes entertaining video content. We have grown to be the largest entertainment platform provider by offering streaming services such as Netflix Clone script along with a variety of other customized content.

    ReplyDelete
  4. Hi, Its very good topic that is to "Start your own on demand laundry app business", in 2022 this become very necessary to start your own business and grow that one to a new height. We "Amritsar Digital Academy" provides you the advance digital marketing training course that can raise your knowledge as well as helps to grow your business online and you can get high amount of audience for your business. Read our Blog for detail info.

    ReplyDelete

Post a Comment

Popular posts from this blog

How to add custom media codec to pjsip

iOS Push Notification with HTTP2