首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端异常捕获与处理

} finally { return "做作业"; } return "睡觉"; } 表面上调用这个函数会返回 "出去玩",因为返回 "出去玩" 语句位于 try 语句块,而执行此语句又不会出错...TypeError 类型 JavaScript 中会经常遇到,变量中保存着意外类型,或者访问不存在方法,都会导致这种错误。...); // remoteData 为服务端返回数据 } catch { console.error("服务端数据格式返回异常,无法解析", remoteData); } 并不是捕获到错误就结束了..."JSON数据解析出现异常", error); return false; } 如果数据解析出错属于预料之中情况,也有替代默认值,那么当解析出错直接使用默认值也可以; try { return...JSON.parse(remoteData); } catch (error) { console.error("服务端数据格式返回异常,使用本地缓存数据", erorr); return localData

3.3K30

try..catch 不能捕获错误有哪些?注意事项又有哪些?

JS 代码,例如try块以下代码语法上是错误,但它不会被catch块捕获。...1.2.2 try..catch 与 异步代码 同样,try..catch无法捕获异步代码引发异常,例如setTimeout: try { setTimeout(function() {...这里还要注意两件事: try块出错误后往后代码不会被执行了 即使try块抛出错误之后,finally块仍然执行 finally块通常用于清理资源或关闭流,如下所示: try { openFile...2.1 Promise then..catch 我们可以使用then()和catch()链接多个 Promises,以处理链单个 Promise 错误,如下所示: Promise.resolve...➤ x = x + 1; ⓧ Uncaught ReferenceError: x is not defined 3.5 SyntaxError 当你 JS 代码中使用任何错误语法,都会引发SyntaxError

2.5K20
您找到你想要的搜索结果了吗?
是的
没有找到

ES6读书笔记(三)

) { console.log(error) }); // ok 复制代码 上面代码Promise resolve语句后面,再抛出错误,不会被捕获,等于没有抛出。...到了那个时候,Promise 运行已经结束了,所以这个错误是 Promise 函数体外抛出,会冒泡到最外层,成了捕获错误,相当于是js引擎去执行了这个回调,而不是promise内部执行。...() { // ... }); 复制代码 ②立即resolve Promise 对象,是本轮“事件循环”(event loop)结束,而不是在下一轮“事件循环”开始。...(4)不断调用指针对象next方法,直到它指向数据结构结束位置。 每一次调用next方法,都会返回数据结构的当前成员信息。具体来说,就是返回一个包含value和done两个属性对象。...Generator.prototype.throw() Generator 函数返回遍历器对象,都有一个throw方法,可以函数体外抛出错误,然后 Generator 函数体内捕获: var g

1K20

浅析前端异常及降级处理

image.png ReferenceError 当引用不存在变量,该对象表示错误: image.png SyntaxError 当JavaScript引擎解析代码遇到不符合该语言语法标记标记顺序时...错误边界渲染期间、生命周期方法和整个组件树构造函数捕获错误。...特定错误信息,比如错误所在生命周期钩子 // 只 2.2.0+ 可用 } 复制代码 指定组件渲染和观察期间捕获错误处理函数。...另外,如果任何被覆盖钩子或处理函数返回一个 Promise 链 (例如 async 函数),则来自其 Promise错误也会被处理。 以上引用自Vue 官网。...六、扩展 1.设置采集率 若是错误实在太多,比如有时候代码进入死循环,错误量过多导致服务器压力大,可酌情降低采集率。

1.4K10

【Web技术】剖析前端异常及降级处理

image.png ReferenceError 当引用不存在变量,该对象表示错误: image.png SyntaxError 当JavaScript引擎解析代码遇到不符合该语言语法标记标记顺序时...错误边界渲染期间、生命周期方法和整个组件树构造函数捕获错误。...特定错误信息,比如错误所在生命周期钩子 // 只 2.2.0+ 可用 } 复制代码 指定组件渲染和观察期间捕获错误处理函数。...另外,如果任何被覆盖钩子或处理函数返回一个 Promise 链 (例如 async 函数),则来自其 Promise错误也会被处理。 以上引用自Vue 官网。...六、扩展 1.设置采集率 若是错误实在太多,比如有时候代码进入死循环,错误量过多导致服务器压力大,可酌情降低采集率。

1.3K10

JavaScript错误处理完全指南

1 什么是编程错误? 我们程序,事物并非总是一帆风顺。 特别是某些情况下,我们可能希望 停止程序或在发生意外错误时通知用户。...SyntaxError TypeError URIError 请记住,所有这些错误类型都是 实际构造函数,旨在返回一个新错误对象。...当你语言关键字拼写错误时,会发生 SyntaxError: va x = '33'; // SyntaxError: Unexpected identifier 或者,当你错误地方使用保留关键字...如果这个异常 捕获,即程序员没有采取任何措施来捕获它,则程序将崩溃。 何时何地捕获代码异常取决于具体用例。 例如,你可能想在堆栈传播一个异常,以使程序完全崩溃。...如果我们失败了,或者决定不在这里捕获它,那么 异常就可以堆栈冒泡了。这本身并不坏,但是不同环境对捕获拒绝反应是不同

4.8K20

前端 JS 异常那些事

axios 处理异常抛出一个扩展 ApiError 对象,传递错误信息、错误等,错误处理对于这种错误进行特殊处理。...对于上面提到可预知异常需要终止流程,也可以使用抛出异常或者返回特定数据来让调用方感知。...,可以进行适当封装 对于异步 promise 调用可以直接使用await-to-js,利用 Promise 特性,分别在 promise.then 和 promise.catch 返回不同数组,...监听全局异常和捕获 Promise 异常并进行相关处理 function onReject(e) { // ......用于捕获渲染错误,也仅能捕获上面提到白屏异常(如异步错误等也是没有办法被捕获到),也就是说如果我们Error Boundary捕获到错误并上报,这个错误通常是非常严重

7310

剖析前端异常及其降级处理和防范方案

image.png SyntaxError 当JavaScript引擎解析代码遇到不符合该语言语法标记标记顺序时,将引发该异常: ?...错误边界渲染期间、生命周期方法和整个组件树构造函数捕获错误。...特定错误信息,比如错误所在生命周期钩子 // 只 2.2.0+ 可用 } 复制代码 指定组件渲染和观察期间捕获错误处理函数。...另外,如果任何被覆盖钩子或处理函数返回一个 Promise 链 (例如 async 函数),则来自其 Promise错误也会被处理。 以上引用自Vue 官网。...六、扩展 1.设置采集率 若是错误实在太多,比如有时候代码进入死循环,错误量过多导致服务器压力大,可酌情降低采集率。

1.1K40

一篇讲透自研前端错误监控

常见JS执行错误 SyntaxError 解析发生语法错误 // 控制台运行 const xx, window.onerror捕获不到SyntxError,一般SyntaxError构建阶段,甚至本地开发阶段就会被发现...但通用fetch怎么办呢,fetch返回Promise,但Promise错误不能被捕获,怎么办呢?...Promise错误 普通Promise错误 try/catch不能捕获Promise错误 // try/catch 不能处理 JSON.parse 错误,因为它在 Promise try {...可视化服务,去请求对应报错url匹配到对应作者,返回给展示端。 image.png SourceMap 利用webpackhidden-source-map构建。...错误报警 报警设置 每条业务线设置自己阈值、错误时间跨度,报警轮询间隔 通过钉钉hook报警到对应群 通过日报形式报出错误作者排行榜 image.png 四、扩展 行为搜集 通过搜集用户操作,可以明显发现错误为什么产生

1.5K20

前端基础进阶(十五):详解 Promise对象

ajax 原生实现,利用了onreadystatechange事件,当该事件触发并且符合一定条件,才能拿到想要数据,之后才能开始处理数据。...) }); // ok 上面代码Promise resolve语句后面,再抛出错误,不会被捕获,等于没有抛出。...不过,Node.js 有一个unhandledRejection事件,专门监听捕获reject错误,上面的脚本会触发这个事件监听函数,可以监听函数里面抛出错误。...如果 Promise 内部有捕获错误,会直接终止进程,并且进程退出码不为 0。 再看下面的例子。...到了那个时候,Promise 运行已经结束了,所以这个错误是 Promise 函数体外抛出,会冒泡到最外层,成了捕获错误。

