如何优雅处理前端异常?

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

一、为什么要处理异常?

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

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

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

二、需要处理哪些异常?

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

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

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

三、Try-Catch 的误区

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

1. 同步运行时错误:

try {
  let name = ‘jartto‘;
  console.log(nam);
} catch(e) {
  console.log(‘捕获到异常:‘,e);
}

输出:

捕获到异常: ReferenceError: nam is not defined
    at <anonymous>:3:15

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

try {
  let name = ‘jartto;
  console.log(nam);
} catch(e) {

  console.log(‘捕获到异常:‘,e);
}

输出:

Uncaught SyntaxError: Invalid or unexpected token

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

3. 异步错误

try {
  setTimeout(() => {
    undefined.map(v => v);
  }, 1000)
} catch(e) {
  console.log(‘捕获到异常:‘,e);
}

我们看看日志:

Uncaught TypeError: Cannot read property ‘map‘ of undefined
    at setTimeout (<anonymous>:3:11)

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

四、window.onerror 不是万能的

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

/**
* @param {String}  message    错误信息
* @param {String}  source    出错文件
* @param {Number}  lineno    行号
* @param {Number}  colno    列号
* @param {Object}  error  Error对象(对象)
*/

window.onerror = function(message, source, lineno, colno, error) {
   console.log(‘捕获到异常:‘,{message, source, lineno, colno, error});
}

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

window.onerror = function(message, source, lineno, colno, error) {
// message:错误信息(字符串)。
// source:发生错误的脚本URL(字符串)
// lineno:发生错误的行号(数字)
// colno:发生错误的列号(数字)
// error:Error对象(对象)
console.log(‘捕获到异常:‘,{message, source, lineno, colno, error});
}
Jartto;

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

2. 再试试语法错误呢?

window.onerror = function(message, source, lineno, colno, error) {
console.log(‘捕获到异常:‘,{message, source, lineno, colno, error});
}
let name = ‘Jartto

控制台打印出了这样的异常:

Uncaught SyntaxError: Invalid or unexpected token

什么,竟然没有捕获到语法错误?

3. 怀着忐忑的心,我们最后来试试异步运行时错误:

window.onerror = function(message, source, lineno, colno, error) {
    console.log(‘捕获到异常:‘,{message, source, lineno, colno, error});
}
setTimeout(() => {
    Jartto;
});

控制台输出了:

原文地址:https://blog.51cto.com/14516164/2433082

时间: 2024-11-07 20:51:46

如何优雅处理前端异常?的相关文章

谈谈前端异常捕获

作为一个前端开发人员,每次看到浏览器控制台信息里面红通通的报错信息是不是都很紧张......不要怕,下面我们就来讨论一下前端的异常捕获. 异常捕获,相对于其他知识点可能没那么被重视,特别是对于前端程序员.但不得不说,这又是一个不得不面对的知识点. 为什么要捕获异常 首先,我们为什么要进行异常捕获和上报呢? 正所谓百密一疏,用程序员的话来说就是:天下不存在没有bug的程序(不接受反驳 ?? ).即使经过各种测试,还是会存在十分隐蔽的bug,这种不可预见的问题只有通过完善的监控机制才能有效的减少其带

异常监控:教你如何优雅的处理前端异常

前端一直是距离用户最近的一层,随着产品的日益完善,我们会更加注重用户体验,而前端异常却如鲠在喉,甚是烦人. 一.为什么要处理异常? 异常是不可控的,会影响最终的呈现结果,但是我们有充分的理由去做这样的事情. 增强用户体验: 远程定位问题: 未雨绸缪,及早发现问题: 无法复线问题,尤其是移动端,机型,系统都是问题: 完善的前端方案,前端监控系统: 对于 JS 而言,我们面对的仅仅只是异常,异常的出现不会直接导致 JS 引擎崩溃,最多只会使当前执行的任务终止. 二.需要处理哪些异常? 对于前端来说,

前端异常监控 - BadJS

