设为首页 - 加入收藏 汉中大乐透机选倍投一注 (http://www.0916zz.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 1000 2019 如何 中国
当前位置: 首页 > 综合聚焦 > 移动互联 > 评测 > 正文

一文告诉你如何优雅处理前端异常?

发布时间:2019-03-20 20:25 所属栏目:[评测] 来源:佚名
导读:前端一直是距离用户最近的一层,随着产品的日益完善,我们会更加注重用户体验,而前端异常却如鲠在喉,甚是烦人。 一、为什么要处理异常? 异常是不可控的,会影响最终的呈现结果,但是我们有充分的理由去做这样的事情。 1.增强用户体验; 2.远程定位问题

?一文告诉你如何优雅处理前端异常?

前端一直是距离用户最近的一层,随着产品的日益完善,我们会更加注重用户体验,而前端异常却如鲠在喉,甚是烦人。

一、为什么要处理异常?

异常是不可控的,会影响最终的呈现结果,但是我们有充分的理由去做这样的事情。

1.增强用户体验;
2.远程定位问题;
3.未雨绸缪,及早发现问题;
4.无法复线问题,尤其是移动端,机型,系统都是问题;
5.完善的前端方案,前端监控系统;

对于?JS?而言,我们面对的仅仅只是异常,异常的出现不会直接导致?JS?引擎崩溃,最多只会使当前执行的任务终止。

二、需要处理哪些异常?

对于前端来说,我们可做的异常捕获还真不少。总结一下,大概如下:

  • JS?语法错误、代码异常
  • AJAX?请求异常
  • 静态资源加载异常
  • Promise?异常
  • Iframe?异常
  • 跨域 Script error
  • 崩溃和卡顿

下面我会针对每种具体情况来说明如何处理这些异常。

三、Try-Catch 的误区

try-catch?只能捕获到同步的运行时错误,对语法和异步错误却无能为力,捕获不到。
1.同步运行时错误:

  1. try?{?
  2. let?name?=?'jartto';?
  3. console.log(nam);?
  4. }?catch(e)?{?
  5. console.log('捕获到异常:',e);?
  6. }?

输出:

  1. 捕获到异常:?ReferenceError:?nam?is?not?defined?
  2. at?:3:15?

2.不能捕获到语法错误,我们修改一下代码,删掉一个单引号:

  1. try?{?
  2. let?name?=?'jartto;?
  3. console.log(nam);?
  4. }?catch(e)?{?
  5. ??
  6. console.log('捕获到异常:',e);?
  7. }?

输出:

  1. Uncaught?SyntaxError:?Invalid?or?unexpected?token?

不过语法错误在我们开发阶段就可以看到,应该不会顺利上到线上环境。

3.异步错误

  1. try?{?
  2. setTimeout(()?=>?{?
  3. undefined.map(v?=>?v);?
  4. },?1000)?
  5. }?catch(e)?{?
  6. console.log('捕获到异常:',e);?
  7. }?

我们看看日志:

  1. Uncaught?TypeError:?Cannot?read?property?'map'?of?undefined?
  2. at?setTimeout?(:3:11)?

并没有捕获到异常,这是需要我们特别注意的地方。

四、window.onerror 不是万能的

当?JS?运行时错误发生时,window?会触发一个?ErrorEvent?接口的?error?事件,并执行?window.onerror()

  1. /**?
  2. *?@param?{String}?message?错误信息?
  3. *?@param?{String}?source?出错文件?
  4. *?@param?{Number}?lineno?行号?
  5. *?@param?{Number}?colno?列号?
  6. *?@param?{Object}?error?Error对象(对象)?
  7. */?
  8. ??
  9. window.onerror?=?function(message,?source,?lineno,?colno,?error)?{?
  10. console.log('捕获到异常:',{message,?source,?lineno,?colno,?error});?
  11. }?

1.首先试试同步运行时错误

  1. window.onerror?=?function(message,?source,?lineno,?colno,?error)?{?
  2. //?message:错误信息(字符串)。?
  3. //?source:发生错误的脚本URL(字符串)?
  4. //?lineno:发生错误的行号(数字)?
  5. //?colno:发生错误的列号(数字)?
  6. //?error:Error对象(对象)?
  7. console.log('捕获到异常:',{message,?source,?lineno,?colno,?error});?
  8. }?
  9. Jartto;?

可以看到,我们捕获到了异常:

一文告诉你如何优雅处理前端异常?

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章