React - catch error - problem with console.log

Question

I have small problem, but I don't know what I doing wrong. I have function like below. In .catch alert working ok and I see error in browser, but I have problem with this same error in console.log <- I don't see anything Basically, I wanted to pass error to another function like notify(error) but I don't see anything.

 const signIn = (e) => {
    e.preventDefault();
    signInWithEmailAndPassword(auth, email, password)
      .then(() => {
        navigate("/");
      })
      .catch((error) => {
        // notify(error)
        console.log("error: ", error);
        alert(error);
      });
  };

I try doing try catch and async await but I have the same problem:

async function signIn(e) {
try {
  e.preventDefault();
  await signInWithEmailAndPassword(auth, email, password).then(() => {
    navigate("/");
  });
} catch (error) {
  // notify(error);
  console.error("error: ", error);
  alert(err);
}

}

Can you provide the code for notify function? – Elon Musk On Stackoverflow Jun 16 '23 at 22:30 — Elon Musk On Stackoverflow, Jun 16 '23 at 22:30

score 0 · Answer 1 · answered Jun 17 '23 at 12:29

You can not call error object directly in console.log as js has some issues parsing error as a JSON object. Instead, use error.message or error.toString() in notify() function. Error object has breaks that cause issues when parsing to a JSON object. Check below code, only error.message that is the first line (key : value pair) of the object is accessible. Notice that JSON.parse(error) gives an error because of this.

try {
  const a = s.getElementbyId('ss');
  console.log(a.style);
} catch (error) {
  console.log( error.toString());
  console.log(error.message);
  console.log(error.lineno);
  console.log(JSON.parse(error));
}

score 0 · Answer 2 · answered Jun 20 '23 at 09:25

The issue you're facing could be related to the error object being passed to the console.log statement. Sometimes, the error object may not be displayed directly in the console, depending on its structure.

To ensure that the error is logged properly, you can try using console.error instead of console.log:

console.error("error:", error);

Additionally, if you want to pass the error to another function like notify, you can un-comment the notify(error) line and make sure that the notify function is correctly implemented and able to handle the error object.

.catch((error) => {
  notify(error);
  console.error("error:", error);
  alert(error);
});

React - catch error - problem with console.log

2 Answers2