Console logging for react?

Question

I'm super new to React and I'm trying to get it set up for Meteor and piecing stuff together from other sources too. One of these other sources set up console logging for the app, but I'm going the ES6/JSX way so just using their code wouldn't work for me (or it doesn't seem like it does).

Some code I found for logging is

import Logger from 'simple-console-logger';
Logger.configure({level: 'debug'});

but I'm seeing this error

I also tried using react-logger and react-console-logger to no avail. Here's my code for the latter, which I believe should work.

import {Logger, ConsoleLogger} from 'react-console-logger';
const myLogger = new Logger();
export default class App extends Component {
    render() {
        myLogger.info('something witty');
    }
}

However, myLogger.info('...') is making a call to node_modules/react-console-logger/lib/Logger.js which has it defined as

And this.logger is undefined, although I see it be defined above?

Does anyone know what I'm doing wrong? It looks to me like the library has it wrong, but maybe it has something to do with me using JSX files instead of js?

Solution 1

If you're just after console logging here's what I'd do:

export default class App extends Component {
  componentDidMount() {
    console.log('I was triggered during componentDidMount')
  }

  render() {
    console.log('I was triggered during render')
    return ( 
      <div> I am the App component </div>
    )
  }
}

Shouldn't be any need for those packages just to do console logging.

Solution 2

Here are some more console logging "pro tips":

console.table

var animals = [
    { animal: 'Horse', name: 'Henry', age: 43 },
    { animal: 'Dog', name: 'Fred', age: 13 },
    { animal: 'Cat', name: 'Frodo', age: 18 }
];

console.table(animals);

console.trace

Shows you the call stack for leading up to the console.

You can even customise your consoles to make them stand out

console.todo = function(msg) {
    console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);
}

console.important = function(msg) {
    console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);
}

console.todo(“This is something that’ s need to be fixed”);
console.important(‘This is an important message’);

If you really want to level up don't limit your self to the console statement.

Here is a great post on how you can integrate a chrome debugger right into your code editor!

https://hackernoon.com/debugging-react-like-a-champ-with-vscode-66281760037

Solution 3

If you want to log inside JSX you can create a dummy component
which plugs where you wish to log:

const Console = prop => (
  console[Object.keys(prop)[0]](...Object.values(prop))
  ,null // ➜ React components must return something 
)

// Some component with JSX and a logger inside
const App = () => 
  <div>
    <p>imagine this is some component</p>
    <Console log='foo' />
    <p>imagine another component</p>
    <Console warn='bar' />
  </div>

// Render 
ReactDOM.render(
  <App />,
  document.getElementById("react")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Comments

[kkkkkkk]

You can even add styles to your console.log message. Try this console.log('%c color message', 'color: #f0c002')

[Adil]

Its no doubt fantastic answer but I'm getting warning: Unexpected console statement no-console

[patrick]

@adi that would be likely caused by ESLint - eslint.org/docs/rules/no-console

[Rafał Nowosielski]

I would be concerned to use console.log all over my app. I'd rather use something similar to what @adinutzyc21 was trying to use, as using some logging component that allows to control the log level for an app is generally good practice. For my project I used watson/console-log-level and I didn't run into any issues using that.

[patrick]

@RafałNowosielski Generally I only use console.log while debugging a specific issue and then they are removed. ESLint also has a rule which enforces removing them. If there is a need for additional logging / monitoring then some other way would be definitely recommended.

[Eric]

To add to Rafals comment, I was able to use the watson console-log-level component like the following: import Logger from 'console-log-level'; let log = Logger({level: 'trace'}); See github.com/watson/console-log-level

[vsync]

Tiny script to automate fancy consoles: console-colors

[kmiklas]

Don't forget console.dir() for arrays and objects!

[Soren]

This is not shown in the console. No filters applied.