CODEWITHSUNDEEP
javascriptreactjsmeteorloggingjsx
adinutzyc21
adinutzyc21

Reputation: 1608

Console logging for React

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:

Cannot find module './dumy'

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

picture of code since copy-paste doesn't work

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

What am I 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 JavaScript?

Upvotes: 104

Views: 492663

Answers (3)

vsync
vsync

Reputation: 130065

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

// Some component with JSX and a logger inside
const App = () =>
  <ul>
    {[...Array(4)].map((v, i) => (
      console.log(i), <li key={i}>{i+1}</li>
      )
    )}
    {console.log(123)}
  </ul>

// Render
ReactDOM.render(<App />, root)
<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="root"></div>

Or for fun, as a Component:

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>

Upvotes: 24

user1095118
user1095118

Reputation: 4496

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.table

console.trace

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

console.trace

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’);

console.todo

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

Upvotes: 133

patrick
patrick

Reputation: 10273

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.

Upvotes: 136

Related Questions