什么是异常 是指用户在使用应用时，无法得到预期的结果。不同的异常带来的后果程度不同，轻则引起用户使用不悦，重则导致产品无法使用，从而使用户丧失对产品的认可。...JavaScript 异常（语法错误、代码错误） 经常 静态资源加载异常（img、js、css） 偶尔 Ajax 请求异常 偶尔 promise...： Uncaught TypeError: Cannot read property 'map' of undefined` window.addEventListener('error') 当一项资源...（如 或 ）加载失败，加载资源的元素会触发一个 Event 接口的 error 事件，并执行该元素上的 onerror() 处理函数。...这些 error 事件不会向上冒泡到 window，不过（至少在 Firefox 中）能被单一的 window.addEventListener 捕获。
如果异常是未捕获的，也就是说程序员没有采取任何措施来捕获它，则程序将会崩溃。 你在什么时候及在什么地方捕获代码中的异常取决于特定的用例。 例如，你可能想要在栈中传播异常，使程序完全崩溃。...程序将会崩溃，因为我们无法捕获异常。...document.querySelector("img"); image.addEventListener("error", function(event) { console.log(event); }); 此模式可用于加载替代资源来替换丢失的图像或脚本...如果失败了，或者决定不去捕获它，则异常可以在栈中冒泡。 从本质上讲，这还不错，但是在不同的环境下对未捕获的 rejection 的反应不同。...更好地捕获他们！ 错误处理 “promisified” 计时器 使用计时器或事件无法捕获从回调引发的异常。
2、资源加载错误 这里的静态资源包括js、css以及image等。现在的web项目，往往依赖了大量的静态资源，而且一般也会有cdn存在。...如果某个节点出现问题导致某个静态资源无法访问，就需要能够捕获这种异常并进行上报，方便第一时间解决问题。 e.g: 下图是图片资源不存在时的上报数据： ?...3、未处理的promise错误 未使用catch捕获的promise错误，往往都会存在比较大的风险。而编码时有可能覆盖的不够全面，因此有必要监控未处理的promise错误并进行上报。...使用true或false都可以，默认为false （滑动查看） 2、资源加载错误使用addEventListener去监听error事件捕获 实现原理：当一项资源（如或）加载失败...，加载资源的元素会触发一个Event接口的error事件，并执行该元素上的onerror()处理函数。
如果这个异常 未捕获，即程序员没有采取任何措施来捕获它，则程序将崩溃。 在何时何地捕获代码中的异常取决于具体的用例。 例如，你可能想在堆栈中传播一个异常，以使程序完全崩溃。...该程序将崩溃，因为我们无法捕获异常。...与 setTimeout 一样，异步代码路径抛出的异常 无法从外部捕获，这将使程序崩溃。 在下一部分中，我们将了解如何使用 Promises 和 async/await 简化异步代码的错误处理。...如果我们失败了，或者决定不在这里捕获它，那么 异常就可以在堆栈中冒泡了。这本身并不坏，但是不同的环境对未捕获的拒绝的反应是不同的。...所以最好捕获它们！ “Promise 化”计时器的错误处理 使用计时器或事件无法捕获从回调抛出的异常。
e.g: 下图是当使用了未定义的变量"foo"，导致产生js运行时错误时的上报数据： 2、资源加载错误 这里的静态资源包括js、css以及image等。...现在的web项目，往往依赖了大量的静态资源，而且一般也会有cdn存在。 如果某个节点出现问题导致某个静态资源无法访问，就需要能够捕获这种异常并进行上报，方便第一时间解决问题。...e.g: 下图是图片资源不存在时的上报数据： 3、未处理的promise错误 未使用catch捕获的promise错误，往往都会存在比较大的风险。...使用true或false都可以，默认为false 2、资源加载错误使用addEventListener去监听error事件捕获 实现原理：当一项资源（如或）加载失败，加载资源的元素会触发一个...而对于跨域js捕获的问题：我们并不能保证所有的跨域静态资源都添加跨域 HTTP 响应头；而通过第二种包裹try-catch的方式进行上报，则需要考虑的场景繁多并且无法保证没有遗漏。
原文地址：https://segmentfault.com/a/1190000023096077 原文作者：发声的沉默者 什么是异常 是指用户在使用应用时，无法得到预期的结果。...：Uncaught TypeError: Cannot read property 'map' of undefined window.addEventListener('error') 当一项资源（如...或）加载失败，加载资源的元素会触发一个Event接口的error事件，并执行该元素上的onerror()处理函数。...这些error事件不会向上冒泡到window，不过（至少在Firefox中）能被单一的window.addEventListener捕获。...：', err); }); Promise.reject('promise'); 结果：捕获异常：PromiseRejectionEvent {isTrusted: true, promise: Promise
TypeError 类型在 JavaScript 中会经常遇到，在变量中保存着意外类型时，或者在访问不存在的方法时，都会导致这种错误。...：", { message, source, lineno, colno, error }); }; 同步错误可以捕获到，但是，请注意 window.error 无法捕获静态资源异常和 JS 代码错误...5.2 静态资源加载异常 方法一：onerror 来捕获 function errorHandler(error) { console.log("捕获到静态资源加载异常",...5.3 Promise 异常 Promise 中的异常不能被 try-catch 和 window.onerror 捕获，这时候我们就需要监听 unhandledrejection 来帮我们捕获这部分错误...可疑区域增加 try-catch 全局监控 JS 异常 window.onerror 全局监控静态资源异常 window.addEventListener 捕获没有 catch 的 Promise 异常用
静态资源错误，一般都是来着资源加载的原因 而这里面我们又有各自的差异 JavaScript 错误 先来说说JavaScript的错误类型，ECMA-262 定义了 7 种错误类型，说明如下： EvalError...} window.onerror 优点： 可以捕获同步和异步的异常 可以获取到错误的详细信息 缺点： 受到同源策略的限制，只能捕获当前域名下的错误 无法捕获语法错误和网络异常的错误 无法阻止异常继续传播...缺点： 无法图片加载错误、资源加载错误 无法阻止错误冒泡 无法提供错误堆栈 //监听错误 window.addEventListener('error', function(event) { //...().catch(cb） 优点： 可以捕获 Promise 的拒绝（失败）状态，并执行相应的错误处理逻辑 可以很方便地处理 Promise 的成功和失败回调 缺点： 无法捕获 Promise 内部的同步异常...，只能捕获到 Promise 对象本身的异常 无法捕获到其他异步操作中的错误，例如网络请求失败等。
虽然捕获阶段在规范中规定不允许响应事件，但是实际上还是会执行，所以有两次机会获取到目标对象。<!...依次alert出“子集冒泡”，“子集捕获”。为什么需要浏览器缓存？对于浏览器的缓存，主要针对的是前端的静态资源，最好的效果就是，在发起请求之后，拉取相应的静态资源，并保存在本地。...所谓的浏览器缓存指的是浏览器将用户请求过的静态资源，存储到电脑本地磁盘中，当浏览器再次访问时，就可以直接从本地加载，不需要再去服务端请求了。...Cookie的特性：Cookie一旦创建成功，名称就无法修改Cookie是无法跨域名的，也就是说a域名和b域名下的cookie是无法共享的，这也是由Cookie的隐私安全性决定的，这样就能够阻止非法获取其他网站的...，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是 HTML，也包括 PDF、image 及其他格式。
/jartto.png"> 我们发现，不论是静态资源异常，或者接口异常，错误都无法捕获到。...； onerror 无法捕获语法错误； 到这里基本就清晰了：在实际的使用过程中，onerror 主要是来捕获预料之外的错误，而 try-catch 则是用来在可预见情况下监控特定的错误，两者结合使用更加高效...问题又来了，捕获不到静态资源加载异常怎么办？...五、window.addEventListener 当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个 Event 接口的 error 事件，并执行该元素上的onerror() 处理函数。...没有写 catch 的 Promise 中抛出的错误无法被 onerror 或 try-catch 捕获到，所以我们务必要在 Promise 中不要忘记写 catch 处理抛出的异常。
NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。...、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。...在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。如果使用图片的懒加载就可以解决以上问题。...在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长（长列表）的场景中。...虽然捕获阶段在规范中规定不允许响应事件，但是实际上还是会执行，所以有两次机会获取到目标对象。<!
JS 代码，例如try块中的以下代码在语法上是错误的，但它不会被catch块捕获。...这里不会被执行"); } ➤ ⓧ Uncaught SyntaxError: Invalid or unexpected token 1.2.2 try..catch 与 异步代码 同样，try..catch无法捕获在异步代码中引发的异常...noSuchVariable; // undefined variable }, 1000); } catch (err) { console.log("这里不会被执行"); } 未捕获的...这里还要注意两件事： 在try块中抛出错误后往后的代码不会被执行了 即使在try块抛出错误之后，finally块仍然执行 finally块通常用于清理资源或关闭流，如下所示： try { openFile...2.1 Promise 中的 then..catch 我们可以使用then()和catch()链接多个 Promises，以处理链中单个 Promise 的错误，如下所示： Promise.resolve
当您异步获取数据时，组件将在加载数据之前至少呈现一次 - 无论是在构造函数，componentWillMount还是componentDidMount中获取它。...要验证它们不相等，请尝试使用严格相等运算符： 在现实世界的示例中，这种错误的一种方式是，如果在加载元素之前尝试在JavaScript中使用DOM元素。...例如，如果您在CDN上托管JavaScript代码，任何未捕获的错误（冒泡到window.onerror处理程序的错误，而不是在try-catch中捕获）将被报告为“脚本错误”而不是包含有用的错误 信息...TypeError: Cannot read property ‘length’ 您通常会在数组中找到定义的长度，但如果未初始化数组或者在另一个上下文中隐藏变量名，则可能会遇到此错误。...Uncaught TypeError: Cannot set property 当我们尝试访问未定义的变量时，它总是返回undefined，我们无法获取或设置undefined的任何属性。
项目中面临下面几种异常场景，需要处理： 语法错误 事件异常 HTTP请求异常 静态资源加载异常 Promise 异常 Iframe 异常 页面崩溃 整体异常处理方案需要实现二方面的效果： 提升用户体验...image.png 经测试，window.onerror并不能捕获语法错误和静态资源的加载错误。...特定的错误信息，比如错误所在的生命周期钩子 // 只在 2.2.0+ 可用 } 复制代码 指定组件的渲染和观察期间未捕获错误的处理函数。...这个处理函数被调用时，可获取错误信息和 Vue 实例。 从 2.2.0 起，这个钩子也会捕获组件生命周期钩子里的错误。...语法错误 事件异常 HTTP请求异常 静态资源加载异常 Promise 异常 Iframe 异常 页面崩溃 捕获异常是我们的最终目标吗？
根据这个原理，我们使用HTML5 的data-xxx属性来储存图片的路径，在需要加载图片的时候，将data-xxx中图片的路径赋值给src，这样就实现了图片的按需加载，即懒加载。...注意：data-xxx 中的xxx可以自定义，这里我们使用data-src来定义。 懒加载的实现重点在于确定用户需要加载哪张图片，在浏览器中，可视区域内的资源就是用户需要的资源。...} } window.onscroll = lozyLoad(); 正向代理和反向代理的区别 正向代理： 客户端想获得一个服务器的数据，但是因为种种原因无法直接获取...注意：all和race传入的数组中如果有会抛出异常的异步任务，那么只有最先抛出的错误会被捕获，并且是被then的第二个参数或者后面的catch捕获；但并不会影响数组中其它的异步任务的执行。...浏览器是如何对 HTML5 的离线储存资源进行管理和加载？
/jartto.png"> 我们发现，不论是静态资源异常，或者接口异常，错误都无法捕获到。...； onerror 无法捕获语法错误； 到这里基本就清晰了：在实际的使用过程中，onerror 主要是来捕获预料之外的错误，而 try-catch 则是用来在可预见情况下监控特定的错误，两者结合使用更加高效...问题又来了，捕获不到静态资源加载异常怎么办？...window.addEventListener 当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个 Event 接口的 error 事件，并执行该元素上的onerror() 处理函数。...没有写 catch 的 Promise 中抛出的错误无法被 onerror 或 try-catch 捕获到，所以我们务必要在 Promise 中不要忘记写 catch 处理抛出的异常。
领取专属 10元无门槛券
手把手带您无忧上云
