相关博客：
js中的错误监控（一）【promise，async，generator异步+内置错误类型】的错误捕获与上报
js中的错误监控（二）【网络+资源加载】的错误捕获与上报
文章目录
一、错误类型
主要分成两类——代码运行错误和资源请求错误
1.代码运行错误
运行代码时发生的错误有非常多。每种错误都有相应的错误类型。ECMA-262定义了7种错误类型：
1.Error 错误,通用的异常对象。
Error是基类型。其它类型继承自它。我们通常使用Error来自定义异常，Error对象有name和message属性，可以通过message来得到具体的错误信息，比如
let error = new Error('接口报错');
let name = error.name; // 'Error'
let msg = error.message; // '接口报错'
2.EvalError 调用eval()函数抛出错误
3.RangeError 引用错误
超出指定范围错误，比如声明一个负数的数组，使用toFixec超过了规定小数的位数（0-20）
new Array(-1)
(1.2).toFixed(21)
4.ReferenceError 參数错误,访问未定义的变量
function foo() {
bar++; // bar未定义
}
5.SyntaxError 语法错误,一般代码语句不完整
let a = 1 > 0 ? // 正则不完整
if (a) { // 少了一个分号
6.TypeError 类型错误,一个变量不是函数，却把它当做函数来调用
let a = 1;
a(); // 类型错误
7.URIError 编码错误，在使用encodeURI()和decodeURI()时。假设URI格式不对时，会导致URIError错误。
encodeURI('\uD800')
encodeURIComponent('\uD800')
2.资源加载错误
这个错误通常是找不到文件（404）或者是文件加载超时造成的。
详见：
js中的错误监控（二）【网络+资源加载】的错误捕获与上报
二、错误冒泡
错误也具有冒泡传播性
如果在一个函数内部发生了错误，它自身没有捕获，错误就会被抛到外层调用函数，如果外层函数也没有捕获，该错误会一直沿着函数调用链向上抛出，直到被JavaScript引擎捕获，代码终止执行。
所以，我们不必在每一个函数内部捕获错误，只需要在合适的地方来个统一捕获，一网打尽
三、捕获代码错误
比如语法错误、逻辑错误，针对不会被代码检查插件发现的错误
1. try…catch语句
我们可以通过try/catch语法来捕捉错误。最常用的是在函数里面捕捉错误，有错误就在catch处理。
try {
throw new Error("接口错误");
console.log("try错误后面的语句不会被执行");
} catch (error) {
// 捕获错误
console.log("try-catch捕获", error);
} finally {
//finally为了防止出现异常后。无法往下再运行的备用。
console.log("finally 我都会运行！");
}
console.log("try-catch后面的语句");
控制台：
捕捉内置对象类型：
//try-catch
try
// 运行可能出错的代码
a++;
console.log("try错误后面的语句不会被执行");
} catch (error) {
// 捕获错误
console.log("try-catch捕获", error);
}
console.log("try-catch后面的语句");
控制台：
只有一个message信息量较少，可以通过新建一个自动义错误类，可以拿到出错的信息，堆栈，出错的文件、行号、列号；
捕捉自定义error：
// Create a custom error
var SpecifiedError = function SpecifiedError(message) {
this.name = 'SpecifiedError';
this.message = message || '';
this.stack = (new Error()).stack;
};
SpecifiedError.prototype = new Error();
SpecifiedError.prototype.constructor = SpecifiedError;
缺点：
- 无法捕捉到
SyntaxError语法错误，只能捕其他错误类型；如果尝试捕获语法错误，try-catch不会生效
try {
// 运行可能出错的代码
let b = 1;
let b = 2; //SyntaxError不可以被捕获
console.log("try错误后面的语句不会被执行");
} catch (error) {
// 捕获错误
console.log("try-catch捕获", error);
} finally {
//finally为了防止出现异常后。无法往下再运行的备用。
console.log("finally 我都会运行！");
}
console.log("try-catch后面的语句");
控制台：
- try catch只能捕获
同步代码的异常，对回调，setTimeout，promise等无能为力 - 对每一个函数都需要进行try/catch捕捉再进行处理，需要写很多
重复的代码 - 能够通过改动代码解决或浏览器兼容错误。不建议使用try-catch，由于它比一般语句
消耗资源
2. window.onerror事件
使用一个全局的error事件来捕获所有的error，通过回调函数来处理错误，使用三个参数来调用：msg（错误消息）、url（发生错误的页面的 url）、line（发生错误的代码行）。
function message() {
adddlert("Welcome guest!");
}
window.onerror = function(message, source, lineno, colno, error) {
// 错误信息，源文件，行号
console.log(message + "\n" + source + "\n" + lineno);
// 禁止浏览器打印标准的错误信息
return true;
};
控制台：
3.异步代码错误
一般情况下：异步错误只能在异步的函数内部捕获和处理，因为出现了异步操作时，不会立即执行，js引擎继续执行同步操作，捕获错误就是一个同步操作。也就是说在捕获错误的时候，异步操作里的错误还没发生，所以需要在异步函数的内部去捕获。
ES6中为了处理异步，增加了promise、generator和async，它们各自都有不同的内部错误处理方式
try/catch无法捕捉异步函数整体抛出的错误：
try {
setTimeout(() => {
throw new Error('async error')
}, 0)
} catch (e) {
console.log(e.message)
}
// async/await
async function foo () {
let a = 1;
let b = await a + 2;
console.log(b);
throw new Error('async error')
}
try {
foo();
} catch (e) {
console.log(e.message);
}
控制台报错Uncaught Error: async error：
正确的做法：
1.
try/catch捕捉异步函数内部抛出的错误
2..catch捕捉promise异步整体错误，遵循链式法则
3.1.setTimeout
try-catch捕获setTimeout回调函数内部的错误:
// 在异步代码块里面的同步代码就可以捕捉到
setTimeout(() => {
try {
throw new Error("async error");
} catch (e) {
console.log("setTimeout回调里面的错误", e.message);
}
}, 0); //setTimeout回调里面的错误 async error
3.2.promise
new Promise( function(resolve, reject) { ...} /* executor */ );
executor是带有 resolve 和 reject 两个参数的函数 ，Promise构造函数执行时（在实例化之前）立即调用executor 函数，executor 内部通常会执行一些异步操作，一旦异步操作执行完毕(可能成功/失败)， resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或rejected（失败）。
resolve 和 reject 函数前后面的代码会同步执行，resolve 和 reject 函数作为回调异步执行，例子：
//resolve（）以后的语句会被执行
var promise3 = new Promise((resolve, reject) => {
resolve("promise3-res");
console.log("promise3-resolve以后");
});
promise3.then(res => {
console.log(res);
});
//promise3-resolve以后
//promise3-res
//reject（）以后的语句会被执行，
// 直接reject（“错误信息”）不可以被.catch捕捉，会报错Uncaught (in promise)
var promise4 = new Promise((resolve, reject) => {
reject("promise4-res-catch");
console.log("promise4-resolve以后");
});
promise3.catch(res => {
console.log(res);
});
// promise4-resolve以后
//promise.js:9 Uncaught (in promise) promise4-res-catch
注意：直接reject（“错误信息”）不可以被.catch捕捉，会报错Uncaught (in promise)，接下来马上会讲到reject的正确使用方法。
1⃣️捕捉executor里的错误：
如果在executor函数中throw一个错误，那么该promise 状态变为rejected。executor函数返回值会被忽略，throw之后的代码不会被执行，.catch无法捕捉错误：
//throw new Error（）使得该promise 状态为rejected。executor函数的返回值被忽略。
//throw之后的代码不会被执行
var promise6 = new Promise((resolve, reject) => {
throw new Error("promise6-res-catch");
console.log("promise6-resolve以后");
});
promise5.catch(function(e) {
console.log(e);
});
// Uncaught (in promise) Error: promise6-res-catch
方法一：reject（new error（））将error对象传给reject回调，.catch可以捕获错误
//reject（new error（））可以被.catch捕捉错误，能获取返回值
var promise5 = new Promise((resolve, reject) => {
reject(new Error("promise5-res-catch"));
});
promise5.catch(function(e) {
console.log(e); //Error: promise5-res-catch
});
方法二： try-catch捕获promise同步函数内部的错误，然后通过 reject(e)传递给.catch方法
var promise = new Promise(function(resolve, reject) {
try {
throw new Error("Promise同步语句里面的错误");
} catch (e) {
reject(e);
}
});
promise
.then(res => {
console.log("resolve");
})
.catch(e => {
console.log("promise-reject", e); //promise-reject Error: Promise同步语句里面的错误
});
2⃣️捕捉.then .catch链式回调里面的错误
方法一：.catch方法还可以处理链式调用.then中的错误,只处理第一个错误：
var promise2 = new Promise(function(resolve, reject) {
resolve();
});
promise2
.then(function() {
// if some error throw
throw new Error("Promise.then里面的错误1");
})
.then(function() {
// if some error throw
throw new Error("Promise.then里面的错误2");
})
.catch(function(e) {
//something to deal with the error
console.log(e); //Promise.then里面的错误1
});
catch方面里面还可以再抛错误，这个错误会被后面的catch捕获。
3⃣️promise无法被捕捉的错误
- 如果组成Promise.all的promise有自己的错误捕获方法，那么Promise.all中的catch就不能捕获该错误。
- 在promise实例resolve之后，错误无法被捕获。
var p1=new Promise(function(resolve,reject){
reject(new Error('test1'))
}).catch(function(e){
console.log("由p1自身捕获",e);
})
var p2=new Promise(function(resolve,reject){
resolve();
})
var p=Promise.all([p1,p2]);
p.then(function(){
}).catch(function(e){
//在此处捕获不到p1中的error
console.log(e)
})
//由p1自身捕获 Error: test1
3.3.async-await
trycatch直接捕获async-await同步语句的错误:
async function foo() {
try {
let a = 1;
let b = (await a) + 2;
console.log("async-await,b", b);
throw new Error("async同步语句里面的错误");
} catch (e) {
console.log("async-await", e.message); //async同步语句里面的错误 async error
}
}
foo();
此外，async里面throw Error 相当于返回Promise.reject。所以也可以直接在内部/外部使用.catch捕捉错误
//async.catch
async function F1() {
throw new Error("f1-async里的错误，相当于执行reject(e)");
}
var f1 = F1();
f1.catch(function(e) {
console.log(e); //Error: f1-async里的错误，相当于执行reject(e)
});
async function F2() {
await Promise.reject("f2-async里的错误，相当于执行reject(e)").catch(function(
e
) {
console.log(e);
});
}
var f2 = F2(); // f2-async里的错误，相当于执行reject(e)
3.4.gennerator
try-catch捕获gennerator.throw的错误
Generator 函数返回的遍历器对象，都有一个throw方法，可以在函数体外抛出错误，然后在 Generator 函数体内捕获。
如果Generator的错误没有被捕获，就不会继续执行，只要错误没有被处理，就会返回done:true就停止执行generator
// gennerator
function* F() {
try {
yield 1;
} catch (e) {
console.log("gennerator-throw", e);
}
yield 2;
return "gennerator-value";
}
var f = F();
f.next(); //{value :1,done:false}
//在函数体外抛出错误，然后在 Generator 函数体内捕获。
f.throw(new Error("gennerator-throw在函数体外抛出的错误")); //{value:2,done:false}
f.next(); //{value:3,done:true}
详见 http://es6.ruanyifeng.com/#docs/generator#Generator-prototype-throw
内部错误的控制台结果：先执行同步操作，所以f.throw先执行，被捕获，然后async函数的异步操作，所以3先被打印，然后执行async的await回调（相当于promise微事件），async的catch再被打印，再执行promise-reject，最后执行setTimeout的回调，所以最后打印setTimeout的catch
参考：https://blog.csdn.net/liwusen/article/details/79617903
https://www.cnblogs.com/fundebug/p/7989066.html
