-
ReferenceError
-
SyntaxError
-
TypeError
-
URIError
Error
Error是所有错误的基类，其他错误都继承自该类型
EvalError
EvalError对象表示全局函数eval()中发生的错误。如果eval()中没有错误，则不会抛出该错误。可以通过构造函数创建这个对象的实例
image.png
RangeError
RangeError对象表示当一个值不在允许值的集合或范围内时出现错误。
image.png
ReferenceError
当引用不存在的变量时，该对象表示错误：
image.png
SyntaxError
当JavaScript引擎在解析代码时遇到不符合该语言语法的标记或标记顺序时，将引发该异常：
image.png
TypeError
传递给函数的操作数或实参与该操作符或函数期望的类型不兼容：
image.png
URIError
当全局URI处理函数以错误的方式使用时：
image.png
四、处理和防范
上文我们提到错误和异常无处不在，存在于各式各样的应用场景中，那我们应该如何有效的拦截异常，将错误扼杀于摇篮之中，让用户无感呢？亦或者遇到致命错误时，进行降级处理？
(1) try catch
1.语法
ECMA-262 第 3 版中引入了 try-catch作为 JavaScript 中处理异常的一种标准方式，基本的语法如下所示。
try {
// 可能会导致错误的代码
} catch (error) {
// 在错误发生时怎么处理
}
复制代码
2.动机
使用try…catch来捕获异常，我归纳起来主要有两个动机：
1）是真真正正地想对可能发生错误的代码进行异常捕获；
2）我想保证后面的代码继续运行。
动机一没什么好讲的，在这里，我们讲讲动机二。假如我们有以下代码：
console.log(foo); //foo未定义
console.log(‘I want running’)
复制代码
代码一执行，你猜怎么着？第一行语句报错了，第二行语句的log也就没打印出来。如果我们把代码改成这样：
try{
console.log(foo)
}catch(e){
console.log(e)
}
console.log(‘I want running’);
复制代码
以上代码执行之后，虽然还是报了个ReferenceError错误，但是后面的log却能够被执行。
从这个示例，我们可以看出，一旦前面的（同步）代码出现了没有被开发者捕获的异常的话，那么后面的代码就不会执行了。所以，如果你希望当前可能出错的代码块后续的代码能够正常运行的话，那么你就得使用try…catch来主动捕获异常。
扩展：
实际上，出错代码是如何干扰后续代码的执行，是一个值得探讨的主题。下面进行具体的探讨。因为市面上浏览器众多，对标准的实现也不太一致。所以，这里的结论仅仅是基于Chromev91.0.4472.114。探讨过程中，我们涉及到两组概念：同步代码与异步代码，代码书写期和代码运行期。
场景一：同步代码（出错） + 同步代码
1625024247(1).png
可以看到，出错的同步代码后面的同步代码不执行了。
场景二：同步代码（出错） + 异步代码
1625024396(1).png
跟上面的情况一下，异步代码也受到影响，也不执行了。
场景三：异步代码（出错） + 同步代码
image.png
可以看到，异步代码出错，并不会影响后面同步代码的执行。
场景四：异步代码（出错） + 异步代码
image.png
出错的异步代码也不会影响后面异步代码的执行。
如果只看场景一二三，很容易得出如下结论：在代码运行期，同步代码始终是先于异步代码执行的。如果先执行的同步代码没有出错的话，那么后面的代码就会正常执行，否则后面的代码就不会执行。但场景四却打破了这个结论。我们不妨继续看看场景五。
场景五：异步代码 + 同步代码（出错） + 异步代码
image.png
看到了没？同样是异步代码，按理说，代码运行期，如果你是受出错的同步代码的影响的话，那你要么是两个都不执行，或者两个都执行啊？凭什么写在出错代码代码书写期前面的异步代码就能正常执行，而写在后面的就不执行呢？经过验证，在firefoxv75.0版本中也是同样的表现。
所以，到了这里，我们基本上可以得出这样的结论：运行期，一先一后的两个代码中，出错的一方代码是如何影响另外一方代码继续执行的问题中，跟异步代码没关系，只跟同步代码有关系；跟代码执行期没关系，只跟代码书写期有关系。
说人话就是，异步代码出错与否都不会影响其他代码继续执行。而出错的同步代码，如果它在代码书写期是写在其他代码之前，并且我们并没有对它进行手动地去异常捕获的话，那么它就会影响其他代码（不论它是同步还是异步代码）的继续执行。
综上所述，如果我们想要保证某块可能出错的同步代码后面的代码继续执行的话，那么我们必须对这块同步代码进行异常捕获。
3.范围
只能捕获同步代码所产生的运行时错误，对于语法错误和异步代码所产生的错误是无能为力的。
当遇到语法错误时：
当遇到异步运行时错误时：
(2) Promise.catch()
1.语法
const promise1 = new Promise((resolve, reject) => {
throw ‘Uh-oh!’;
});
promise1.catch((error) => {
console.error(error);
});
// expected output: Uh-oh!
复制代码
2.动机
用来捕获promise代码中的错误
3.范围
使用Promise.prototype.catch()我们可以方便的捕获到异常，现在我们来测试一下常见的语法错误、代码错误以及异步错误。
当遇到代码错误时，可以捕获：
当遇到语法错误时，不能捕获：
当遇到异步运行时错误时，不能捕获：
1625033576(1).png
(3) unhandledrejection
1.用法
unhandledrejection：当Promise 被 reject 且没有 reject 处理器的时候，会触发 unhandledrejection 事件
window.addEventListener(“unhandledrejection”, function(e){
console.log(e);
});
复制代码
2.动机
为了防止有漏掉的 Promise 异常，可以在全局增加一个对 unhandledrejection 的监听进行兜底，用来全局监听Uncaught Promise Error。
3.范围
window.addEventListener(“unhandledrejection”, function (e) {
console.log(“捕获到的promise异常:”, e);
e.preventDefault();
});
new Promise((res) => {
console.log(a);
});
// 捕获到的promise异常的: PromiseRejectionEvent
复制代码
注意：此段代码直接写在控制台是捕获不到promise异常的，写在html文件中可正常捕获。
(4) window.onerror
1.用法
当 JS 运行时错误发生时，window 会触发一个 ErrorEvent 接口的 error 事件，并执行 window.onerror()。
window.onerror = function(message, source, lineno, colno, error) {
console.log(‘捕获到异常：’,{message, source, lineno, colno, error});
}
复制代码
2.动机
众所周知，很多做错误监控和上报的类库就是基于这个特性来实现的，我们期待它能处理那些try…catch不能处理的错误。
3.范围
根据MDN的说法，wondow.onerror能捕获JavaScript运行时错误（包括语法错误）或一些资源错误。而在真正的测试过程中，wondow.onerror并不能捕获语法错误。
image.png
经测试，window.onerror并不能捕获语法错误和静态资源的加载错误。同样也不能捕获异步代码的错误，但是有一点值得注意的是，window.onerror能捕获同样是异步代码的setTimeout和setInterval里面的错误。
看来，寄予厚望的window.onerror并不是万能的。
(5) window.addEventListener
1.用法
window.addEventListener(‘error’,(error)=>{console.log(error)})
复制代码
2.动机
当然是希望用他来兜住window.onerror和try catch的底，希望他能捕获到异步错误和资源的加载错误。
3.范围
复制代码
在此过程中，资源文件都是不存在的，我们发现window.addEventListener(‘error’)依旧不能捕获语法错误,Promise异常和iframe异常。
对于语法错误我们可以在编译过程中捕获，,Promise异常已在上文中给出解决方案，现在还剩下iframe异常需要单独处理了。
(5) iframe异常
1.用法
window.frames[0].onerror = function (message, source, lineno, colno, error) {
console.log(‘捕获到 iframe 异常：’,{message, source, lineno, colno, error});
return true;
};
复制代码
2.动机
用来专门捕获iframe加载过程中的异常。
3.范围
很遗憾，结果并不令人满意，在实际的测试过程中，该方法未能捕获到异常。
(6) React中捕获异常
部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界。
错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。
注意：错误边界无法捕获以下场景中产生的错误
-
事件处理
-
异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
-
服务端渲染
-
它自身抛出来的错误（并非它的子组件）
如果一个 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。当抛出错误后，请使用 static getDerivedStateFromError() 渲染备用 UI ，使用 componentDidCatch() 打印错误信息。
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// 更新 state 使下一次渲染能够显示降级后的 UI
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// 你同样可以将错误日志上报给服务器
logErrorToMyService(error, errorInfo);
}
render() {
if (this.state.hasError) {
// 你可以自定义降级后的 UI 并渲染
return
Something went wrong.
;}
return this.props.children;
}
}
复制代码
错误边界的工作方式类似于 JavaScript 的 catch {}，不同的地方在于错误边界只针对 React 组件。只有 class 组件才可以成为错误边界组件。大多数情况下, 你只需要声明一次错误边界组件, 并在整个应用中使用它。
以上引用自React 官网。
(7) Vue中捕获异常
Vue.config.errorHandler = function (err, vm, info) {
// handle error
// info 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
// 只在 2.2.0+ 可用
}
复制代码
指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和 Vue 实例。
-
从 2.2.0 起，这个钩子也会捕获组件生命周期钩子里的错误。同样的，当这个钩子是 undefined 时，被捕获的错误会通过 console.error 输出而避免应用崩溃。
-
从 2.4.0 起，这个钩子也会捕获 Vue 自定义事件处理函数内部的错误了。
-
从 2.6.0 起，这个钩子也会捕获 v-on DOM 监听器内部抛出的错误。另外，如果任何被覆盖的钩子或处理函数返回一个 Promise 链 (例如 async 函数)，则来自其 Promise 链的错误也会被处理。
以上引用自Vue 官网。
(8) http请求异常
1.用法
以axios为例，添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
// response 是请求回来的数据
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
}
)
复制代码
2.动机
用来专门捕获HTTP请求异常
五、项目实践
在提出了这么多的解决方案之后，相信大家对具体怎么用还是存在一些疑惑。那么接下来，我们真正的进入实践阶段吧！
我们再次回顾一下我们需要解决的问题是什么？
-
语法错误
-
事件异常
-
HTTP请求异常
-
静态资源加载异常
-
Promise 异常
-
Iframe 异常
-
页面崩溃
捕获异常是我们的最终目标吗？并不是，回到解决问题的背景下，相比于页面崩溃或点不动，在适当的时机，以一种适当的方式去提醒用户当前发生了什么，无疑是一种更友好的处理方式。
结合到项目中，具体实践起来有如下两种方案：
-
1.代码中通过大量的try catch/Promise.catch来捕获，捕获不到的使用其他方式进行兜底
-
2.通过框架提供的机制来做，再对不能捕获的进行兜底
方案一无疑不是很聪明的样子…这意味着要去改大量的原有代码，心智负担成倍数增加。方案二则更加明智，通过在底层对错误进行统一处理，无需变更原有逻辑。
到项目中，使用的是React框架，React正好提供了一种捕获异常的机制（上文已提及）并做降级处理，但是细心的小伙伴发现了，react并不能捕获如下四种错误：
-
事件处理
-
异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
-
服务端渲染
-
它自身抛出来的错误（并非它的子组件）
对于第三点服务端渲染错误，项目中并没有适用的场景，此次不做重点分析。我们重点分析第一点和第二点。
我在这里先抛出几个问题，大家先做短暂的思考：
-
1.若事件处理和异步代码的错误导致页面crash，我们该如何预防？
-
2.如何对ErrorBounary进行兜底？相比一个按钮点击无效，如何更加友好的提示用户？
先来看第一个问题，若事件处理和异步代码的错误导致页面崩溃：
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后：
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。
面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。
h，我们该如何预防？
- 2.如何对ErrorBounary进行兜底？相比一个按钮点击无效，如何更加友好的提示用户？
先来看第一个问题，若事件处理和异步代码的错误导致页面崩溃：
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-PE6pNNEk-1712653163948)]
[外链图片转存中…(img-sHOZjVJA-1712653163948)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
[外链图片转存中…(img-Mma2x9Q5-1712653163949)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后：
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。
面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。
2446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
