JS 错误捕获机制

这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

前言

Javascript 引擎是单线程的，所以一旦遇到异常，Javascript 引擎一般会中止执行，阻塞后续代码并抛出一个异常信息，所以对于可预见的异常，咱们应该捕捉并正确展现给用户或开发者。

Error 对象

当运行时错误产生时，Error的实例对象会被抛出。
该错误对象有两个属性：
err.name：错误的名称/错误的类型
err.message：错误的提示信息

建立一个Error
new Error([message[,fileName[,lineNumber]]])

错误类型 js共定义了下列 7 种错误类型：

• Error
• EvalError
• RangeError
• ReferenceError
• SyntaxError
• TypeError
• URIError

throw

有些JavaScript代码没有语法上的错误，可是存在逻辑错误，对于这种错误，JavaScript不会抛出异常，这时候咱们能够本身定义一个error对象的实例，并使用throw语句来主动抛出异常。在程序中咱们能够经过使用throw语句有目的的抛出异常，其语法格式以下:

throw new Error("errorstatements")

try…catch…finally

• try 可能发生异常的代码
• catch(error) 发生错误执行的代码
• finally 不管如何都会执行的代码

三种形式的 try 声明:

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

finally 的规则

• 当在 finally 块中抛出异常信息时会覆盖掉 try 块中的异常信息

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
复制代码

• 若是从 finally 块中返回一个值，那么这个值将会成为整个 try-catch-finally 的返回值，不管是否有 return 语句在 try 和 catch 中。这包括在 catch 块里抛出的异常。

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 性能

有一个你们众所周知的反优化模式就是使用 try/catch

在V8（其余JS引擎也可能出现相同状况）函数中使用了 try/catch 语句不可以被V8编译器优化.

window.onerror

经过在 window.onerror 上定义一个事件监听函数，程序中其余代码产生的未被捕获的异常每每就会被 window.onerror 上面注册的监听函数捕获到

window.onerror = function (message, source, lineno, colno, error) { }
复制代码

• message：异常信息（字符串）
• source：发生异常的脚本URL（字符串）
• lineno：发生异常的行号（数字）
• colno：发生异常的列号（数字）
• error：Error对象（对象）

Promise 中的异常

Promise 中抛出异常

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

Promise中捕捉异常

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

注意

在 JavaScript 函数中，只有 return / yield / throw 会中断函数的执行，reject 不会阻止继续执行

示例：

没有 return 的 reject

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
复制代码

用了 return 的 reject

Promise.resolve()
.then(() => {
    console.log('before excute reject');
    return reject(new Error('throw error'));
    console.log('after excute reject'); //*** 区别在这里，return 的话这里不会执行了
})
.catch((err) => {
    console.log(err.message);
});

// before excute reject
// throw error
复制代码

Vue 的异常捕获

Vue.config.errorHandler = (err, vm, info) => {
  console.error("经过vue errorHandler捕获的错误");
  console.error(err);
  console.error(vm);
  console.error(info);
};
复制代码