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

Souleigh ✨ 等级 1080 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"); 
收藏
评论区

相关推荐

阿里二面,面试官居然把 TCP 三次握手问的这么细致
TCP 的三次握手和四次挥手,可以说是老生常谈的经典问题了,通常也作为各大公司常见的面试考题,具有一定的水平区分度。看似是简单的面试问题,如果你的回答不符合面试官期待的水准,有可能就直接凉凉了。本文会围绕,三次握手和四次挥手相关的一些列核心问题,分享如何更准确的回答和应对常见的面试问题,以后面对再刁钻的面试官,你都可以随意地跟他扯皮了。 面试TCP的意义
人工智能数学基础-线性代数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集群的主从复制模型是怎样的?为了是在部分节点失败或者大部分节点无法通信的情
c++类和继承面试点25连问
本篇文章连问面试时经常会遇到的类和继承相关25个问题,看看你能回答出几道题呀。还是先看一下思维导图,如下: 1. c++的三大特性是什么c++的三大特性,说白了其实就是面向对象的三大特性,是指:封装、继承、多态,简单说明如下: 封装是一种技术,它使类的定义和实现分离,也就是隐藏了实现细节,只留下接口给他人调用,另外封装还有一层意义是它把某种事物具现出属性和方
JAVA回调机制(CallBack)之小红是怎样买到房子的??
JAVA回调机制CallBack 序言最近学习java,接触到了回调机制(CallBack)。初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义。当然了,我在理解了回调之后,再去看网上的各种讲解,确实没什么问题。但是,对于初学的我来说,缺了一个循序渐进的过程。此处,将我对回调机制的个人理解,按
java的linux执行的shell
#!/bin/sh   #该脚本为Linux下启动java程序的通用脚本。即可以作为开机自启动service脚本被调用,   #也可以作为启动java程序的独立脚本来使用。   #   #   #警告!!!:该脚本stop部分使用系统kill命令来强制终止指定的java程序进程。   #在杀死进程前,未
Android中的Selector的用法
Android中的Selector主要是用来改变ListView和Button控件的默认背景。其使用方法可以按一下步骤来设计: (以在mylist\_view.xml为例) 1.创建mylist\_view.xml文件 首先在res目录下新建drawable文件夹,再在新建的drawable文件夹中新建mylist\_view.xml,
Android的Surface的创建
`ViewRootImpl`管理着整个view tree。 对于`ViewRootImpl.setView()`,我们可以简单的把它当做一个`UI渲染操作`的入口。 [http://androidxref.com/6.0.1\_r10/xref/frameworks/base/core/java/android/view/WindowManagerImpl
Django中的session的使用
一、Session 的概念 ============= * cookie 是在浏览器端保存键值对数据,而 session 是在服务器端保存键值对数据 * session 的使用依赖 cookie:在使用 Session 后,会在 Cookie 中存储一个 sessionid 的数据,每次请求时浏览器都会将这个数据发给服务器,服务器在接收到 sess
Mybatis中的jdbcType的作用
[Mybatis中的jdbcType的作用](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.cnblogs.com%2Fpanxuejun%2Fp%2F6163779.html) ====================================================
PHP的cookie与Javascript的cookie的关系
PHP 读写cookie的语句: setcookie("user", "Lilu", time()+3600); echo $_COOKIE["user"]; javascript读写cookie代码: function SetCookie(name,value)//两个参数,一个是cookie的名子,一
Servlet的Filter的使用
    Filter可认为是Servlet的“加强版”,主要用于对用户请求进行预处理,也可以对HttpServletResponse进行后处理,是个典型的处理链。Filter也可以对用户请求生成相应,这一点与Servlet相同,但实际上很少会这样使用。使用Filter的完整流程是:Filter对用户的请求进行预处理,接着将请求交给Servlet进行处理并响应
Spring的AOP的注解的通知类型,切入点的注解
Spring的注解的AOP的通知类型 * **@Before:前置通知** * **@AfterReturning:后置通知** * **@Around:环绕通知** * **@AfterThrowing:异常抛出通知** * **@After:最终通知** * **@Pointcut:切入点的注解** 1 /**
springboot的整合springMvc中的postman的post中的form
package com.example.demomap.Controller; import com.example.demomap.pojo.ParaEntity; import org.springframework.stereotype.Controller; import org.springframewor