前端错误处理与调试

**

javascript错误处理

**
由于javascript本身是动态语言,而且没有固定的开发工具,因此他普遍认为是最难以调试的语言,在ECMAScript3新增了try-catch和throw以及一些错误类型,让开发人员能适当的处理错误,紧接着web浏览器也出现了一些javascript的调试程序和工具

错误类型:
执行代码期间可能会发生的错误类型有多种,每种错误都有对应的错误类型,如下

  1. Error 普通错误类型
  2. EvalError 类型的错误一般使用了eval函数而发生的异常
  3. RangeError 类型的错误一般在数值超出相应的范围时触发
  4. ReferenceError 这种比较常见 访问的变量不存在
  5. SyntaxError 这种一般很少见
  6. TypeError 一般是保存变量存在其他的类型
  7. URLError 在使用encodeURL或decodeURL函数时,url格式不正确会报这个URLError错误

处理错误
我们在项目中最常见的就是使用try-catch来处理

try{.  
// 一般是我们的逻辑代码,可能会导致错误的代码}catch{
// 在错误发生时会在这里进行处理
}// 注意catch后面还有一个finally子句 
function testFinally(){try{return 3}catch{. return 2}finally{reutrn 1}
}
// finally子句他的机制是不管try或catch执不执行,最后finally都会去执行 所以这段代码// 最后返回的结果是 1 而不是 2 

抛出错误
与tru-catch语句相配合的又一个throw操作符,用于随时抛出自定义错误,抛出错误时,必须要赋值,至于这个值是什么类,是不做要求的。在执行throw操作符时,代码会立即停止执行,仅当有try-catch语句捕获到被抛出的值时,才会继续执行

throw 1234
throw [1,2,3,4]
throw true
....

一般情况下可以通过某种内置错误模拟浏览器的错误,每种错误类型只需要接受一个参数

throw new Error('something bad happend')
throw new TypeError('what type of variable do you take me for ?')
...

还可以创建一个自定义错误类型

function CustomerError(message){this.name = 'CustomError'this.message = message
}
CustomerError.prototype = new Error() 
throw new CustomerError ('my message')

错误事件

任何没有通过tru-catch处理的错误都会触发window对象的error事件,而且这事件对于chrome firefox IE 都是支持的。具体方法如下:

// onerror接受三个参数 错误消息  错误所在的url  某个文本第多少行发生的错误,对于我们现在通过vue 或react框架大包之后我们一般只有message这个参数对我们开发人员有人,其他的可能意义不大,这里提一下如果要定位到线上具体的文件的错误可以使用sourceMap来定位,这里就不多废话了。
window.onerror = function (message,url,line){console.log(message)
}

注意常见的错误类型
1.数据转换错误
我们使用的非常多的 == 和 != 还有 === 等这些需要在开发的过程中注意