29020

ES6Promise对象作用

getJSON是对 XMLHttpRequest 对象封装,用于发出一个针对 JSON 数据 HTTP 请求,并且返回一个Promise对象。..., error); 6}); 上面代码,getJSON方法返回一个 Promise 对象,如果该对象状态变为resolved,则会调用then方法指定回调函数;如果异步操作抛出错误,状态就会变为rejected...另外,then方法指定回调函数,如果运行出错误,也会被catch方法捕获。...上面代码Promise resolve语句后面,再抛出错误,不会被捕获,等于没有抛出。因为 Promise 状态一旦改变,就永久保持该状态,不会再变了。...对于promise对象错误捕获,通常最佳实践是不在then()方法里设置reject状态回调函数(即then方法第二个参数,其可选),而是使用catch方法捕获

79120

前端基础进阶(十五):详解 Promise对象

ajax 原生实现,利用了onreadystatechange事件,当该事件触发并且符合一定条件,才能拿到想要数据,之后才能开始处理数据。...) }); // ok 上面代码Promise resolve语句后面,再抛出错误,不会被捕获,等于没有抛出。...不过,Node.js 有一个unhandledRejection事件,专门监听捕获reject错误,上面的脚本会触发这个事件监听函数,可以监听函数里面抛出错误。...如果 Promise 内部有捕获错误,会直接终止进程,并且进程退出码不为 0。 再看下面的例子。...到了那个时候,Promise 运行已经结束了,所以这个错误是 Promise 函数体外抛出,会冒泡到最外层,成了捕获错误。

