优雅处理前端异常的几种方式推荐

目录
  • 一、为什么要处理异常?
  • 二、需要处理哪些异常?
  • 三、处理异常的方式有哪些?
    • 1、try-catch
    • 2、window.onerror
    • 3、window.addEventListener
    • 4、Promise catch
    • 5、vue errorHandler
    • 6、 react 异常捕获
    • 7、跨域
  • 四、总结

一、为什么要处理异常?

1、未雨绸缪,尽早发现问题

2、让异常变得可控,避免影响呈现结果

3、增强用户体验

4、完善的前端方案

二、需要处理哪些异常?

1、JavaScript 语法错误、代码异常

2、异步请求异常

3、静态资源加载异常

4、Promise 异常

5、跨域

6、崩溃与渲染异常

三、处理异常的方式有哪些?

1、try-catch

我们可以使用 try-catch 对同步代码运行异常进行捕获。

例如:

try {
  let name = 'leo';
  console.log(age);
} catch(e) {
  console.log('捕获到异常:',e);
}

// 捕获到异常: ReferenceError: age is not defined

try-catch 无法捕获语法错误和异步错误。

例如:

try {
  let name = 'leo;   // 缺少一个单引号,属于语法错误,在开发阶段便提示出来
  console.log(age);
} catch(e) {
  console.log('捕获到异常:',e);
}
// Uncaught SyntaxError: Invalid or unexpected token
try {
  setTimeout(() => {
    undefined.map(v => v*2);
  }, 1000)
} catch(e) {
  console.log('捕获到异常:',e);
}
 

由于 setTimeout 属于异步,try-catch 并没有捕获到,查看日志

// Uncaught TypeError: Cannot read property 'map' of undefined

2、window.onerror

我们可以使用 window.onerror 对 JavaScript 运行错误时进行捕获。

window.onerror = function(message, source, lineNo, colNo, error) {
  console.log('捕获到异常:',{message, source, lineNo, colNo, error});
}

/**
* message   错误信息
* source    出错文件
* lineNo    行号
* colNo     列号
* error     Error对象(对象)
*/

同步运行错误

window.onerror = function(message, source, lineNo, colNo, error) {
  console.log('捕获到异常:',{message, source, lineNo, colNo, error});
}
leo;

捕获到异常

语法错误

window.onerror = function(message, source, lineNo, colNo, error) {
  console.log('捕获到异常:',{message, source, lineNo, colNo, error});
}
let name = 'leo

与 try-catch 一样,无法捕获语法错误。

异步运行错误

window.onerror = function(message, source, lineNo, colNo, error) {
  console.log('捕获到异常:',{message, source, lineNo, colNo, error});
}
setTimeout(() => {
  leo;
},1000)

捕获到异常

window.onerror 在捕获到错误时,会向上抛出,如上例,控制台会出现

我们可以在函数里面使用 return true,使异常不向上抛出,此时控制台不会显示如上错误信息

window.onerror = function(message, source, lineNo, colNo, error) {
  console.log('捕获到异常:',{message, source, lineNo, colNo, error});
  return true;   // 异常不向上抛出
}
setTimeout(() => {
  leo;
},1000)

window.onerror 最好写在所有 JavaScript 脚本前面,否则有可能捕获不到异常;

window.onerror 无法捕获语法异常、静态资源异常、接口请求异常;

window.onerror 主要用来捕获意料之外的异常,而 try-catch 则是用来捕获可预见的异常。

3、window.addEventListener

我们可以使用 window.addEventListener 对静态资源加载异常与接口请求异常进行捕获。

<scritp>
window.addEventListener('error', (error) => {
    console.log('捕获到异常:', error);
}, true)
</script>
<img src="../../assets/test.png">

捕获到异常

当一项资源(如图片或脚本)加载失败,加载资源的元素会触发一个 Event 接口的 error 事件,并执行该元素上的 onerror 处理函数。

由于网络请求异常不会事件冒泡,因此必须在捕获阶段将其捕捉到才行,但是这种方式虽然可以捕捉到网络请求的异常,但是无法判断状态码是 404 还是其他比如 500 等等,所以还需要配合服务端日志才进行排查分析才可以。

不同的浏览器返回的 error 对象可能不一样,需要做兼容;

避免 addEventListener 重复监听。

4、Promise catch

我们可以使用 Promise 中的 catch 捕获异步错误。

new Promise((resolve,reject) => {
  reject("执行失败!")
}).catch(error => {
  console.log("捕获到异常:",error)
})

