4

Greeting all. I am creating a simple single page application using reactjs for front-end and ReST API using nodejs for back-end development. However, when they are merged using fetch() from reactjs for login purpose, the console show a warning whenever login fail but none for succeed case.

React code:

fetch("/*api-url*//users/signin", {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
          "Content-Type": "application/json"
        },
        credentials: "same-origin"
      })
      .then((response) => response.json())
      .then((result) => {
        if(result.error) return Promise.reject(result.error);

        this.setState({ isLoading: false });
        alert("Sign in successfully.");
        console.log("Login approved!");
        return null;
      })
      .catch((error) => {
        alert("Unable to sign in. Error: " + error);
      });

Nodejs code:

exports.signin = (req, res, next) => {
  const email = req.body.email;

  return checkEmail(email)
    .then(() => {
      return userDatabase.findByElement({email: email});
    })
    .then((snapshot) => {
      if(!snapshot.val()) return Promise.reject(ERROR.UNAUTHENTICATED);
      else {
        const userId = Object.keys(snapshot.val())[0];
        const user = Object.values(snapshot.val())[0];

        bcrypt.compare(req.body.password, user.password, (error, result) => {
          if(result) {
            const token = jwt.sign({
                email: user.email,
                userId: userId
              },
              env.jwt_key,
              {
                expiresIn: "1h"
              });

            return res.status(200).json({
              message: "Authetication success",
              token: token
            });
          }
          return httpResponse.respondError(res, ERROR.UNAUTHENTICATED);
        })

        return null;
      }
    })
    .catch((error) => {
      httpResponse.respondError(res, error);
    })
}

respondError = (res, error) => { 
  switch(error) {
    case ERROR.INVALID_ID:
      res.status(404).json({
        message: 'No valid entry found for provided ID',
        error: error
      });
      break;
    case ERROR.NO_DATA:
      res.status(404).json({
        message: 'No entries found',
        error: error
      });
      break;
    case ERROR.UNAUTHENTICATED:
      res.status(401).json({
        message: 'Authentication failed',
        error: error
      });
      break;
    default:
      res.status(500).json({ 
        error: error
      });
  }
}

I expect there will be no warning/error log like login success case, but there is a warning/error log if login failed as shown:

Output in console:
POST /*api-url*//users/signin 401       signin:1 (for case login failed)
Login approved!                        App.js:17 (for case login succeed)

May I know how to disable the warning/error log for the login failed case? Thanks in advance.

Zeen Vee
  • 41
  • 1
  • 2
  • 1
    it's a browser dependent feature for example chrome logs all the failed request in console. its not from your code. – Rahil Ahmad Nov 08 '19 at 06:22
  • Thanks for the prompt reply. Meaning it is not possible to hide these failed request log? Or is there a way to hide the address to the API at the log? – Zeen Vee Nov 08 '19 at 06:32
  • This [link](https://stackoverflow.com/questions/52807184/how-to-hide-console-status-error-message-while-fetching-in-react-js) might help. – tarzen chugh Nov 08 '19 at 07:19
  • Thanks @tarzenchugh for the link. It seems like there is no way to prevent the failed request log. The only way to hide the address to the API from user is to perform console.clear() at .catch() for failed case. However, is the "console.clear()" a good practice to solve my issue? – Zeen Vee Nov 08 '19 at 07:55
  • The question is why you want to clear console? – tarzen chugh Nov 08 '19 at 08:32
  • Initially, I wanted to hide those messages away from users. – Zeen Vee Nov 08 '19 at 11:09

0 Answers0