前端 - 常见的异常捕获方法

Souleigh ✨ 等级 848 0 0

前端异常捕获

在ES3之前js代码执行的过程中,一旦出现错误,整个js代码都会停止执行,这样就显的代码非常的不健壮。从ES3开始,js也提供了类似的异常处理机制,从而让js代码变的更健壮,程序执行的过程中出现了异常,也可以让程序具有了一部分的异常恢复能力。js异常的特点是,出现不会导致JS引擎崩溃,最多只会终止当前执行的任务。

回归正题,我们该如何在程序异常发生时捕捉并进行对应的处理呢?在Javascript中,我们通常有以下两种异常捕获机制。

基本的try…catch语句

 function errFunc() {
      // eslint-disable-next-line no-undef
      error;
  }

  function catchError() {
      try {
          this.errFunc();
      } catch (error) {
          console.log(error);
      }
  }
  catchError() 

能捕捉到的异常,必须是线程执行已经进入 try catch 但 try catch 未执行完的时候抛出来的,以下都是无法被捕获到的情形。

  1. 异步任务抛出的异常(执行时try catch已经从执行完了)
  2. promise(异常内部捕获到了,并未往上抛异常,使用catch处理)
  3. 语法错误(代码运行前,在编译时就检查出来了的错误)
  • 优点:能够较好地进行异常捕获,不至于使得页面由于一处错误挂掉
  • 缺点:显得过于臃肿,大多代码使用try ... catch包裹,影响代码可读性。

全局异常监听window.onerror

window.onerror 最大的好处就是同步任务、异步任务都可捕获,可以得到具体的异常信息、异常文件的URL、异常的行号与列号及异常的堆栈信息,再捕获异常后,统一上报至我们的日志服务器,而且可以全局监听,代码看起来也简洁很多。

  • 缺点:
  1. 此方法有一定的浏览器兼容性
  2. 跨域脚本无法准确捕获异常,跨域之后window.onerror捕获不到正确的异常信息,而是统一返回一个Script error,可通过在<script>使用crossorigin属性来规避这个问题

前端 - 常见的异常捕获方法

window.addEventListener('error', function() {
  console.log(error);
  // ...
  // 异常上报
});
throw new Error('这是一个错误'); 

Promise内部异常

前文已经提到,onerror 以及 try-catch 也无法捕获Promise实例抛出的异常,只能最后在 catch 函数上处理,但是代码写多了就容易糊涂,忘记写 catch。

如果你的应用用到很多的 Promise 实例的话,特别是在一些基于 promise 的异步库比如 axios 等一定要小心,因为你不知道什么时候这些异步请求会抛出异常而你并没有处理它,所以最好添加一个 Promise 全局异常捕获事件 unhandledrejection

window.addEventListener("unhandledrejection", e => {
 console.log('unhandledrejection',e)
}); 

vue工程异常

window.onerror并不能捕获.vue文件发生的获取,Vue 2.2.0以上的版本中增加了一个errorHandle,使用Vue.config.errorHandler这样的Vue全局配置,可以在Vue指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时,可获取错误信息和Vue 实例。

//main.js
import { createApp } from "vue";
import App from "./App.vue";

let app = createApp(App);
app.config.errorHandler = function(e) {
  console.log(e);
  //错误上报...
};
app.mount("#app"); 
收藏
评论区

相关推荐