前端异常监控 - BadJS 简介:BadJS 是 web 前端异常监控解决方案,提供一种 web 页面的脚本错误监控.上报.统计.查看等系统化的跟踪解决方案.目前BadJS覆盖了腾讯课堂.公众号.邮箱等公司40+业务,支持脚本错误捕获.上报.统计.告警.定时发送邮件报表等各项能力.BadJS 已在 Github上开源(https://github.com/betterjs)

Java大学问——优雅地处理异常

一.前言 你有没有这样的印象,当你想要更新一款 APP 的时候,它的更新日志里总有这么一两句描述: 修复若干 bug 杀了某程序员祭天,并成功解决掉他遗留的 bug 作为一名负责任的程序员,我们当然希望程序不会出现 bug,因为 bug 出现的越多,间接地证明了我们的编程能力越差,至少领导是这么看的. 事实上,领导是不会拿自己的脑袋宣言的:"我们的程序绝不存在任何一个 bug."但当程序出现 bug 的时候,领导会毫不犹豫地选择让程序员背锅. 为了让自己少背锅,我们可以这样做: 在编码

前端异常监控解决方案研究

摘要: 异常监控不复杂也不简单啊... 原文:前端异常监控解决方案研究 作者:frustigor 前端监控包括行为监控.异常监控.性能监控等,本文主要讨论异常监控.对于前端而言,和后端处于同一个监控系统中,前端有自己的监控方案,后端也有自己等监控方案,但两者并不分离,因为一个用户在操作应用过程中如果出现异常,有可能是前端引起,也有可能是后端引起,需要有一个机制,将前后端串联起来,使监控本身统一于监控系统.因此,即使只讨论前端异常监控,其实也不能严格区分前后端界限,而要根据实际系统的设计,在最终的

Java:优雅地处理异常真是一门学问啊!

本篇我们来谈谈如何优雅地处理异常. 01.异常处理机制可以少出 bug 你有没有这样的印象,当你想要更新一款 APP 的时候,它的更新日志里总有这么一两句描述: 修复若干 bug 杀了某程序员祭天,并成功解决掉他遗留的 bug 作为一名负责任的程序员,我们当然希望程序不会出现 bug,因为 bug 出现的越多,间接地证明了我们的编程能力越差,至少领导是这么看的. 事实上,领导是不会拿自己的脑袋宣言的:"我们的程序绝不存在任何一个 bug."但当程序出现 bug 的时候,领导会毫不犹豫地

对前端异常window error捕获的全面总结

对于前端的异常捕获,我们都会知道onerror事件,但针对window的error事件的用法,其实是有区别的. 方式一: window.onerror = handleOnError 1. 能捕获到js执行错误,不能捕获带有src的标签元素的加载错误. 2. 参数对应5个值(错误信息,所在文件,行,列,错误信息) 3. 函数体内用return true可以不让异常信息输出到控制台 方式二:  window.addEventListener 1. 为捕获状态时(第三个参数为true)能捕获到js执

前端代码异常日志收集与监控

在复杂的网络环境和浏览器环境下,自测.QA测试以及 Code Review 都是不够的,如果对页面稳定性和准确性要求较高,就必须有一套完善的代码异常监控体系,本文从前端代码异常监控的方法和问题着手,尽量全面地阐述错误日志收集各个阶段中可能遇到的阻碍和处理方案. ? 收集日志的方法 平时收集日志的手段,可以归类为两个方面,一个是逻辑中的错误判断,为主动判断:一个是利用语言给我们提供的捷径,暴力式获取错误信息,如 try..catch 和 window.onerror. 1. 主动判断 我们在一些运

java异常面试常见题目

在Java核心知识的面试中,你总能碰到关于 处理Exception和Error的面试题.Exception处理是Java应用开发中一个非常重要的方面,也是编写强健而稳定的Java程序的关键,这自然使它成为面试题中的常客.关于Java中Error和Exception的面试题目多是关于Exception和Error的概念,如何处理Exception,以及 处理Exception时需要遵守的最佳实践等等.尽管关于多线程.垃圾回收.JVM概念和面向对象设计等方面的问题依然主宰着这类面试,你仍然需要为回答