Step up your console logging game in your React app

Last updated 1 year ago by Ashwin Nayar


So you decided to start work on your ambitious React app using create-react-app. You begin filling your code with console.log() messages, and soon you realize there’s no easy way of getting rid of them in the production build. I can already hear some of you screaming, “It’s 2018, use breakpoints in developer tools, dumbass!”. Although you could use powerful debugging tools such as those built into Chrome and Firefox itself, they’re not always ideal, and you’ll often find yourself running back to the good old console to pin-point the issue.

Your users should not see these messages in their consoles, but manually deleting each console.log() from your code can take ages. One solution would be to monkey-patch console.log() so that it works only in the “development” environment. But it’s monkey-patching… Just hearing that term makes me sick. We can do better.

The more “elegant” approach

debug is an extremely popular tool in the Node.js world. It’s robust and can be used for all sorts of logging applications. It also works in web browsers.

We will be using debug for logging in our React app. It will let us create messages of different levels such as info or error, and optionally add the source location, such as the name of the component where the message was triggered.

For it to work, we need to set a field in the browser’s Local Storage with key debug and the value can be anything, like the name of the app, followed by an asterisk (*).

Read full Article