Error from catch is not defined when debugging

Question

I have a promise that is rejected with an error and I'm using try/catch to handle it.

const foo = async () => {
  try {
    await request();
  } catch (error) {
    console.log(error.message);
    debugger;
  }
};

When debugging, the console.log shows the correct error but if I pass the mouse over it shows that error is not defined.

Why this is happening?

This is making the debugging of errors really hard.

Here is a working example

Answer 1

My workarround is to assign the error to a variable, it is possible to debug this variable.

const foo = async () => {
  try {
    await request();
  } catch (error) {
    let myError = error; // <--myError is visible in the debugger!!!    
    console.log(error.message);
    debugger;
  }
};