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

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,看到什么条件下触发了错误。

注意:

如果跨域脚本是不会看到错误的。 在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

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

(0)

相关推荐

  • JS异步错误捕获的一些事小结

    引入 我们都知道 try catch 无法捕获 setTimeout 异步任务中的错误,那其中的原因是什么.以及异步代码在 js 中是特别常见的,我们该怎么做才比较? 无法捕获的情况 function main() { try { setTimeout(() => { throw new Error('async error') }, 1000) } catch(e) { console.log(e, 'err') console.log('continue...') } } main(); 这

  • NodeJS处理Express中异步错误

    摘要 比起回调函数,使用 Promise 来处理异步错误要显得优雅许多. 结合 Express 内置的错误处理机制和 Promise 极大地降低产生未捕获错误(uncaught exception)的可能性. Promise 在ES6中是默认选项.如果使用 Babel 转译,它也可以与 Generators 或者 Async/Await 相结合. 本文主要阐述如何在 Express 中使用错误处理中间件(error-handling middleware)来高效处理异步错误.在 Github 上

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

    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同样也可以处理

  • 浅谈ASP.NETCore统一处理404错误都有哪些方式

    目录 方式一 方式二 自定义通配路由 方式三 方式四 方式五 web.config <customErrors> 节点中配置ASP.NET管道处理404错误 总结 当未找到网页并且应用程序返回 404 错误时,ASP.NET Core MVC 仅呈现通用浏览器错误页面,如下图所示 这不是很优雅,是吗?我们平时看到的404页面一般是这样的 还有这样的 试了下京东,地址不存在的时候是会重定向到首页 下面就来演示下ASP.NET Core中如何实现这种自定义的404页面处理. 新建项目 ASP.NE

  • 浅谈C++的浅拷贝出现的错误

    之前看一些资料提到浅拷贝的问题,即在复制对象时,只是对对象中的数据成员进行简单的赋值,默认拷贝构造函数执行的也是浅拷贝.如果对象中存在动态成员,如指针,那么仅仅做浅拷贝是不够的,并且容易引发错误,最经典的例子: #include <iostream> #include <stdio.h> using namespace std; class A{ public: A(){m_p = new int(10);}; ~A(){cout << "destructio

  • 浅谈js的ajax的异步和同步请求的问题

    先来看以下代码: var flag=true; var index=0; $.ajax({ url: "http://www.jb51.net/", success: function(data){ flag=false; } }); while(flag){ index++; } alert(index); 请问最后alert的index的结果是多少? 可能有人会说0呗.实际上却没那么简单.大家可以自己试试看.可以看到最终程序进入了一个死循环!怎么会这样呢! 我们在看一段代码: va

  • 浅谈struts1 & jquery form 文件异步上传

    1.概述 还在用struts1?是的,在地球的没写地方,落后的生产方式还在运转(老项目). 从 继承org.apache.struts.action.Action, 继承org.apache.struts.action.ActionForm开始吧 2. 代码 2.1 html页面 <html> <head> <title>网页上传</title> </head> <body> <center> <h1>本地文件

  • 浅谈如何优雅地停止Spring Boot应用

    首先来介绍下什么是优雅地停止,简而言之,就是对应用进程发送停止指令之后,能保证 正在执行的业务操作不受影响,可以继续完成已有请求的处理,但是停止接受新请求 . 在 Spring Boot 2.3 中增加了新特性 优雅停止 ,目前 Spring Boot 内置的四个嵌入式 Web 服务器( Jetty.Reactor Netty.Tomcat 和 Undertow )以及反应式和基于 Servlet 的 Web 应用程序都支持优雅停止. 下面,我们先用新版本尝试下: Spring Boot 2.3

  • 浅谈Java中spring 线程异步执行

    多线程并发处理起来通常比较麻烦,如果你使用spring容器来管理业务bean,事情就好办了多了.spring封装了Java的多线程的实现,你只需要关注于并发事物的流程以及一些并发负载量等特性,具体来说如何使用spring来处理并发事务: 1.了解 TaskExecutor接口 Spring的TaskExecutor接口等同于java.util.concurrent.Executor接口. 实际上,它存在的主要原因是为了在使用线程池的时候,将对Java5的依赖抽象出来. 这个接口只有一个方法exe

  • 浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考

    前言 最近需要做一个浏览器的, 支持大体积文件上传且要支持断点续传的上传组件, 本来以为很容易的事情, 结果碰到了一个有意思的问题: 循环执行连续的异步任务, 且后一个任务需要等待前一个任务的执行状态 这么说可能有点空泛, 以我做的组件举例: 这个组件本意是为了上传大体积视频, 和支持断点续传, 因为动辄几个G的视频不可能直接把文件读进内存, 只能分片发送(考虑到实际网络状态, 每次发送大小定在了4MB), 而且这么做也符合断点续传的思路. 组件工作流程如下: 选定上传文件后, 从H5原生upl

  • 浅谈Android程序与JavaScript脚本的交互

    我们都知道,手机时代的来临的主要标志是啥?能够方便的接入互联网!互联网展现给我们的方式一般都是网页,网页中又必不可少的拥有javascript,所以说,android提供对javascript的支持那是迫在眉睫了,幸好,android早就给我们提供了无缝连接.让我们可以通过android与javascript进行交互. 我们的应用很简单,如图: 我们有一个输入框,旁边有个按钮,点击按钮就会提示我们输入的内容.当然这只是html中最简单的程序了,但是你将这个程序放入android手机中访问下试试,

  • 浅谈href=#与href=javascript:void(0)的区别

    #"包含了一个位置信息 默认的锚点是#top 也就是网页的上端 而javascript:void(0)  仅仅表示一个死链接 这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首 而javascript:void(0) 则不是如此 所以调用脚本的时候最好用void(0) 或者<input onclick> <div onclick>等 打开新窗口链接的几种办法 1.window.open('url') 2.用自定义函数 <script>       

随机推荐