1.1K20

Promise 对象一网打尽

) { console.error('出错了', error); }); 上面代码,getJSON是对 XMLHttpRequest 对象封装,用于发出一个针对 JSON 数据 HTTP 请求...) }); // ok 上面代码Promise resolve语句后面,再抛出错误,不会被捕获,等于没有抛出。...不过,Node.js 有一个unhandledRejection事件,专门监听捕获reject错误,上面的脚本会触发这个事件监听函数,可以监听函数里面抛出错误。...如果 Promise 内部有捕获错误,会直接终止进程,并且进程退出码不为 0。 再看下面的例子。...到了那个时候,Promise 运行已经结束了,所以这个错误是 Promise 函数体外抛出,会冒泡到最外层,成了捕获错误。

90810

浏览器自带fetch函数发送GET POST请求,发送POST form数据

fetch 是浏览器自带函数,用于发送网络请求。fetch 方法返回一个 Promise 对象,可以通过链式调用 then 方法处理响应数据,或者通过 catch 方法捕获错误信息。...然后,通过 then 方法对请求返回 Response 对象进行处理,使用 json() 方法将响应体转换为 JSON 格式数据,最后将数据打印到控制台中。...'POST',并在请求 body 参数设置请求体内容,使用 JSON.stringify() 方法将请求体转换为 JSON 格式字符串。...最后,通过 then 方法对请求返回数据进行处理,将响应体转换为 JSON 格式数据并打印到控制台中。如果请求出错,则使用 catch 方法捕获错误并打印到控制台中。...此外,发送 POST 请求,需要设置请求头 'Content-Type' 参数为 'application/json',并将请求体使用 JSON.stringify() 方法进行序列化。

2.2K10

asyncawait初学者指南

因此,在打印API返回真实数据之前,它就会打印Finished fetching data。 大多数情况下,这并不是我们想要行为。...如何创建JavaScript异步函数 让我们近距离看看fetchDataFromApi数据获取逻辑。JavaScript数据获取是典型异步操作案例。...Node还在其内置util模块添加了一个promise函数,可以将使用回调函数代码转换为返回promise。而从v10开始,Nodefs模块函数可以直接返回promise。...使用try/catch来恢复async函数内部预期错误,但通过调用函数添加catch()来处理意外错误。...一种方法是以.mjs为扩展名保存,然后像这样运行它: node index.mjs 另一种方法是package.json文件设置"type": "module": { "name": "myapp

23120

Vue笔记:封装 axios 为插件使用

所以本文会详细跟大家介绍,如何封装请求,并且项目组件复用请求。有需要朋友可以做一下参考。..., // 设置超时时间 timeout: 10000, // 携带凭证 withCredentials: true, // 返回数据类型 responseType: 'json'...(error) // 调用那边可以拿到(catch)你想返回错误信息 } ) // response 拦截器 instance.interceptors.response.use...} }) } export default install 使用 到此为止,万事俱备就差用了, mian.js 做如下操作: import api from '....总结 以上二次封装较为全面,基本完成了我们之前需求 错误处理上还需要与后端协定好返回值,做具体约定 本文同步发布 https://www.cssge.com 本文转载自 原文作者:前端小子 原文链接

1.9K10
领券