捕获到异常

有时候我们在写 Promise 可能会漏掉 catch,所以建议在全局增加一个对 unhandledrejection 的监听,用来全局监听 Uncaught Promise Error。

window.addEventListener("unhandledrejection", function(e){
  e.preventDefault()
  console.log('捕获到异常:', e);
});
new Promise((resolve,reject) => {
  reject("执行失败!")
})

捕获到异常

添加  event.preventDefault(); 可以去掉控制台的异常显示信息。

5、vue errorHandler

我们可以使用 errorHandler 对 vue 组件中所抛错误的捕捉与处理。

Vue.config.errorHandler = (err, vm, info) => {
  console.error(err);
  console.error(vm);
  console.error(info);
}

// 某个组件的 mounted
const error = new Error('test error');
error.code = -1;
throw error;

捕获到异常

6、 react 异常捕获

React 16 提供了一个内置函数 componentDidCatch,使用它可以非常简单的获取到 react 下的错误信息。

componentDidCatch(error, info) {
  console.log(error, info);
}

除此之外,也可以使用错误边界 error boundary,此处不展开。

7、跨域

资源跨域可以为 script 标签添加 crossOrigin 属性。

<script src="http://localhost:3000/main.js" crossorigin></script>

也可以动态添加 JavaScript 脚本

const script = document.createElement('script');
script.crossOrigin = 'anonymous';
script.src = url;
document.body.appendChild(script);

四、总结

处理异常方式 说明
try-catch 可预见、可疑区域
window.onerror 全局捕获 JavaScript 异常
window.addEventListener 全局捕获静态资源异常
Promise catch 捕获 Promise 异常,也可使用 unhandledrejection 进行全局捕获
vue errorHandler 捕获 vue 异常
react 异常捕获 捕获 react 异常
crossOrigin 解决 JavaScript 脚本跨域

到此这篇关于优雅处理前端异常的几种方式文章就介绍到这了,更多相关优雅处理前端异常内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

参考:如何优雅处理前端异常? - Jartto's blog

(0)

