【JavaScript】错误处理与调试
个人主页:Guiat
归属专栏:HTML CSS JavaScript
文章目录
- 1. JavaScript 错误处理基础
- 1.1 错误类型
- 1.2 try...catch 语句
- 2. 错误抛出与自定义错误
- 2.1 throw 语句
- 2.2 自定义错误类型
- 3. 异步错误处理
- 3.1 Promise 错误处理
- 3.2 async/await 错误处理
- 4. 调试技术
- 4.1 控制台调试
- 4.2 断点调试
- 5. 常见错误模式与最佳实践
- 5.1 常见错误类型分析
- 5.2 错误处理最佳实践
- 6. 生产环境错误监控
- 6.1 全局错误处理
- 6.2 错误监控工具
正文
1. JavaScript 错误处理基础
JavaScript 错误处理是编写健壮代码的关键环节,可以避免程序崩溃并提供良好的用户体验。
1.1 错误类型
JavaScript 中存在多种错误类型,常见的包括:
- SyntaxError:语法错误
- ReferenceError:引用未声明的变量
- TypeError:对值执行不适当的操作
- RangeError:数值超出有效范围
- URIError:URI 处理函数使用不当
- EvalError:eval() 函数使用不当
1.2 try…catch 语句
最基本的错误处理机制是使用 try…catch 语句捕获异常。
try {// 可能会抛出错误的代码const result = riskyFunction();console.log(result);
} catch (error) {// 处理错误console.error("发生错误:", error.message);
} finally {// 无论是否有错误都会执行的代码console.log("处理完成");
}
2. 错误抛出与自定义错误
2.1 throw 语句
使用 throw 语句可以主动抛出错误:
function divide(a, b) {if (b === 0) {throw new Error("除数不能为零");}return a / b;
}
2.2 自定义错误类型
通过继承 Error 类可以创建自定义错误类型:
class ValidationError extends Error {constructor(message) {super(message);this.name = "ValidationError";}
}function validateUser(user) {if (!user.name) {throw new ValidationError("用户名不能为空");}
}
3. 异步错误处理
3.1 Promise 错误处理
Promise 提供了 .catch() 方法处理异步操作中的错误:
fetchData().then(data => {// 处理数据processData(data);}).catch(error => {// 处理错误console.error("获取数据失败:", error);});
3.2 async/await 错误处理
在 async/await 中使用 try…catch 处理异步错误:
async function fetchUserData() {try {const response = await fetch('/api/user');if (!response.ok) {throw new Error('API 请求失败');}const userData = await response.json();return userData;} catch (error) {console.error("获取用户数据失败:", error);// 可以返回默认值或重新抛出错误return { error: true };}
}
4. 调试技术
4.1 控制台调试
JavaScript 提供了多种控制台方法用于调试:
console.log("普通信息");
console.info("提示信息");
console.warn("警告信息");
console.error("错误信息");
console.table([{name: "张三", age: 25}, {name: "李四", age: 30}]); // 表格形式显示数据
console.time("操作计时");
// 执行某些操作
console.timeEnd("操作计时"); // 显示操作耗时
4.2 断点调试
浏览器开发工具中的断点功能是强大的调试工具:
- 源代码断点:在开发工具的源码面板中设置
- 代码断点:在代码中使用
debugger
语句 - 条件断点:仅在特定条件满足时暂停执行
function processItems(items) {for (let i = 0; i < items.length; i++) {// 当 i 等于 5 时触发断点if (i === 5) {debugger;}processItem(items[i]);}
}
5. 常见错误模式与最佳实践
5.1 常见错误类型分析
错误类型 | 常见原因 | 解决方案 |
---|---|---|
TypeError | 对值执行不适当的操作 | 在操作前检查值的类型 |
ReferenceError | 引用未声明的变量 | 确保变量在使用前已声明 |
SyntaxError | 代码语法错误 | 使用 ESLint 等工具检查代码 |
Promise rejection | 未处理的 Promise 拒绝 | 始终为 Promise 添加 catch 处理 |
5.2 错误处理最佳实践
- 只捕获你能处理的错误
- 提供有意义的错误信息
- 记录错误以便后续分析
- 在适当的抽象层次处理错误
- 回退策略:提供合理的默认值
function getUserData(userId) {try {return fetchUserFromAPI(userId);} catch (error) {// 记录错误logError(error);// 提供回退策略return getLocalUserCache(userId) || getDefaultUserProfile();}
}
6. 生产环境错误监控
6.1 全局错误处理
在生产环境中设置全局错误处理程序:
// 处理未捕获的错误
window.onerror = function(message, source, lineno, colno, error) {// 发送错误到服务器sendErrorToServer({message,source,lineno,colno,stack: error && error.stack});// 返回 true 表示已处理错误return true;
};// 处理未处理的 Promise 拒绝
window.addEventListener('unhandledrejection', function(event) {console.error('未处理的 Promise 拒绝:', event.reason);// 发送到服务器sendErrorToServer({type: 'unhandledrejection',reason: event.reason});
});
6.2 错误监控工具
现代前端开发中常用的错误监控工具包括:
- Sentry
- LogRocket
- TrackJS
- New Relic
这些工具可以提供详细的错误报告、用户会话重现和性能监控等功能。
结语
感谢您的阅读!期待您的一键三连!欢迎指正!
相关文章:
【JavaScript】错误处理与调试
个人主页:Guiat 归属专栏:HTML CSS JavaScript 文章目录 1. JavaScript 错误处理基础1.1 错误类型1.2 try...catch 语句 2. 错误抛出与自定义错误2.1 throw 语句2.2 自定义错误类型 3. 异步错误处理3.1 Promise 错误处理3.2 async/await 错误处理 4. 调试…...
MySQL 管理与配置:查看端口、修改密码与数据存储位置
1.MySQL查看端口号 show global variables like port; 2.MySQL修改密码 grant all privileges on *.* to root% identified by 你的mysql密码 with grant option;flush privileges; 3.查询 MySQL 数据库的数据存储目录 MySQL 的所有数据库文件、表数据、索引、日志文件等都存…...
(四十二)Dart 中的接口与抽象类
Dart 中的接口与抽象类 Dart 的接口特性 在 Dart 中,接口的实现方式与 Java 有所不同。Dart 没有专门的 interface 关键字来定义接口,而是通过普通类或抽象类来实现接口的功能。以下是 Dart 接口的主要特点: 普通类或抽象类都可以作为接口 …...
Java习题:合并两个有序数组
文章目录 前言一、题目描述二、方法2.1 方法一2.2 方法二 前言 虽然这个题目很简单,但是在使用java语言实现的过程中,存在多种方法这是很有意思的一道题,所以小编在这里写下它的各种方法加深javase语法的学习。 提示:以下是本篇文…...
spm12_fMRI 2*4混合方差分析 Flexible factorial 对比矩阵
实验设计:2*4被试内设计 分析模型:spm 二阶分析中的 Flexible factorial 问题:Flexible factorial交互作用对比矩阵如何编写? 老师:deepseek老师【大神们看看这个矩阵是否可以如下编写?】 以下是来自de…...
力扣第272场周赛
周赛链接:竞赛 - 力扣(LeetCode)全球极客挚爱的技术成长平台 这场周赛是在课堂上模拟的, 总体来说比较简单, 但不幸被老师压力了。以下分享一下我的解题思路 如果你每天没有时间刷题的话, 可以看一下我写的东西, 我尽量讲解的通俗一些, 不会…...
【5】深入学习npm-Nodejs开发入门
深入学习npm npm详解npm的组成-registrynpm的组成-websitenpm的组成-clinpm-confignpm-initnpm-installnpm-startnpm-uninstallnpm-version其他命令 再谈registrypackage.json配置基本结构必填字段可选字段依赖管理其他配置完整配置 node_modules其他 npm详解 我们在前面安装N…...
2025.04.05 广东汕尾两日游记
2025.04.05 广东汕尾两日游记 文章目录 2025.04.05 广东汕尾两日游记一、前言二、我的两日游行程1、行程2、这两天吃喝玩乐的地方 三、其他1、汕尾两日游小结2、汕尾前十景点(1)玄武山旅游区(2)红海湾遮浪旅游区(3&…...
【数学建模】(智能优化算法)鲸鱼优化算法(Whale Optimization Algorithm)详解与应用
鲸鱼优化算法(Whale Optimization Algorithm)详解与应用 文章目录 鲸鱼优化算法(Whale Optimization Algorithm)详解与应用1. 引言2. 算法原理2.1 生物学基础2.2 数学模型[^3]1. 包围猎物阶段2. 气泡网攻击(螺旋更新)3. 随机搜索猎物(全局探索…...
11-Java并发编程终极指南:ThreadLocal与并发设计模式实战
Java并发编程终极指南:ThreadLocal与并发设计模式实战 一、ThreadLocal核心原理剖析 1. 线程本地存储实现机制 #mermaid-svg-EX865K5oO873R6OO {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-EX865K5o…...
数据库数据恢复——sql server数据库被加密怎么恢复数据?
SQL server数据库数据故障: SQL server数据库被加密,无法使用。 数据库MDF、LDF、log日志文件名字被篡改。 数据库备份被加密,文件名字被篡改。 SQL server数据库数据恢复过程: 1、将所有数据库做完整只读备份。后续所有数据恢…...
0501路由-react-仿低代码平台项目
文章目录 1 react路由1.1 核心库:React Router安装 1.2 基本路由配置路由入口组件定义路由 1.3 导航方式使用 <Link> 组件编程式导航 1.4 动态路由参数定义参数获取参数 1.5 嵌套路由父路由配置子路由占位符 1.6 重定向与404页面重定向404页面 1.7 路由守卫&a…...
C++二分查找
一、模板①:向下取整(mid (l r) >> 1) while (l < r) {int mid l r >> 1; // 等价于 (l r) / 2(向下取整)if (check(mid)) r mid; // 保留左半区else l mid 1; // 舍弃左半区 } 适用场…...
c++将jpg转换为灰度图
c将jpg转换为灰度图 step1:添加依赖 下载这两个文件,放在cpp同一目录下,编译生成 https://github.com/nothings/stb/blob/master/stb_image_write.h https://github.com/nothings/stb/blob/master/stb_image.hstep2:C:\Users\wangrusheng\source\repos…...
react/vue中前端多图片展示页面优化图片加载速度的五种方案
需求背景 在多项目中 例如官网项目中 会出现很多大图片显示的情况 这个时候就会出现图片过大 公司带宽不够之类导致页面加载速度过慢及页面出现后图片仍然占位但并未加载出来 或者因为网络问题导致图片区域黑块等等场景 这个时候我们就要对图片和当前场景进行优化 方案定…...
第二届电气技术与自动化工程国际学术会议 (ETAE 2025)
重要信息 2025年4月25-27日 中国广州 官网: http://www.icetae.com/ 部分 征稿主题 Track 1:电气工程 输配电、电磁兼容、高电压和绝缘技术、电气工程、电气测量、电力电子及其应用、机电一体化、电路与系统、电能质量和电磁兼容性、电力系统及其自…...
Windows 图形显示驱动开发-WDDM 2.0功能_上下文监视
功能概述 上下文监视机制是GPU与CPU协同计算的核心同步技术,通过受监视围栏(Monitored Fence)实现跨硬件单元的高效协调。其核心目标是解决以下场景的同步需求: GPU引擎间同步:例如在多渲染管线中,后处理…...
YOLOv12即插即用---PPA
1.模块介绍 多分支特征提取:PPA 模块采用局部卷积、全局卷积和串行卷积三种并行分支,从多个尺度和层次提取特征,有效保留小目标在多次下采样过程中的关键信息。 特征融合与注意力增强:在特征提取后,PPA 模块引入高效的通道注意力和空间注意力机制,实现自适应特征增强,…...
MySql主从相关概念
想象一下,你的业务飞速增长,用户请求如潮水般涌来,突然数据库主库宕机,数据丢失,服务瘫痪——这简直是开发者的噩梦!MySQL主从复制就像一张安全网,通过主库写、从库读的协作模式,不仅…...
精品推荐-最新大模型MCP核心架构及最佳实践资料合集(18份).zip
精品推荐-最新大模型MCP核心架构及最佳实践资料合集,共18份。 1、2025年程序员必学技能:大模型MCP核心技术.pdf 2、MCP 架构设计剖析:从 Service Mesh 演进到 Agentic Mesh.pdf 3、MCP 架构设计深度剖析:使用 Spring AI MCP 四步…...
Qt模型-视图架构
引言 在GUI开发中,数据与界面的同步一直是核心挑战。传统方法将数据存储在界面组件内部容器中,容易引发数据冗余和同步问题。Qt的模型-视图(Model-View)架构通过解耦数据与界面,提供了更优雅的解决方案。本文将深入剖…...
Transformers 是工具箱,BERT 是工具。
Transformers 是工具箱,BERT 是工具。 🔍 详细解释: 名称作用比喻理解举例🤖 transformers(库)一个框架,提供很多 NLP 模型的“使用方式”,包括文本分类、问答、摘要等相当于一个“…...
AI应用企业研发方案
一、引言 在当今数字化时代,人工智能(AI)技术正以前所未有的速度融入各个行业,推动着企业的创新与变革。对于医药流通行业批发公司而言,面对日益激烈的市场竞争和不断变化的客户需求,借助AI技术提升企业的…...
Python实例题:Python实现iavaweb项目远端自动化更新部署
目录 Python实例题 题目 题目分析 需求理解 关键知识点 实现思路分析 代码实现 代码解释 execute_remote_command 函数: deploy_java_web_project 函数: 主程序: 运行思路 结束语 Python实例题 题目 Python实现iavaweb项目远端…...
NO.90十六届蓝桥杯备战|动态规划-区间DP|回文字串|Treats for the Cows|石子合并|248(C++)
区间dp也是线性dp的⼀种,它⽤区间的左右端点来描述状态,通过⼩区间的解来推导出⼤区间的解。因此,区间DP的核⼼思想是将⼤区间划分为⼩区间,它的状态转移⽅程通常依赖于区间的划分点。 常⽤的划分点的⽅式有两个: 基于…...
无人机在极端环境材料的选择
一、材料选择与优化 1. 耐低温/高温复合材料 碳纤维增强聚合物(CFRP):具备高强度、低膨胀系数特性,适用于极寒(-40℃)和高温(50℃)环境,减少因温度变化导致的结构变形。…...
视觉目标检测大模型GAIA
中国科学院自动化研究所智能感知与计算研究中心携手华为等领军企业,共同推出面向产业应用的视觉目标检测全流程解决方案——GAIA智能检测平台。该研究成果已获CVPR 2021会议收录(论文链接: 论文地址:https://arxiv.org/pdf/2106.…...
【数据分析实战】使用 Matplotlib 绘制折线图
1、简述 在日常的数据分析、科研报告、项目可视化展示中,折线图是一种非常常见且直观的数据可视化方式。本文将带你快速上手 Matplotlib,并通过几个实际例子掌握折线图的绘制方法。 Matplotlib 是 Python 中最常用的数据可视化库之一,它能够…...
[原创](现代Delphi 12指南): 设置、运行和调试你的第一个macOS应用程序.
[作者] 常用网名: 猪头三 出生日期: 1981.XX.XX 企鹅交流: 643439947 个人网站: 80x86汇编小站 编程生涯: 2001年~至今[共24年] 职业生涯: 22年 开发语言: C/C、80x86ASM、Object Pascal、Objective-C、C#、R、Python、PHP、Perl、 开发工具: Visual Studio、Delphi、XCode、C …...
第一个Qt开发的OpenCV程序
OpenCV计算机视觉开发实践:基于Qt C - 商品搜索 - 京东 下载安装Qt:https://download.qt.io/archive/qt/5.14/5.14.2/qt-opensource-windows-x86-5.14.2.exe 下载安装OpenCV:https://opencv.org/releases/ 下载安装CMake:Downl…...
APCC:CloudberryDB和Greenplum数据库的管理利器
在大数据时代,企业数据量激增,数据库的运维复杂度与日俱增。如何高效管理数据库集群、快速定位问题并保障系统稳定性,成为企业IT团队的核心挑战。Analytical Processing Central Console(APCC) 应运而生——这是一款专…...
3D打印革新制造范式:CASAIM 3D打印解决方案
在传统制造面临定制化需求激增与供应链效率瓶颈的双重挑战下,3D打印技术正以颠覆性姿态重塑产业格局。CASAIM深耕工业级3D打印领域十余年,以材料科学、工艺控制与数字化设计的深度融合,为航空航天、汽车制造、医疗器械等高精尖行业提供从原型…...
[蓝桥杯]小tips
记得return 0 输入输出 关闭同步流肯定会记得 但是要记得define endl \n 更重要 dfs和string传参的注意 题目链接 #include<bits/stdc.h> using namespace std;//#define int long long using ll long long; using ar2 array<int,2>; using ar3 array<i…...
安宝特案例 | Fundació Puigvert 医院应用AR技术开创尿石症治疗新纪元
案例介绍 在医疗科技不断进步的今天,Fundaci Puigvert 医院迈出了重要一步,成功应用AR技术进行了全球首例同时使用两台内窥镜的ECIRS手术(内镜肾内联合手术),由Esteban Emiliani M.D. PhD F.E.B.U 博士主刀。这标志着…...
LangGraph 架构详解
核心架构组件 LangGraph 的架构建立在一个灵活的基于图的系统上,使开发者能够定义和执行复杂的工作流。以下是主要架构组件: 1. 状态管理系统 LangGraph 的核心是其强大的状态管理系统,它允许应用程序在整个执行过程中维护一致的状态&…...
项目学习总结001
1. 策略模式和工厂模式 https://mp.weixin.qq.com/s/RG-h7r69JyKUlBZylJJIFQ 在软件开发中也常常遇到类似的情况,实现某一个功能有多个途径,此时可以使用一种设计模式来使得系统可以灵活地选择解决途径,也能够方便地增加新的解决途径。这就是…...
TGRS 2024 | 基于光谱相关的高光谱图像超分辨率融合网络
10.1109/TGRS.2024.3423422 研究背景及以往方法存在的问题 高光谱图像超分辨率(HSI-SR)旨在通过融合低空间分辨率 HSI 与高空间分辨率 MSI,提升 HSI 的空间分辨率。现有方法在模态差异处理、波段相关性利用、细节保留等方面存在不足&#x…...
小张的工厂进化史——工厂模式
小张的工厂进化史——工厂模式 一、简单工厂模式:全能生产线二、工厂方法模式:分品牌代工三、抽象工厂模式:生态产品族四、三种模式核心对比表五、结合Spring实现简单工厂(实践) 小张从华强北起家,最初只有…...
jupyter notebook 无法启动- markupsafe导致
一、运行jupyter notebook和Spyder报错:(已安装了Anaconda,以前可打开) 1.背景:为了部署机器学习模型,按教程直接安装了flask 和markupsafe,导致jupyter notebook,Spyder 打不开。 pip install flas…...
GPT - GPT(Generative Pre-trained Transformer)模型框架
本节代码主要为实现了一个简化版的 GPT(Generative Pre-trained Transformer)模型。GPT 是一种基于 Transformer 架构的语言生成模型,主要用于生成自然语言文本。 1. 模型结构 初始化部分 class GPT(nn.Module):def __init__(self, vocab…...
数据中台、BI业务访谈(三):如何选择合适的访谈对象
大家在日常中有没有遇到这种情况,感觉所有的事情都准备的很充分了,反复的演练,结果一上去就发现事情完全没有按照自己预想的来。智者千虑,必有一失。满满自信的去,结果是铩羽归来。 这种情况很正常,就跟打…...
计算机网络-TCP可靠传输机制
计算机网络-TCP可靠传输机制 3. TCP可靠传输机制3.1 序列号与确认号机制3.1.1 序列号与确认号的基本概念3.1.2 序列号与确认号的工作原理3.1.3 序列号与确认号在Linux内核中的实现TCP控制块中的序列号和确认号字段序列号的初始化发送数据时的序列号处理接收数据时的确认号处理 …...
计算机网络- 传输层安全性
传输层安全性 7. 传输层安全性7.1 传输层安全基础7.1.1 安全需求机密性(Confidentiality)完整性(Integrity)真实性(Authenticity)不可否认性(Non-repudiation) 7.1.2 常见安全威胁窃…...
【C++取经之路】lambda和bind
目录 引言 lambda语法 lambda捕获列表解析 1)值捕获 2)引用捕获 3)隐式捕获 lambda的工作原理 lambda进阶用法 泛型lambda 立即调用 lambda 与 function bind语法 bind的调用逻辑 bind核心用途 绑定参数 调整参数顺序 bind的…...
AF3 ProteinDataset类的初始化方法解读
AlphaFold3 protein_dataset模块 ProteinDataset 类主要负责从结构化的蛋白质数据中构建一个可供模型训练/推理使用的数据集,ProteinDataset 类的 __init__ 方法用于初始化一个蛋白质数据集对象。 源代码: def __init__(self,dataset_folder,features_folder="./data/t…...
博客园账户注册全流程指南(附常见问题)
博客园账户注册全流程指南(附常见问题) 引言 博客园作为国内老牌技术社区,是程序员们分享知识、交流技术的圣地。本文将手把手教你完成从注册到开通博客的全流程,附常见问题解答,助你轻松开启技术博客之旅。 一、注…...
算法复习笔记
算法复习 最大公约数枚举abc反序数 模拟xxx定律打印数字菱形今年的第几天?vector完数VS盈数剩下的树 排序和查找顺序查找二分查找找位置 字符串统计单词浮点数加法 线性数据结构队列约瑟夫问题(队列)计算表达式(栈) 递…...
spring boot 引入fastjson,com.alibaba.fastjson不存在(Springboot-测试项目)
spring boot 引入fastjson,com.alibaba.fastjson不存在(Springboot-测试项目) 先解决最初的的包不找到问题,适用所有包找不到跟进。 <mirrors><!-- mirror| Specifies a repository mirror site to use instead of a g…...
新闻推荐系统(springboot+vue+mysql)含万字文档+运行说明文档
新闻推荐系统(springbootvuemysql)含万字文档运行说明文档 该系统是一个新闻推荐系统,分为管理员和用户两个角色。管理员模块包括个人中心、用户管理、排行榜管理、新闻管理、我的收藏管理和系统管理等功能。管理员可以通过这些功能进行用户信息管理、查看和编辑用…...
UE4 踩坑记录
1、Using git status to determine working set for adaptive non-unity build 我删除了一个没用的资源,结果就报这个错,原因就是这条命令导致的, 如果这个项目是git项目, ue编译时会优先通过 git status检查哪些文件被修改&#…...