浅谈如何优雅处理JavaScript异步错误


Posted in Javascript onNovember 12, 2019

1. try/catch

try/catch基本上是大家最常和async/await一起使用的,基本上我们会用它去包围大部分的异步方法。await关键字后面的promise一旦reject了,就会抛出一个异常错误。

run();
async function run() {
  try {
    await Promise.ject(new Error('Oops!'));
  } catch (err) {
    console.error(error.message);
  }
}

try/catch同样也可以处理同步的错误,比如下面:

async function run() {
 const v = null;
 try {
  await Promise.resolve('foo');
  v.thisWillThrow;
 } catch (error) {
    // 会出现"TypeError: Cannot read property 'thisWillThrow' of null"
   console.error(error.message);
 }
}

好像我们只要无脑把逻辑都放到try/catch里面就万事大吉了吗?不太准确,下面的代码却会导致unhandled promise rejection。这个return关键字直接返回就错误却不会被捕获:

async function run() {
  try {
    // 直接返回Promise,而不是用await关键字
    return Promise.reject(new Error('Oops!'));
  } catch (error) {
    console.error(error.message);    
  }
}

一种处理方式是使用return await来解决。

try catch捕获不了回调函数。try catch 仅仅在单一执行环境中奏效。是在回调中加入try catch 来捕获错误。

setTimeout(funciton() {
 try {
  fn()
 } catch (e) {
   // handle error
 }     
      
})

这是奏效的。 不过try catch会在各个地方。 V8引擎是不鼓励try catch在函数中的使用的。 之前把try catch移到顶层来捕获调用栈的错误,但这个对异步代码不会奏效。

2. Golang-style(then)

golang style即使用.then()的方法来将一个promise转换为另一个处理完错误的reject promise。可以使用类似if(err)来进行检查:

async function throwAnError() {
  throw new Error('Opps!');
}

async function runAwait() {
  let err = await throwAnError();
  if (err){
    console.error(err.message);
  }
}

这么写会直接抛出异常,因为这个方法抛出了异常,但是该方法本身没有用try/catch捕获。很多时候,我们在使用第三方库的时候可能会出现这种情况。

then()解决方法

async function runAwait() {
    let err = await throwAnError().then(() => null, err => err);
  if (err){
    console.error(err.message);
  }
}

then()的方式,就会等待promise状态resolve或reject后然后执行相应的回调,然后判断err对象并处理,所以其实它相当于被捕获了。

同时返回错误和值

async function run() {
  let [err, res] = await throwAnError().then(v => [null, v], err => [err, null]);
  if (err){
    console.error(err.message);
  }
  console.log(res)
}

结果:这么做可以通过解构返回一个数组,包含了结果和error对象。当然如果是reject就会返回null和error对象;而如果resolved返回数组的第一个error对象就为null,第二个就是结果。

优缺点

优点:这种模式可以更简洁地处理,同时可以不需要写catch。
缺点1:这是非常重复性的,每次执行异步操作都需要去判断error对象。
缺点2:无法帮助处理run方法中的同步错误。

所以这种方式需要谨慎使用。

3. Catch捕获

上面两种模式都可以处理异步错误,但是对于错误处理,最好的情况是在异步逻辑的最后加上catch,这样可以保证所有错误都被捕获到。其实这也是一个原则,即统一处理错误,而不是单独去处理每个错误

async function run() {
 return Promise.reject(new Error('Oops!'));
}

run().catch(function handleError(err) {
  console.error(err.message);
}).catch( err => {
  process.nextTick(() => { throw errl});
})

使用catch捕获错误,如果handleError本身也有错误,就需要再catch一遍,但是为了避免回调地狱,如果该方法发生了错误就终止该进程。

优缺点

  • 使用catch的话,不管异步方法本身是否捕获错误,它都会去捕获异步错误。
  • 使用try/catch无法避免catch本身抛出异常,而如果它抛出了那除了嵌套多一层try/catch外,最好的做法就是加catch来让代码更简洁。

4  全局错误捕获

4.1 浏览器全局错误捕获