相关推荐

  • 详解js前端代码异常监控

    阅读目录 什么是前端代码异常 window.onerror 写一个js报错的上报库 注意点: 缺点: 在平时的工作,js报错是比较常见的一个情景,尤其是有一些错误可能我们在本地测试的时候测试不出来,当发布到线上之后才可以发现,如果抢救及时,那还好,假如很晚才发 现,那就可能造成很大的损失了.如果我们前端可以监控到这种报错,并及时上报的话,那我们的问题就比较好解决了.所以我们今天来聊聊前端代码的异常监控 什么是前端代码异常  一般语法错误以及运行时错误,浏览器都会在console里边体现出错误信息

  • 前端异常502 bad gateway的原因和解决办法

     502 Bad Gateway服务器作为网关或者代理时,为了完成请求访问下一个服务器,但该服务器返回了非法的应答. 解决办法是:再刷新一下网页或清理一下电脑的缓冲文件在打开你想打开的网页就好了. 一般情况下,这种办法是行得通的,但也不排除你所访问的网页被屏蔽的可能,如果你所访问的网页被屏蔽的话,就不管你怎么刷新也是没用的了. 502 bad gateway报错形成 1.什么是502 bad gateway 报错 简单来说502是报错类型代码bad gateway错误的网关 2.产生502错误的

  • 优雅处理前端异常的几种方式推荐

    目录 一.为什么要处理异常? 二.需要处理哪些异常? 三.处理异常的方式有哪些? 1.try-catch 2.window.onerror 3.window.addEventListener 4.Promise catch 5.vue errorHandler 6. react 异常捕获 7.跨域 四.总结 一.为什么要处理异常? 1.未雨绸缪,尽早发现问题 2.让异常变得可控,避免影响呈现结果 3.增强用户体验 4.完善的前端方案 二.需要处理哪些异常? 1.JavaScript 语法错误.代

  • 浅谈RxJava处理业务异常的几种方式

    本文介绍了RxJava处理业务异常的几种方式,分享给大家.具体如下: 关于异常 Java的异常可以分为两种:运行时异常和检查性异常. 运行时异常: RuntimeException类及其子类都被称为运行时异常,这种异常的特点是Java编译器不去检查它,也就是说,当程序中可能出现这类异常时,即使没有用try...catch语句捕获它,也没有用throws字句声明抛出它,还是会编译通过. 检查性异常: 除了RuntimeException及其子类以外,其他的Exception类及其子类都属于检查性异

  • 阿里nacos+springboot+dubbo2.7.3统一处理异常的两种方式

    目录 1.为什么要抛异常? 2.给出解决方案 3.两种抛异常的实例解说 dubbo工程搭建 在网上很多关于dubbo异常统一处理的博文,90%都是抄来抄去.大多都是先上一段dubbo中对于异常的统一处理的原码,然后说一堆的(甚至有12345,五种)不靠谱方案,最后再说“本篇使用的是方案4”,然后再对所谓的方案4写了一段文字,最后还说不清!!! 本篇解决方案不会那么罗里吧嗦也不会贴dubbo源码来凑字数,我就直接从刚结束不久的双11保卫战性能全链路优化中我们的面对10万级别TPS的方案中提取的代码

  • 前端js文件合并的三种方式推荐

    最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页面大文件,各自页面合并生成自己所需js的大文件. 3. 合并多个共用大文件,根据实践情况合并出多个共用js文件,每个页面引用多个共用大文件. 另外在我看来,合并有两个目的: 1. 为了减少请求数. 2. 代码安全考虑(文件分得越多,越容易被人看清). PS:注意我说的不是压缩混淆,只是合并 1. 一

  • springboot处理异常的5种方式

    目录 1.自定义错误页面 2.@ExceptionHandle 注解处理异常 3.@ControllerAdvice+@ExceptionHandler 注解处理异常 4.配置 SimpleMappingExceptionResolver 处理异常 5.自定义 HandlerExceptionResolver 类处理异常 通用异常处理: 1.自定义异常枚举类 2.自定义异常类 3.自定义异常结果处理类 4.全局异常处理 程序的异常:Throwable 严重错误问题:Error     我们不处理

  • 深入剖析构建JSON字符串的三种方式(推荐)

    前言:JSON 是轻量级的数据交换格式,很常用,尤其是在使用 Ajax 时,在后台将数据封装为 JSON 字符串更是常见.之前在做项目的时候用过几种方式在后端将数组或 List 集合转换为 JSON 字符串,现在回想起来竟然又有些遗忘.现在来一个汇总,把这几种构建 JSON 字符串的方式彻底回忆起来. 笔记中提供了大量的代码示例,需要说明的是,大部分代码示例都是本人所敲代码并进行测试,不足之处,请大家指正~ 一.alibaba 的 Fastjson 1.Fastjson 是一个以 Java 语言

  • mvc中form表单提交的三种方式(推荐)

    第一种方式:submit 按钮 提交 <form action="MyDemand" method="post"> <span>关键字:</span> <input name="keywords" type="text" value="@keywords" /> <input type="submit" value="搜索&

  • 详述JavaScript实现继承的几种方式(推荐)

    ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的. 原型链 原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.每一个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的指针.如果:我们让原型对象A等于另一个类型B的实例,那么原型对象A就会有一个指针指向B的原型对象,相应的B的原型对象中保存着指向其构造函数的指针.假如B的原型对象又是另一个类型的实例,那么上述的关系依旧成立,如此层层递进,就构成了实例与原型的

  • 浅谈python和C语言混编的几种方式(推荐)

    Python这些年风头一直很盛,占据了很多领域的位置,Web.大数据.人工智能.运维均有它的身影,甚至图形界面做的也很顺,乃至full-stack这个词语刚出来的时候,似乎就是为了描述它. Python虽有GIL的问题导致多线程无法充分利用多核,但后来的multiprocess可以从多进程的角度来利用多核,甚至affinity可以绑定具体的CPU核,这个问题也算得到解决.虽基本为全栈语言,但有的时候为了效率,可能还是会去考虑和C语言混编.混编是计算机里一个不可回避的话题,涉及的东西很多,技术.架

  • Android实现关机与重启的几种方式(推荐)

    下面我们来探究Android如何实现关机,重启:在Android中这种操作往往需要管理员级别,或者root Android实现的方式如下几种: 默认的SDK并没有提供应用开发者直接的Android系统关机或重启的API接口,一般来讲,实现Android系统的关机或重启,需要较高的权限(系统权限甚至Root权限).所以,在一般的APP中,如果想要实现关机或重启功能,要么是在App中声明系统权限,要么是通过某种"间接"的方式,比如广播或反射,来间接实现系统关机或重启.再者,就是放在源码环境

随机推荐