python的requests模块的使用
前言: 在web后台开发过程中,会遇到需要向第三方发送http请求的场景,python中的requests库可以很好的满足这一要求,这里简要记录一下requests模块的使用! 说明: 这里主要记录一下requests模块的如下几点: 1.requests模块的安装 2.requests模块发送get请求 3.requests模块
HTTP 的本质?HTTP 和 RPC 的区别?
身为 Java Web 开发我发现很多人一些 Web 基础问题都答不上来。 上周我面试了一个三年经验的小伙子,一开始我问他 HTTP/1、HTTP/2相关的他到是能答点东西出来。 后来我问他:你怎么理解 HTTP 的,HTTP 的作用是什么? 他支支吾吾答不出来。 经过了一番引导交谈,他回答是用来客户端和服务端之间传输的。 我接着问那你知道什么是
一个免费的开源的html转markdown语法的工具
一个免费的开源的html转markdown语法的工具 大家好,我是待兔,今天为大家分享一个由 www.helloworld.net 网站开发并开源的一个非常好用的工具 html2md 现在好的技术文章确实多,每天各种技术群里,各种技术社区,有很多质量非常好的技术文章,于是我们就收藏了,可是问题来了,我们收藏到哪呢? 怎么收藏呢? 1. 微信群里发的文
helloworld.net 的总结以及2021年的期待
没有反思的人生不值得过!由时不时向外张望,彻底转向向内审视的一年。 2020年,公历闰年,共366天,52周零2天。二十一世纪二十年代的第1年。 大家好,我是待兔, helloworld.net也就是 helloworld开发者社区的创始人之一,由于前几天感冒了,你知道的,这个时间感冒是有点麻烦的,所以导致这篇文章来的稍晚了点,好饭不怕晚,晚点写有晚点写
JS - ES6 的 Module
一、介绍 模块,(Module),是能够单独命名并独立地完成一定功能的程序语句的集合(即程序代码和数据结构的集合体)。 两个基本的特征:外部特征和内部特征 外部特征是指模块跟外部环境联系的接口(即其他模块或程序调用该模块的方式,包括有输入输出参数、引用的全局变量)和模块的功能 内部特征是指模块的内部环境具有的特点(即该模
python中的split()函数的用法
函数:split() Python中有split()和os.path.split()两个函数,具体作用如下: split():拆分字符串。通过指定分隔符对字符串进行切片,并返回分割后的字符串列表(list) os.path.split():按照路径将文件名和路径分割开 一、函数说明 1、split()函数 语法:str.split(str
阿里二面,面试官居然把 TCP 三次握手问的这么细致
TCP 的三次握手和四次挥手,可以说是老生常谈的经典问题了,通常也作为各大公司常见的面试考题,具有一定的水平区分度。看似是简单的面试问题,如果你的回答不符合面试官期待的水准,有可能就直接凉凉了。本文会围绕,三次握手和四次挥手相关的一些列核心问题,分享如何更准确的回答和应对常见的面试问题,以后面对再刁钻的面试官,你都可以随意地跟他扯皮了。 面试TCP的意义
Java练习(三)——返回集合中的最大的和最小的元素
题目:在一个列表中存储以下元素:apple,grape,banana,pear,现要求将集合进行排序,返回集合中的最大的和最小的元素,并将排序后的结果打印在控制台上,要求的打印输出方法分别为默认toString输出、迭代器输出、for循环遍历输出和增强for循环输出。 package test;import java.util.;public class P
人工智能数学基础-线性代数1:向量的定义及向量加减法
一、向量 1.1、向量定义向量也称为欧几里得向量、几何向量、矢量,指具有大小(magnitude)和方向的量。它可以形象化地表示为带箭头的线段。箭头所指:代表向量的方向;线段长度:代表向量的大小。与向量对应的量叫做数量(物理学中称标量),数量(或标量)只有大小,没有方向。1. 在物理学和工程学中,几何向量更常被称为矢量。 2. 一般印刷用黑体的小写
人工智能数学基础-线性代数4:矩阵及矩阵运算
一、矩阵定义矩阵(Matrix)是一个按照长方阵列排列的复数或实数集合,定义如下: 由 m × n 个数aij排成的m行n列的数表称为m行n列的矩阵,简称m × n矩阵。记作: 这m×n 个数称为矩阵A的元素,简称为元,数aij位于矩阵A的第i行第j列,称为矩阵A的(i,j)元,以数 aij为(i,j)元的矩阵可记为(aij)或(aij)m × n,m×
凉凉!面试阿里我被Redis技术专题给搞的昏倒在地~
凉凉!面试阿里我被Redis技术专题给弄死了📚我本以为我可以像是别的博主一样去阿里面试随随便便,因为Redis,我直接被阿里大佬淦翻在地上好了不装了 没过没关系 我总结了一些这些最难的知识点!!!!然后自己总结归类再去百度查询了一些 最终得出这份Redis技术专题 题目开淦 Redis集群的主从复制模型是怎样的?为了是在部分节点失败或者大部分节点无法通信的情
python的学习难?你的方法不对罢了,看看我的。
1、选择Python版本对于使用python的人来说,python的版本就是我们的工作环境,因此,在学习之前需要考虑好学习哪个版本,python2和python3的版本不同,会存在一些差异,虽说不大,但直接学习python3 的话相对来说会好一点,而且跑一趟还能3相对来说对零基础的小白来说更加的友好,容易上手。2、学习Python基础知识Python 是一个
c++类和继承面试点25连问
本篇文章连问面试时经常会遇到的类和继承相关25个问题,看看你能回答出几道题呀。还是先看一下思维导图,如下: 1. c++的三大特性是什么c++的三大特性,说白了其实就是面向对象的三大特性,是指:封装、继承、多态,简单说明如下: 封装是一种技术,它使类的定义和实现分离,也就是隐藏了实现细节,只留下接口给他人调用,另外封装还有一层意义是它把某种事物具现出属性和方
浅析常用的Python Web的几大框架
在各种语言平台中,python涌现的web框架恐怕是最多的,是一个百花齐放的世界,各种microframework、framework不可胜数;猜想原因应该是在python中构造框架十分简单,使得轮子不断被发明。所 以在Python社区总有关于Python框架孰优孰劣的话题。下面就给大家介绍一下python的几大框架: Django Django 应该是最出
JAVA回调机制(CallBack)之小红是怎样买到房子的??
JAVA回调机制CallBack 序言最近学习java,接触到了回调机制(CallBack)。初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义。当然了,我在理解了回调之后,再去看网上的各种讲解,确实没什么问题。但是,对于初学的我来说,缺了一个循序渐进的过程。此处,将我对回调机制的个人理解,按