浏览器全局处理基本上就是依靠事件,因为浏览器是事件驱动的。一旦抛出错误,解释器在执行环境上下文中停止执行并展开,此时会有一个onerror全局事件抛出:

window.addEventListener('error', function (e) {
  var error = e.error;
  console.log(error);
})

全局错误处理器会捕获任何在执行环境中发生的错误,即便是不同的对象发生的错误事件,或者是各种类型的错误。这是全局集中处理错误的一种常见方式。

调用栈

调用栈在定位问题的时候十分重要,我们可以使用调用栈在处理器中处理特定的错误。

window.addEventListener('error', function (e) {
 var stack = e.error.stack;
 var message = e.error.toString();
 if (stack) {
  message += '\n' + stack;
 }
 var xhr = new XMLHttpRequest();
 xhr.open('POST', '/log', true);
 // Fire an Ajax request with error details
 xhr.send(message);
});

通过日志可以看到,具体什么情况触发了什么错误。在调试时调用堆栈也会非常有用。你 可以分析log,看到什么条件下触发了错误。

浅谈如何优雅处理JavaScript异步错误

注意:

如果跨域脚本是不会看到错误的。 在JS中,错误信息仅仅是允许在同一个域中。

个人想法

更多的时候,代码抛出了异常,我们更关注的是在运行时,某个变量的值是什么,是否这个变量的值导致了错误,所以打印出调用时的跟多的信息更重要。

4.2 Node.js全局错误捕获

Node.js本身的异常处理要复杂得多,因为涉及到了进程或线程抛出异常的问题。

基于Koa的全局错误处理

nodejs是error-first的异步处理机制,此处底层会调用net模块的listen方法并在错误发生时执行回调。

app.listen(app.config.listenPort, (err) => {
 if (err) throw err
 app.logger.info(`> Ready on http://localhost:${app.config.listenPort}`)
})

路由错误处理

对于每个路由,它可能也会有不同的错误处理逻辑,这时路由进来的请求就需要根据情况返回不同的异常码和信息。

router.get('/loginAuth', async (ctx, next) => {
 try {
  const code = query.code
  const res = await requestToken(code)
  if (res.data.code !== 0) {
   ctx.app.logger.error(`request token error.Code is ${res.data.code} || response is: ${JSON.stringify(res.data.data)} || msg: ${res.data.message}`)
   ctx.body = {
    code: 10000,
    message: `request token by code error`
   }
  } else {
   ctx.body = res.data
  }
 } catch (err) {
  ctx.app.logger.error(`request api has exception ${ctx.request.url} || ${err.code} || ${err.message} || ${err.stack}`)
  ctx.body = {
   code: 500,
   message: `Error response`
  }
 }
})

5. 总结

  1. 通常异常可能是预期的或者超出预期的,不管怎样,使用try/catch没有问题。
  2. 对于超出预期的错误,尽量使用catch来保证它们会被捕获到。
  3. 把错误处理器添加到window对象上,它会捕获到异步错误,符合了DRY和SOLID原则。一个全局的错误处理器可以帮你保持异步代码整洁。

Reference

async-await-error-handling
nodejs-v12-lts

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在JavaScript中使用inline函数的问题
Mar 08 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 #Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 #Javascript
vue transition 在子组件中失效的解决
Nov 12 #Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 #Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 #Javascript
Vue退出登录时清空缓存的实现
Nov 12 #Javascript
解决vue admin element noCache设置无效的问题
Nov 12 #Javascript
You might like
乱谈我对耳机、音箱的感受
2021/03/02 无线电
php长字符串定义方法
2012/07/12 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
复制本贴标题和地址的js代码
2008/07/01 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
浅谈Python中的闭包
2015/07/08 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
开放系统互连参考模型
2016/06/29 面试题
通用C#笔试题附答案
2016/11/26 面试题
经理秘书岗位职责
2013/11/14 职场文书
汉语言文学职业规划
2014/02/14 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
大学新生军训感言
2014/02/25 职场文书
寒假家长评语大全
2014/04/16 职场文书
房产分割协议书范文
2014/11/21 职场文书
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
php双向队列实例讲解
2021/11/17 PHP
Python Pandas 删除列操作
2022/03/16 Python
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript