14

very new to react/node/using npm start to start a server. Using npm start to start the server works and displays my react code, but I need to do some debugging. However, my console.logs aren't outputting to the browser console. After that, I thought to check my terminal (which i think is where node console.log outputs to), but since I used npm start, the terminal that I launched the application from is stuck on this screen:


Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://[ip_address_here]:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

And therefore, I cannot read any console output on this screen. I feel like this should be a super basic fix and I'm probably just overlooking something extremely obvious, but could somebody help me out here? Thanks.

EDIT: I was asked to share some code, here it is:

Here is a snippet of my App.js file:


import React from 'react';

//quick class
class App extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            testRows : null
        }

        this.getTest = this.getTest.bind(this);
    }

    //get some rows from my api using a local database with sqlite3
    async getTest(){
        try{
            console.log("hello?");
            const response = await fetch('http://localhost:3000/api/test');
            if(response.ok){
                const JSONresponse = response.json();
                console.log(JSOnresponse);
                this.setState({testRows : JSONresponse});
            }
            else{
                this.setState({testRows: "test error"});
                console.log('There was an error with the fetch');
            }
        }
        catch(error){
            console.log(error);
        }
    }

    //render some text, a button, and the result
    render(){
        let testResults;
        if(this.state.testRows){
            testResults = Object.keys(this.state.testRows).map((data) => {
                    return <h1>{data.name}</h1>
                }
            )
        }
        else{
            testResults = "null";
        }


        return(
            <div>
                <h2>Some testing going on here</h2>
                <button onClick={this.getTest}>
                    Press me for test!
                </button>
                <h3>{testResults}</h3>
            </div>
        );
    }
}

export default App;

Here is a snippet of my api.js file:


apiRouter.get('/test', (req, res, next) => {
    db.get('SELECT * FROM Test', (error, rows) => {
        if(error){
            console.log(error);
        }
        else{
            console.log("got the test");
            console.log(rows);
            res.send(rows);
        }
    })
})

The router is mounted and everything else in other parts of the code, but the console.logs there don't show up anywhere (dev tools console or terminal) either.

7
  • 2
    logging from directly inside your clientside code would go to Chrome DevTools Commented Jul 13, 2019 at 17:31
  • 1
    Anything you log in your react modules should show in browser dev tools console. Show us an example Commented Jul 13, 2019 at 17:35
  • Can you show us the code? Particularly, where you are trying to console.log. Commented Jul 13, 2019 at 17:38
  • how is apiRouter defined? Commented Jul 13, 2019 at 19:33
  • Can you see the testResults at the page? Commented Jul 13, 2019 at 19:39

1 Answer 1

1
+50

From what I understood you have two pieces of code running in different places. Both should be served in order to execute the code.

The App.js file seems to be a React App (frontend) that should run on the browser. To see the console messages you should:

  • Open the terminal and serve the App: npm start
  • Open the browser
  • Visit the URL indicated
  • Open the Developer Tools (usually F12)

Also, try to place the log right after the class declaration or somewhere else to isolate possible other problems.

The api.js on the other hand is a backend code, so the console messages should be logged in the terminal where it is running. Assuming you have the complete file api.js and not just that snippet, to run the server and see the logs you should:

  • On the terminal and serve the API: node api.js
  • Open the browser
  • Visit the URL indicated
  • The message will show up on the terminal

I will do the same recommendation, if you place the log command at the beginning of the script the message will be shown as the server start, without the need to go to the browser. Isolating problems is a good way to tackle them.

If you don't have the full api.js, try a simple snippet: Getting Started. Just add the console.log('Console says hi!') at the beginning, or after the "Hello World" line if you want to see it after opening the browser.

A final remark would be to make sure front and back are not being served on the same port (3000).

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.