5 == ‘5’  // true 
5 === ‘5’ // false 
1 == true //  true 
1 === true // false
...// 这个看似没有问题,但是一旦出入的不是数字,可能程序就直接挂了
function concat (str1,str2,str3){let result = str1 + str2if(str3){result += str3}return result 
}再比如数据类型的错误:
function resverseSort(values){if(values){  // 这是只要有值过来就过了 values.sort()}if(values != null) { // 不靠谱 values.sort()} if(typeof value.sort == 'function') { // 不靠谱 values.sort()} if(values instanceof Array) { // 这种是比较稳妥的 values.sort()} 
}// 通信错误
一般是在与后端对接的时候URL的格式不正确或者发送的数据有问题造成的。
对于URL地址,没有使用encodeURLComponent()造成的问题 
可以写一个简单的函数 function addQueryStringArg(url,name,value){if(url.indexOf("?") == -1){url+= "?"}else{url += "&"}url += encodeURLComponent(name) + '=' + encodeURLComponent(value)
}
const url = 'http://www.some.com'
let newUrl = addQueryStringArg(url,'redir','http://www.something.com?a=1&b=2')

把错误记录到服务器

要记录js的错误记录系统,先要在服务器上创建一个页面,或者一个服务入口,再来处理错误数据

这个所有浏览器都支持,且能够跨域,可以处理多台服务器的记录。

function logError(sev,msg){var img = new Image()img.src = "log.php?sev=" + encodeURLComponent(sev) + "&msg="+ encodeURLComponent(msg)
}一般如果想要记录,只要出现try-catch的语句可以在catch里面调用这个方法 
try{
}catch(err){
logError('nonfatal' , '某某错误失败:'+ err.message)
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/165014.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

多tab页表单校验如何做

多tab页表单校验如何做 在多tab页表单中进行校验,可以按照以下步骤进行: 创建一个表单对象,用于存储表单数据和校验规则。 分为多个tab页,每个tab页对应一个表单页面。 定义每个tab页中的表单字段及其相应的校验规则。 在切换…

PHP 赋值、算数和比较运算符 学习资料

PHP 赋值、算数和比较运算符 在 PHP 中,赋值、算数和比较运算符用于对变量进行赋值、进行数学运算和比较操作。以下是对这些运算符的介绍和示例: 赋值运算符 赋值运算符用于给变量赋值。常用的赋值运算符有 、、-、*、/ 等。 示例: $a …

芯能转债上市价格预测

芯能转债-113679 基本信息 转债名称:芯能转债,评级:AA-,发行规模:8.8亿元。 正股名称:芯能科技,今日收盘价:12.63元,转股价格:13.1元。 当前转股价值 转债面…

基于遗传优化的多属性判决5G-Wifi网络切换算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022a 3.部分核心程序 .......................................................................... %接收功率、网…

数字孪生智慧校园 Web 3D 可视化监测

当今,智慧校园发展阶段亟需推动信息可视化建设与发展,将大数据、云计算、可视化等高新技术相融合,为校园师生创造科学智能的学习环境,并实现教学资源最大化和信息服务智能化。帮助学校更好地应用校园可视化技术,提升校…

原型模式 (Prototype Pattern)

定义: 原型模式(Prototype Pattern)是一种创建型设计模式,它用于创建重复的对象,同时保持性能。这种模式的核心思想是通过复制一个已存在的实例来创建新的实例,而不是新建实例并对其进行初始化。原型模式适…

jetson xavier NX深度学习环境配置

文章目录 jetson xavier NX深度学习环境配置1. SD卡系统烧录1.1 材料1.2 软件配置1.3 格式化SD卡1.4 系统镜像烧录 2. 环境配置2.1 cuda环境配置2.2 安装依赖库2.3 安装python及依赖环境2.4 安装pytorch环境 jetson xavier NX深度学习环境配置 1. SD卡系统烧录 1.1 材料 SD …

面试题 —— 前端精选(1)

文章目录 前言 阐述 JS 的事件循环 JS 中的计时器能做到精确计时吗?为什么? 如何理解 JS 的异步? 前言 本文章介绍三道围绕 JavaScript 的精选面试题 阐述 JS 的事件循环 事件循环⼜叫做消息循环,是浏览器渲染主线程的⼯作⽅式…

CentOS虚拟机重置账号密码

虚拟机忘记密码了 一般来说,虚拟机的账号密码,工作中都会有文档记录,如果忘记了可以查看文档。但是也有特例,虚拟机的密码没有记录到文档中,尝试了很多次依然登录失败,这时候就只能重置账号密码了。 1.重…

upload-labs关卡13(基于白名单的0x00截断绕过)通关思路

文章目录 前言一、回顾上一关知识点二、靶场第十三关通关思路1、看源代码2、bp进行0x00截断绕过3、蚁剑连接 总结 前言 此文章只用于学习和反思巩固文件上传漏洞知识,禁止用于做非法攻击。注意靶场是可以练习的平台,不能随意去尚未授权的网站做渗透测试…

nginx中proxy_pass的配置

Nginx的官网将proxy_pass分为两种类型: 不带URI方式:只包含IP和端口号的,不带uri(单个/也算uri),比如proxy_pass http://localhost:8080;带URI方式:在端口号之后有其他路径的&#…

思维模型 潘多拉效应

本系列文章 主要是 分享 思维模型 ,涉及各个领域,重在提升认知。越是禁止,越是好奇。 1 潘多拉效应的应用 1.1 潘多拉效应在管理中的应用 通用电气公司曾经推出了一项名为“六西格玛”的管理方法,该方法旨在通过优化业务流程和提…

Linux终端和命令行

文章目录 学习Linux终端和命令行一、常用Linux命令的基本使用(一)放大/缩小终端窗口的字体显示(二)自动补全 二、软件安装三、文件和目录常用命令(一)ls:查看目录内容1.ls命令说明2.Linux下文件…

Peter算法小课堂—前缀和数组的应用

桶 相当于计数排序&#xff0c;看一个视频 桶排序 太戈编程1620题 算法解析 #include <bits/stdc.h> using namespace std; const int R11; int cnt[R];//cnt[t]代表第t天新增几人 int s[R];//s[]数组是cnt[]数组的前缀和数组 int n,t; int main(){cin>>n;for(…

flutter 输入框组件 高度问题

使用的组件名字为 TestField 组件 TestField 配置 占位文字 设置 decoration 属性 InputDecoration 中hintText去掉输入到 输入框的间距 InputDecoration 中contentPadding EdgeInsets.zero去掉边框中的间距 InputDecoration 中 使用 isDense:true设置输入框内文字的颜色 …

Android 11.0 SystemUI 去掉状态栏wifi流量上下行图标功能实现

1.概述 在11.0系统定制rom开发中,在关于systemui的定制功能总,在SystemUI 状态栏上显示时钟,电池电量 wifi图标,在显示wifi图标时,网络实时更新时,但是会时不时显示上下行图标 显得很不美观,客户需求要求不显示上下行图标,所以需要去掉上下行图标功能,接下来实现相关功能…

MATLAB算法实战应用案例精讲-【图像处理】计算机视觉(基础篇)(二)

目录 知识储备 opencv基础知识 01 什么OpenCV 02 如何部署OpenCV? 03 OpenCV模块简介 04 OpenCV基本数据结构

Shell循环:for(一)

语法结构&#xff1a; for 变量名 [ in 取值列表] do 循环体 done 示例1&#xff1a; 1、需求&#xff1a;自动循环创建10个用户 2、演示&#xff1a; [rootlocalhost ~]# vim for.sh #脚本编写 #!/bin/bash for i in {1..10} do useradd "user$…

Linux进程通信之共享内存

文章目录 共享内存原理申请共享内存函数&#xff08;shmget&#xff09;参数key生成key值示例申请共享内存 挂接到进程地址空间函数(shmat)去关联函数(shmdt)控制共享内存(shmctl)IPC_STATIPC_RMID ipcs其余进程获取该共享内存进程间通信 进程间通信&#xff1a;IPC&#xff0c…

在openSUSE-Leap-15.5-DVD-x86_64中使用deepin-wine-6.0.0.19再使用金山打字通2016

在openSUSE-Leap-15.5-DVD-x86_64中使用deepin-wine-6.0.0.19再使用金山打字通2016 在openSUSE Software官网输入关键字deepin-wine搜索得到fedora-deepin-wine6的作者是xuthus5 https://software.opensuse.org/package/fedora-deepin-wine6 在百度贴吧fedora吧的《fedora下的…