Better logging for React Native and server

mobile
1

Hey! I am writing this here mostly to boast as it not directly related to Meteor (but still can be used with) :slight_smile:

I am currently working on the React Native project, which due to extensive use of REST exchanges and other reasons write a lot of logs to the console. When you develop with RN, there are two options to collect these logs - remote browser console and adb-based terminal output. I prefer the latter as it allows me to stay always in my favorite IDE w/o switching to the browser. However, the logs representation is so… boring there. I mean that they are all of the same color and, say, ‘error’ does not differ from ‘log’. So the when having a lot of output it all looks like a mess.

To fix that I firstly tried to find ready to go package, which would colorize ‘console’ output. Unfortunately, those modules I have discovered all are relying on TTY, Error object and other Node features not currently available in React Native. So I have spent my day to make own module. Here it is https://www.npmjs.com/package/color-term-console. What it currently does (just copied from my README):

  • Log method type color labels (both to the server and browser console);
  • JSON objects formatting (condensed and normal) with customizable colors;
  • Collapsable logs grouping (console.group* methods);
  • Method labels and JSON output color theming;
  • Support of the all with the same syntax you use in the browser consoin-browser logging syntax (e.g., console.log( “%cSome text”, “color: green;” ));
  • Plays nice with the YelloBox (does not damage it’s ‘error()’ and ‘warn()’ output);

What is does not (yet):

  • Detection of the colors support in the terminal. Currently if you lack this support, you will probably see all the escape-sequences;
  • No polyfill for the ‘console.table()’ method (Rect Native does it well by itself, but there is a lot of to improve)

And here is the output example:
https://gitlab.com/priezz/color-term-console/raw/master/screenshot1.png

For sure, this module is usable not just for RN development, but for Meteor and any other Node-based projects.

2

on linux install a package for a nice tools called “ccze” (e.g. ubuntu: sudo apt install ccze)

run your meteor with

meteor run | ccze -A

This will “auto”-color your server side log

1 Like
3

Nice tool, thanks! It plays really nice with Meteor, RN and others and from the first sight is the better replacement to vimcat for some plain text files and lnav. However, both vimcat and lnav work much faster (I can really see how ccze is printing each line one by one) and plays better with the file types they knows about. Fo macOS ccze is available from Homebrew: brew install ccze.

The other reason I still need my module - it provides console.group(), console.croupCollapsed() and console.groupEnd() polyfills, which I extensively use for state change logging.

If I could solve the ccze performance issue I would definitely use it as an addition to my module.

4

Just found the solution reading the man :slight_smile: The problem is with the lookup option, which is enabled by default.

This works a way faster:

react-native log-android | ccze -m ansi -C -o nolookups

or

meteor | ccze -m ansi -C -o nolookups