Error trapping mechanism of JavaScript basic introduction

Preface to the table of contents
Error object
throw
try … catch … finallyfinally Regular Try/Catch Performance window. onerror
Exceptions in Promise
Throw exception in Promise Exception catch in Promise Exception catch in Vue
Summarize

Preface

The Javascript engine is single-threaded, so once an exception is encountered, the Javascript engine usually stops executing, blocks subsequent code and throws an exception message, so we should catch and correctly show the foreseeable exception to the user or developer.

Error Object

When a runtime error occurs, the instance object of Error is thrown.

The error object has two properties:

err. name: Error name/error type err. message: Error message

Create 1 Error

new Error([message[,fileName[,lineNumber]]])

Error type js defines the following seven error types:

Error EvalError RangeError ReferenceError SyntaxError TypeError URIError

throw

Some JavaScript codes have no syntax errors, but there are logic errors. For this error, JavaScript will not throw an exception. At this time, we can define an instance of error object and use throw statement to actively throw an exception. In the program, we can throw exceptions purposefully by using throw statement, and its syntax format is as follows:

throw new Error("errorstatements")

try … catch … finally

try code where exceptions may occur catch (error) code executed in error Code that finally will execute anyway

Three forms of try declaration:

try...catch try...finally try...catch...finally

Rules of finally

When the exception information is thrown in the finally block, the exception information in the try block is overwritten

try {
    try {
        throw new Error('can not find it1');
    } finally {
        throw new Error('can not find it2');
    }
} catch (err) {
    console.log(err.message);
}

// can not find it2

If a value is returned from the finally block, this value will become the return value for the entire try-catch-finally, regardless of whether there are return statements in try and catch. This includes exceptions thrown in the catch block.

function test() {
    try {
        throw new Error('can not find it1');
        return 1;
    } catch (err) {
        throw new Error('can not find it2');
        return 2;
    } finally {
        return 3;
    }
}

console.log(test()); // 3

Try/Catch Performance

One well-known anti-optimization pattern is to use try/catch

The use of the try/catch statement in the V8 (and possibly the same for other JS engines) function cannot be optimized by the V8 compiler.

window.onerror

By defining an event listener function on window. onerror, uncaught exceptions generated by other codes in the program will often be caught by the listener function registered on window. onerror

window.onerror = function (message, source, lineno, colno, error) { }

message: Exception information (string) source: Script with exception URL (string) lineno: Line number (number) where the exception occurred colno: Column number (number) where the exception occurred error: Error Object (Object)

Exceptions in Promise

Exception thrown in Promise

new Promise((resolve,reject)= > { reject(); }) Promise.resolve().then((resolve,reject)= > { reject(); }); Promise.reject(); throw expression;

Exception catching in Promise

promiseObj.then(undefined, (err)= > { catch_statements }); promiseObj.catch((exception)= > { catch_statements })

Attention

In the JavaScript function, only return/yield/throw interrupts the execution of the function, and reject does not prevent it from continuing

Example:

reject without return

Promise.resolve()
.then(() => {
    console.log('before excute reject');
    reject(new Error('throw error'));
    console.log('after excute reject');
})
.catch((err) => {
    console.log(err.message);
});

// before excute reject
// throw error
// after excute reject

reject with return

Promise.resolve()
.then(() => {
    console.log('before excute reject');
    return reject(new Error('throw error'));
    console.log('after excute reject'); //***  The difference is here, return  It won't be executed here 
})
.catch((err) => {
    console.log(err.message);
});

// before excute reject
// throw error

Exception Trap for Vue

Vue.config.errorHandler = (err, vm, info) => {
  console.error(" Pass vue errorHandler Errors caught ");
  console.error(err);
  console.error(vm);
  console.error(info);
};

Summarize