Detailed explanation of JavaScript error capture

1. Basic usage and logic

use

try{
    //code....
}catch(err){
    //error handling
}finally{
    //no matter what happens in the try/catch (error or no error), this code in the finally statement should run. 
}

logic

2. Features

try...catch only works for runtime errors, it does not work properly for interpreter errors

try{
    {{{{{{{
}catch(err){
    console.error(err)
}
// The engine made a mistake at 'parse-time', which prevented it from understanding the code and therefore from catching it

try...catch only works synchronously

try{
    setTimeout(function(){
        undefinedVariable;
    },1000)
}catch(err){
    console.error(err)
}
//When the callback function of setTimeout is executed, the engine has left the try...catch structure

Finally can make the return statement in the try block invalid

function test(){
  try {
    return 1;
  } catch(error) {
    return 2;
  finally
    return 3;
  }
}
console.log(test());
//3

3. Error Object

When an error occurs in the program, an object containing the error details will be generated inside js, and the object will be passed into the catch as a parameter

As with all built-in errors, the error object has two main properties

• name error type
• message text type error message
• stack (non-standard attribute) Call stack information when an error occurs, mainly used for debugging

try {
  lalala; // error, variable is not defined!
} catch (err) {
  alert(err.name); // ReferenceError
  alert(err.message); // lalala is not defined
  alert(err.stack); // ReferenceError: lalala is not defined at (...call stack)

  // Can also show an error as a whole
  // The error is converted to string as "name: message"
  alert(err); // ReferenceError: lalala is not defined
}

In theory, we can throw anything as an error object, but the best practice is to throw an object with a name and message to keep it compatible with the built-in error object.

Extra: Built-in Error Object

4. Better catch and throw strategies

​ Catch errors are not only to prevent the program from crashing, but more importantly to facilitate debugging and find bugs. Therefore, the error handling strategy can slightly reflect the elegance of the coder.

As the saying goes, coders are always elegant. Try to follow a principle: catch only the errors you know about.

Hold up a pear

let json = '{ "age": 30 }'; 
try{
  let user = JSON.parse(json);  
  alert( user.name );
} catch (err) {
  console.error('JSON Error:'+err);
}

The catch strategy in the above example can ensure the normal operation of the program, because the catch block can catch all errors inside, whether it is an error in JSON.parse or an error in user.name not existing, both can be caught. However, printing both errors in the same way is not conducive to debugging. It would be better to write it as follows

let json = '{"age":30}'
try{
  let user = JSON.parse(json);
  alert(user.name)
}catch(err){
   if (err instanceof SyntaxError) {
       console.error('JSON Error:'+err);
   }
   else throw err;
}

Each catch block handles the errors that it knows may occur. That is, when programming, programmers catch those expected errors and throw out the errors that they may not have expected.

5. Promise error handling

As we all know, Promise will swallow errors, because the implementation of promise captures all errors internally, and the captured errors are not thrown outward (outside the promise), but are passed in by finding the nearest onreject callback along the chain, so there are only two ways to handle promise errors:

1. Set the onreject callback
2. Global capture
   

For example

try{
    new Promise((resolve,reject)=>{
        throw new Error('promise error')
    }).catch(()=>{
        //The error is caught in the most recent onreject callback console.error(err);
    })
}catch(err){
    //Never executed, promise swallows error
    console.error(err);
}

Also note that no matter the executor function or the promise handler, all errors that occur inside are swallowed, which is equivalent to being implicitly caught. The error will automatically find the nearest onreject callback and pass it in.

try{
    new Promise((resolve,reject)=>{
        resolve();
    }).then(()=>{
        throw new Error('promise then error');
    }).catch((err){
        console.error(err);
    })
}catch(err){
    //console.error(err) will not be executed until the earth is destroyed
}

Similarly, before the error is found and passed to onreject, all the onfulfilled callbacks registered by then are invalid until the onreject callback is found and processed. The onfulfilled callback after the onreject callback is normal

try {
    new Promise((resolve, reject) => {
        throw new Error('promise error')
    }).then((ret) => {
        //The error is not handled, and it fails console.log('then1:' + ret)
    }).catch((err) => {
        //The error is handled, the subsequent sequence is normal console.error(err);
        return 'handled'
    }).then((ret) => {
        //Normal execution console.log('then2' + ret);
    })
} catch (err) {
    //Similarly, console.error(err) will not be executed until humanity is destroyed
}

// Error: promise error
//then2handled

What happens if there is no catch set in the entire chain?

Then this error will penetrate the center of the earth and penetrate all the way to the global environment, triggering different global events according to different host environments. For example, the unhandledrejection event will be triggered in the browser, and the unhandledRejection event will also be triggered in the node environment. Generally, this event will be monitored and then the information will be displayed to the programmer or user.

Extra 1: Promise internal error capture of chromium / v8 / v8 / 3.29.45

Extra 2: async/await error capture

6. Performance loss

After V8 version 6 (shipped with Node 8.3 and latest Chrome), the performance of code inside try-catch is the same as that of normal code. ------ 爆栈网

(I tested it a little bit and the difference is not much)

The above is a detailed explanation of JavaScript error capture. For more information about JavaScript error capture, please pay attention to other related articles on 123WORDPRESS.COM!