Question 397274 in Javascript Question posted in
A very good W3school tutorial can be found here.

JavaScript Eval: in case of error display a correct script reference link in console

If I eval a script with intentionally made mistakes I get an error log in console with a script reference link at the right side. For instance, here is the script:

my_script = 'const a = 2;nconst b = a 2;';

eval(my_script)

Here is the console screenshot after execution:

console after execution

At the right corner you see this lovely script reference link that I adore and appreciate very much. The main reason for this appreciation is that by clicking on it I can view the script that caused error and even look at the exact place where the error occurred:

debugger after execution

But if I want to have some additional logic to happen upon error and therefore I add try/catch statement with this logic, I lose script reference and my lovely script reference link doesn’t lead to my initial script anymore. Instead it leads to eval code itself. Here is the new script:

my_script = 'const a = 2;nconst b = a 2;';

try {
    eval(my_script)    
} catch (e) {
    // first we do some additional logic like error type checking and etc
    // then we just log error so a user could view the erroneous script, the exact position of error and maybe make amends   
    console.error(e)
}

Here is what I see after executing it:
console after second execution

As you can see, the trace consists only of 2 records – the initial code and the eval code, but the first one is not clickable. And here is what I see after clicking the only available script reference link:
debugger after second execution, lost initial script reference

The debugger now shows me the eval code itself, not the initial script that is being evaluated

 
 

How to preserve script reference when evaluating an arbitrary script inside try/catch statement? Is there a way to catch eval error and still be able to view the actual script in chrome debugger?

Tags:

2

Answers


  1. 0

    I don’t know why this works, but using Promise and throw at the end of the catch gives the reference as you wanted:

    my_script = 'const a = 2;nconst b = a 2;';

new Promise(() => eval(my_script))
    .catch((e) => {
        console.log("do something when error");
        // first we do some additional logic like error type checking and etc
        // then we just log error so a user could view the erroneous script, the exact position of error and maybe make amends   
        console.error(e);
        throw e;
    })
    Login or Signup to reply.
  2. 0

    There is a reportError() method allowing to report an error in the same fashion the browser would have for an uncaught exception, without actually blocking the script execution:

    my_script = 'const a = 2;nconst b = a 2;';

try {
    eval(my_script)    
} catch (e) {
    // first we do some additional logic like error type checking and etc
    // then we just log error so a user could view the erroneous script, the exact position of error and maybe make amends   
    reportError(e)
    console.log("not blocked");
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search