龙图教育:JavaScript中错误正确处理方式
JavaScript编程的常见问题及解决方法
JavaScript编程的常见问题及解决方法JavaScript编程是现代Web开发中的重要组成部分。
然而,就像任何其他编程语言一样,JavaScript也会遇到一些常见问题。
在本文中,我将详细介绍一些常见的JavaScript编程问题及其解决方法。
1. 问题:变量未定义解决方法:在使用变量之前,始终使用var、let或const关键字声明变量。
这样可以确保变量在使用之前已经被定义,避免未定义的错误。
2. 问题:作用域问题解决方法:熟悉JavaScript中的作用域规则。
确保你在正确的作用域中声明和使用变量。
避免变量污染和意外的覆盖。
3. 问题:同步和异步操作解决方法:理解JavaScript的事件循环机制。
异步操作可以使用回调函数、Promise对象或async/await语法来处理。
避免使用同步操作阻塞UI线程。
4. 问题:类型转换错误解决方法:注意JavaScript中的类型转换规则。
使用合适的函数将变量转换为所需的类型,例如parseInt()、parseFloat()、Number()、String()等。
5. 问题:DOM操作问题解决方法:对于复杂的DOM操作,使用现代的DOM库,如jQuery或React 等。
避免直接操作DOM,尽量使用虚拟DOM等高级技术来进行性能优化。
6. 问题:内存泄漏解决方法:避免循环引用和长期持有不再使用的对象。
在合适的时机手动释放资源,如移除事件监听器、清除定时器等。
7. 问题:错误处理解决方法:使用try...catch语句捕获和处理异常。
在开发过程中添加适当的错误处理机制,以便及时发现和解决问题。
8. 问题:性能问题解决方法:使用性能优化工具,如Chrome开发者工具,分析和改进代码性能。
避免使用不必要的循环和重复操作。
9. 问题:跨浏览器兼容性解决方法:检查代码在不同浏览器中的兼容性,使用适当的polyfill或垫片来解决问题。
尽量遵循Web标准,减少浏览器兼容性的难题。
常见js错误调试方法
最近一段时间写程序遇到了不少页面设计的东西,自然少不了js。
在做的过程中使用脚本是总是遇到错误,开始时一头雾水,不知道如何从jsp页面中取定位js的错误位置,因为ie给定位的错误位置有时候很模糊,但是目前有没有针对js语法调试的编辑器。
自己摸索了几天,有两个方法比较实用而且有效:1、alert(方法;alert方法添加到脚本中合适的位置(你怀疑有错误的地方),页面执行时会弹出一个对话框,看看alert(方法是否被执行到;这样在页面中放几个 alert你就可以很快的检测到错误发生的位置,准确排除!注意:错误排除后记得把alert去掉啊,要不然页面一顿弹对话框也很要命的。
2、利用ie的右键查看源文件定位错误位置执行页面如果报错了,左下角会出现一个黄色的感叹号,双击它,弹出,看一下错误的行号,然后在页面上右键->查看源文件,定位到刚才的行号,在jsp设计页面中找到合适的位置看看是什么原因报的错误,检查、干掉错误!附:一些JS调试技巧,都是从论坛里面找的哦,要感谢就感谢论坛里的JS高手吧,有些确实很实用如何在里调试脚本1.首先应该把ie的“ 禁止脚本调试选项” 去掉2.如果在里面,就设置一个html文件为启动页,然后在文件上面设置断点,这样应该是好使的。
记住:设定html文件为启动页如果你的程序是asp,或者aspx,那还有这样的方法:1.a在你想要停止的地方加上alert(,b然后运行的网页,c使用attach to process( 和vs interdev 都有这个菜单项连接上你的进程,d到alert((在前面设置好语句后,不要点"确定",e回到debugger( 或者 interdev暂停进程,f点击警告窗口的"确定",g这时脚本停留在alert(语句的下一条2.使用浏览器的"调试"菜单下面的"到下一条语句停止"的功能,也可以很好地调试脚本在调试 Javascript 脚本的时候,如果有错误, IE 的状态栏里会有个问号 [ 点击此问号 ] ,或者弹出错误框,为了尽快找到错误,下面是常用的调试方法:1 ,如果出现对象为 null 或找不不到对象,那就是 id,name 或 DOM 写法不对,请检查错误所在的行;2 ,如果错误定位到一个函数的调用上,说明函数体有问题,到函数体里找原因。
常见的JavaScript内存错误及解决方法
常见的JavaScript内存错误及解决⽅法⽬录1.计时器的监听2.事件监听3.Observers4. Window Object5. 持有DOM引⽤前⾔:JavaScript 不提供任何内存管理操作。
相反,内存由JavaScript VM 通过内存回收过程管理,该过程称为垃圾收集。
既然我们不能强制的垃圾回收,那我们怎么知道它能正常⼯作?我们对它⼜了解多少呢?脚本执⾏在此过程中暂停它为不可访问的资源释放内存它是不确定的它不会⼀次检查整个内存,⽽是在多个周期中运⾏它是不可预测的,但它会在必要时执⾏这是否意味着⽆需担⼼资源和内存分配问题?当然不是。
如果我们⼀不⼩⼼,可能会产⽣⼀些内存泄漏。
什么是内存泄漏?内存泄漏是软件⽆法回收的已分配的内存块。
Javascript 提供了⼀个垃圾收集程序,但这并不意味着我们就能避免内存泄漏。
为了符合垃圾收集的条件,该对象必须不被其他地⽅引⽤。
如果持有对未使⽤的资源的引⽤,这将会阻⽌这些资源被回收。
这就是所谓的⽆意识的内存保持。
泄露内存可能会导致垃圾收集器更频繁地运⾏。
由于这个过程会阻⽌脚本的运⾏,它可能会让我们程序卡起来,这么⼀卡,挑剔的⽤户肯定会注意到,⼀⽤不爽了,那这个产品离下线的⽇⼦就不完了。
更严重可能会让整个应⽤奔溃,那就gg了。
如何防⽌内存泄漏? 主要还是我们应该避免保留不必要的资源。
来看看⼀些常见的场景。
1.计时器的监听setInterval() ⽅法重复调⽤函数或执⾏代码⽚段,每次调⽤之间有固定的时间延迟。
它返回⼀个时间间隔ID,该ID唯⼀地标识时间间隔,因此您可以稍后通过调⽤clearInterval() 来删除它。
我们创建⼀个组件,它调⽤⼀个回调函数来表⽰它在x个循环之后完成了。
我在这个例⼦中使⽤React,但这适⽤于任何FE框架。
import React, { useRef } from 'react';const Timer = ({ cicles, onFinish }) => {const currentCicles = useRef(0);setInterval(() => {if (currentCicles.current >= cicles) {onFinish();return;}currentCicles.current++;}, 500);return (<div>Loading ...</div>);}export default Timer;⼀看,好像没啥问题。
JavaScript中的错误调试
JavaScript中的错误调试错误调试是软件开发中不可或缺的一部分,它帮助开发人员找到和解决应用程序中的错误。
而在JavaScript开发中,错误调试也非常重要。
本文将介绍一些常见的JavaScript错误和错误调试技巧。
一、常见的JavaScript错误1. 语法错误(Syntax Errors)语法错误是在代码编写过程中最常见的错误之一。
这些错误通常是由于拼写错误、缺少分号、括号不匹配等引起的。
```例子:let x = 5;console.log(x```上述代码中,缺少了一个右括号,会导致语法错误。
2. 类型错误(Type Errors)类型错误通常发生在应用程序试图使用一个错误类型的值时。
这可能是由于变量类型与操作不匹配、函数的参数类型错误等引起的。
```例子:let x = 5;console.log(x.toUpperCase());```上述代码中,使用了字符串的方法toUpperCase(),而变量x的类型为数字,因此会引发类型错误。
3. 引用错误(Reference Errors)引用错误通常发生在应用程序试图访问一个不存在的变量、对象属性或函数时。
```例子:console.log(x);```上述代码中,变量x未被声明,因此会引发引用错误。
二、JavaScript错误调试技巧1. 使用浏览器开发工具现代的浏览器提供了开发者工具,其中包括调试功能。
通过在浏览器中打开开发者工具,可以查看代码运行时的错误信息、断点调试、单步执行等。
常见的浏览器开发工具有Chrome DevTools、Firefox Developer Tools等。
2. 使用console.log()进行输出调试console.log()是一种简单有效的调试方法,在关键位置插入console.log()语句,输出变量的值,以便观察程序的执行状态和变量的取值。
这种方法可以用于定位问题所在,并辅助分析错误。
3. 使用断点调试断点调试是一种高级的调试技术,可以在开发工具中设置断点,使程序在特定位置停止执行,并允许开发人员逐步调试代码。
JavaScript的错误处理知识点
JavaScript的错误处理知识点JavaScript是一种常用的编程语言,广泛应用于网页开发和其他前端应用中。
在编写JavaScript代码时,错误是不可避免的,毕竟人无完人嘛。
因此,了解JavaScript错误处理的知识点是至关重要的。
本文将为您介绍几个重要的JavaScript错误处理知识点,帮助您更好地应对代码中的错误。
1. try-catch语句在JavaScript中,使用try-catch语句可以捕获并处理异常。
try块中编写可能引发错误的代码,而catch块则用于处理捕获到的错误。
例如:```try {// 可能引发错误的代码} catch (error) {// 处理错误的代码}```在try块中,如果发生了错误,程序会立即跳转到catch块,并将错误信息传递给catch块中的错误参数(本例中的error)。
您可以在catch块中编写适当的代码来处理错误,比如展示错误信息给用户或者执行其他操作。
2. throw语句除了捕获错误,JavaScript还允许您自定义错误并将其抛出。
通过throw语句,您可以在代码的某个位置手动抛出错误。
例如:```throw new Error("这是一个自定义错误");```在throw语句中,您可以抛出任何类型的错误,包括内建的Error 类型或自定义的错误类型。
通过抛出错误,您可以在程序的其他位置捕获并处理它,以便采取适当的措施。
3. finally块除了try和catch块,还有一个可选的finally块。
该块中的代码会在无论是否发生错误都会执行。
它通常用于释放资源或执行清理操作。
例如:```try {// 可能引发错误的代码} catch (error) {// 处理错误的代码} finally {// 执行清理操作的代码}```在finally块中,您可以编写需要始终执行的代码,比如关闭打开的文件、释放内存等等。
它确保无论是否发生错误,都会执行这些清理操作。
JavaScript笔记:错误处理与调试
JavaScript笔记:错误处理与调试1、浏览器报告的错误IEIE 是唯一一个在浏览器的界面窗体(chrome)中显示JavaScript 错误信息的浏览器。
在发生JavaScript 错误时,浏览器左下角会出现一个黄色的图标,图标旁边则显示着”Error on page”(页面中有错误)。
假如不是存心去看的话,你很可能不会注意这个图标。
双击这个图标,就会看到一个包含错误消息的对话框,其中还包含诸如行号、字符数、错误代码及文件名(其实就是你在查看的页面的URL)等相关信息。
Firefox默认情况下,Firefox 在JavaScript 发生错误时不会通过浏览器界面给出提示。
但它会在后台将错误记录到错误控制台中。
单击“Tools”(工具)菜单中的“Error Console”(错误控制台)可以显示错误控制台。
你会发现,错误控制台中实际上还包含与JavaScript、CSS 和HTML 相关的警告和信息,可以通过筛选找到错误。
目前,最流行的Firefox 插件Firebug,已经成为开发人员必备的JavaScript 纠错工具。
这个可以从 下载到的插件,会在Firefox 状态栏的右下角区域添加一个图标。
默认情况下,右下角区域显示的是一个绿色对勾图标。
在有JavaScript 错误发生时,图标会变成红叉,同时旁边显示错误的数量。
单击这个红叉会打开Firebug 控制台,其中显示有错误消息、错误所在的代码行(不包含上下文)、错误所在的URL 以及行号。
SafariWindows 和Mac OS 平台的Safari 在默认情况下都会隐藏全部JavaScript 错误。
为了访问到这些信息,必须启用“Develop”(开发)菜单。
为此,需要单击“Preferences”(偏好设置),然后在“Advanced”(高级)选项卡中,选中“Show develop menu in menubar”(在菜单栏中显示“开发”菜单)。
JavaScript中代码错误排查与修复技巧
JavaScript中代码错误排查与修复技巧JavaScript是一种广泛使用的脚本语言,但由于其动态性和弱类型特性,常常容易出现错误。
为了排查和修复这些错误,开发人员需要掌握一些技巧和方法。
以下是一些常见的JavaScript代码错误排查与修复技巧。
1.使用开发者工具浏览器提供了强大的开发者工具,可以帮助我们调试JavaScript代码。
其中包括控制台(console)、断点调试(debugger)、性能分析器(profiler)等工具。
通过使用这些工具,我们可以查看变量值、调用堆栈、错误消息等信息,从而更好地理解和排查错误。
2.仔细阅读错误消息当JavaScript代码出现错误时,浏览器会显示错误消息。
仔细阅读错误消息,可以帮助我们确定错误的类型和位置。
错误消息通常包含错误类型、文件名、行数等信息,这些信息对于定位错误非常重要。
3.缩小错误范围当出现错误时,我们可以通过逐步缩小错误范围来定位问题所在。
可以通过注释代码的方式或者分步执行代码的方式,逐步排除可能出错的部分。
当确定问题所在后,就可以针对性地进行修复。
4.使用断言和异常处理断言(assertion)和异常处理(exception handling)是JavaScript 代码中常用的技术。
断言可以帮助我们在代码中设置预期条件,以便在运行时验证这些条件是否成立。
异常处理则用于捕获和处理代码运行时发生的异常。
通过使用这些技术,我们可以更早地发现和处理错误。
5.编写单元测试单元测试可以帮助我们验证代码的正确性,并在代码发生变动后发现潜在的错误。
使用测试框架,编写各种场景的测试用例,以覆盖代码的不同执行路径和边界条件。
通过运行这些单元测试,我们可以更好地捕捉和修复潜在的错误。
6.代码审查和团队合作在项目开发过程中,通过代码审查和团队合作也可以发现和修复错误。
代码审查可以帮助我们发现潜在的问题,并提供改进的建议。
团队合作可以让我们共同面对问题,并集思广益,找到最佳的解决方案。
简介JavaScript错误处理机制
简介JavaScript错误处理机制1、 try-catch语句ECMA-262第3版引⼊了try-catch语句,作为JavaScript中处理异常的⼀种标准⽅式。
语法:try{// 可能会导致错误的代码}catch (error){// 在错误发⽣时怎么处理}也就是说,我们应该把所有可能会抛出错误的代码都放在try语句块中,⽽把那些⽤于错误处理代码放在catch块中。
try-catch语句的逻辑是:如果try块中的任何代码发⽣了错误,就会⽴即退出代码执⾏过程,然后接着执⾏catch块。
此时,catch块会接收到⼀个包含错误信息的对象。
注意:即使你不想使⽤这个错误对象,也要给它起个名字。
虽然这个对象在不同浏览器中可能包含不同信息,但是都有⼀个保存着错误消息的message属性,还有⼀个保存错误类型的name属性(并不是所有浏览器都有)try{}catch (error){console.log(error.message);}在跨浏览器编程时,最好还是只使⽤message属性。
1.1 finally⼦句当使⽤finally⼦句时,其代码⽆论如何都会执⾏,也就是说,不管是正常执⾏还是出错了,finally⼦句都会执⾏。
甚⾄return语句,也不会阻⽌finally⼦句的执⾏。
看下⾯的例⼦:function test(){try{console.log('a');return 2;}catch(error){console.log('b');}finally{console.log('c');}}console.log(test());//结果ac2从运⾏结果,我们可以看到,return语句并没有阻⽌finally⼦句的执⾏,⽽且是在finally⼦句执⾏后才会返回return语句的值。
2、错误类型执⾏代码期间可能会发⽣的错误有多种类型。
每种错误都有对应的错误类型,⽽当错误发⽣时,会抛出相应类型的错误对象。
JavaScript代码调试与错误排查的方法与工具
JavaScript代码调试与错误排查的方法与工具JavaScript作为一种广泛应用于网页开发和前端技术的编程语言,调试和错误排查是开发过程中不可或缺的一部分。
本文将介绍一些常用的方法和工具,以帮助开发人员更高效地进行JavaScript代码调试与错误排查。
一、使用浏览器内置的开发者工具进行调试现代浏览器都内置了强大的开发者工具,提供了一系列调试功能。
其中,常用的调试功能包括:1. 控制台(Console):开启浏览器的开发者工具,切换到控制台选项卡,可以查看和调试JavaScript代码。
在控制台中,可以输出日志、检查变量的值、执行代码片段等。
2. 断点调试(Breakpoints):在代码中设置断点,可以暂停代码的执行,以便逐行查看和分析代码执行过程。
开发者可以在断点暂停时检查变量的值、观察代码执行流程等。
3. 监视器(Watch):使用监视器功能,可以跟踪和观察指定变量的值的变化,帮助开发者更好地理解代码的执行情况。
4. 堆栈追踪(Stack Trace):在调试过程中,浏览器会记录代码的调用栈,即从主函数开始到当前执行位置的函数调用序列。
通过堆栈追踪,可以溯源到错误发生的代码位置,便于快速定位问题。
二、使用eslint等静态代码检查工具静态代码检查工具可以帮助开发人员在编码阶段发现潜在的问题和错误,并提供相应的修复建议。
其中,eslint是一款广泛使用的JavaScript静态代码检查工具。
通过在代码中添加eslint规则,可以在代码编写过程中实时检查错误和潜在问题,提高代码质量。
eslint支持自定义规则,并提供了一系列预设规则,涵盖了JavaScript编码中的各个方面。
开发人员可以根据自己的项目需求和编码规范进行配置。
三、使用Chrome DevTools的追踪和性能分析功能除了常规的调试功能,Chrome DevTools还提供了一些高级的追踪和性能分析工具,帮助开发人员更深入地理解和优化JavaScript代码。
JavaScript中的错误处理
JavaScript中的错误处理JavaScript是一种广泛应用的脚本语言,用于为网页增加交互性和动态功能。
在开发过程中,掌握错误处理的技巧是非常重要的,它可以帮助我们识别和解决潜在的问题,提升程序的稳定性和可靠性。
本文将介绍JavaScript中的错误处理机制以及常见的错误类型,帮助读者有效地处理错误并提升开发效率。
一、错误处理的意义及基本概念在开发中,不可避免地会遇到各种错误和异常情况。
良好的错误处理机制可以帮助我们迅速定位问题并修复,确保程序的正常运行。
JavaScript中的错误处理主要通过异常处理来实现。
当程序发生异常时,会抛出一个异常对象,我们可以通过捕获和处理异常来进行错误处理。
在JavaScript中,错误分为两种类型:语法错误和运行时错误。
语法错误是因为代码书写不规范导致的错误,例如拼写错误、语法错误等。
运行时错误是在代码执行过程中出现的错误,例如未定义变量、类型不匹配等。
我们需要对不同类型的错误进行不同的处理。
二、常见的错误类型及处理方法1. 语法错误语法错误是最常见的错误类型之一,它是由代码书写不规范导致的。
当代码存在语法错误时,JavaScript解析器会抛出SyntaxError异常,并提示具体的错误信息,例如缺少分号、括号不匹配等。
处理语法错误的方法是仔细检查代码,并根据错误信息进行修正。
2. 引用错误引用错误通常是由于引用了不存在的变量或对象属性导致的。
当引用错误发生时,JavaScript解析器会抛出ReferenceError异常。
我们可以使用try-catch语句来捕获该异常,并在catch块中处理错误。
同时,为了避免引用错误,我们应该在使用变量或对象属性之前先进行判断,确保其存在。
3. 类型错误类型错误是由于变量或参数类型不匹配导致的。
当类型错误发生时,JavaScript解析器会抛出TypeError异常。
我们可以使用try-catch语句来捕获该异常,并在catch块中进行相应的处理。
JavaScript 错误处理与调试总结
在Web开发过程中,编写JavaScript程序时或多或少会遇到各种各样的错误,有语法错误,逻辑错误。
如果是一小段代码,可以通过仔细检查来排除错误,但如果程序稍微复杂点,调试JS便成为一个令Web开发者很头痛的问题。
下面总结一下JS错误处理与调试的方法方法1:用alert() 和document.write()方法监视变量值。
alert()在弹出对话框显示变量值的同时,会停止代码的继续运行,直到用户单击“确定”按钮,而document.write()则在输出值后继续运行代码。
调试JS时可以根据具体情况来选择这种方法。
例如下面代码:将数组a中以1开头的数据添加到数组b中代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www. /TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" ><head><title>无标题页</title><script type="text/javascript">var a=["123","456","789","111"];function AlertMessage(){var b=new Array("1111");for(var i=0;i<a.length;i++){if(a[i].indexOf("1")!=0){alert(a[i]);b.push(a[i]);}}}</script></head><body ><input type="button" value="点我" onclick="AlertMessage()"/></body></html>如果加入的值比较多,则可以使用document.writer()方法,避免反复点击确定按钮。
JavaScript的错误处理
JavaScript的错误处理在编写JavaScript代码时,错误是难免的。
无论是语法错误、逻辑错误还是运行时错误,都可能导致程序崩溃或不正常运行。
因此,错误处理是编写高质量JavaScript代码的重要一环。
本文将介绍JavaScript中的错误处理技巧。
1. 使用try-catch语句try-catch语句是JavaScript中常用的错误处理机制。
通过将可能引发错误的代码放在try代码块中,然后使用catch代码块捕获错误并进行处理。
该机制可以防止错误中断代码的执行,并提供了一种方式以控制错误处理流程。
```javascripttry {// 可能引发错误的代码} catch (error) {// 错误处理逻辑}```2. 抛出自定义错误除了捕获和处理JavaScript内置的错误类型外,我们还可以抛出自定义的错误。
这可以通过抛出Error对象的实例来实现,我们可以自定义错误的名称和错误消息。
```javascriptthrow new Error("自定义错误消息");```3. 使用finally代码块在try-catch语句中,还可以使用finally代码块来定义无论是否发生错误都要执行的代码。
finally代码块中的代码在错误捕获后执行,且无论是否发生错误都会执行。
```javascripttry {// 可能引发错误的代码} catch (error) {// 错误处理逻辑} finally {// 无论是否发生错误都会执行的代码}```4. 使用错误对象的属性和方法在错误处理过程中,我们可以使用错误对象的属性和方法来获取有关错误的更多信息。
以下是一些常用的属性和方法:- message:返回错误消息。
- name:返回错误名称。
- stack:返回错误的堆栈跟踪信息。
```javascripttry {// 可能引发错误的代码} catch (error) {console.log(error.message); // 错误消息console.log(); // 错误名称console.log(error.stack); // 堆栈跟踪信息}```5. 全局错误处理除了在局部代码块中处理错误外,还可以使用window对象的onerror事件来捕获全局错误。
js使用时遇到的一些问题的解决方法
js使用时遇到的一些问题的解决方法
一、客户端脚本引擎的问题
1. 无法识别 JavaScript 语法
解决办法:检查 JavaScript 语法是否正确,以及其它相关配置,如 HTML 代码中的 <script> 标记、文件编码等。
2. 无法解析 JavaScript 语句
解决办法:检查 JavaScript 语法是否正确,如缺少分号或不正确的结构等。
3. 当前客户端脚本引擎可能会有所不同
解决办法:检查当前客户端脚本版本是否有所更新,根据客户端的版本来决定是否需要更改 JavaScript 语法,以便在客户端的脚本引擎中执行。
二、内存管理的问题
1. JavaScript 中的引用计数内存泄漏
解决办法:检查 JavaScript 中的引用计数,使用合理的内存管理手段,如缓存器,来避免内存泄漏。
2. 内存溢出问题
解决办法:使用良好的程序设计,避免内存溢出,尽量使用内存缓存来减少重复分配内存的情况,以及释放不再使用的内存,从而最大限度地节省内存。
三、浏览器兼容性问题
1. CSS 兼容的问题
解决办法:使用浏览器的开发者工具来查看不同浏览器的 CSS 支持情况,并根据不同浏览器的具体情况来使用兼容的 CSS 语法。
2. JavaScript 兼容的问题
解决办法:检查 JavaScript 代码中的兼容性问题,使用相应的兼容性库或框架来解决浏览器兼容性问题。
四、网络连接问题
1. 超时问题
解决办法:检查服务器端网络连接是否正常,可以使用 Ajax 重试技术来处理超时问题。
2. 请求头丢失
解决办法:检查服务器端网络连接是否正常,并重新发送请求头。
JavaScript(七)错误处理
JavaScript(七)错误处理错误传播如果代码发⽣了错误,⼜没有被try ... catch捕获,那么,程序执⾏流程会跳转到哪呢?function getLength(s) {return s.length;}function printLength() {console.log(getLength('abc')); // 3console.log(getLength(null)); // Error!}printLength();如果在⼀个函数内部发⽣了错误,它⾃⾝没有捕获,错误就会被抛到外层调⽤函数,如果外层函数也没有捕获,该错误会⼀直沿着函数调⽤链向上抛出,直到被JavaScript引擎捕获,代码终⽌执⾏。
所以,我们不必在每⼀个函数内部捕获错误,只需要在合适的地⽅来个统⼀捕获,⼀⽹打尽:'use strict';function main(s) {console.log('BEGIN main()');try {foo(s);} catch (e) {console.log('出错了:' + e);}console.log('END main()');}function foo(s) {console.log('BEGIN foo()');bar(s);console.log('END foo()');}function bar(s) {console.log('BEGIN bar()');console.log('length = ' + s.length);console.log('END bar()');}main(null);/*运⾏结果:BEGIN main()BEGIN foo()BEGIN bar()出错了:TypeError: Cannot read property 'length' of nullEND main()*/当bar()函数传⼊参数null时,代码会报错,错误会向上抛给调⽤⽅foo()函数,foo()函数没有try ... catch语句,所以错误继续向上抛给调⽤⽅main()函数,main()函数有try ... catch语句,所以错误最终在main()函数被处理了。
jserror script error
JS错误(JavaScript错误)是在使用JavaScript编程语言时可能会遇到的问题。
由于JavaScript是一种广泛应用于网页开发的脚本语言,因此对JS错误的理解和处理至关重要。
1. 了解JS错误JS错误是指在运行JavaScript代码时发生的错误。
它们可能是语法错误、逻辑错误或运行时错误。
常见的JS错误包括语法错误(SyntaxError)、引用错误(ReferenceError)、类型错误(TypeError)等。
2. JS错误的影响JS错误对网页的影响非常大。
如果未能处理好JS错误,可能会导致网页无法正常运行,甚至直接崩溃。
用户体验将因此受到影响,甚至会导致用户流失。
3. 处理JS错误的方法处理JS错误的方法主要包括使用try-catch语句进行错误捕获、使用console对象进行错误记录和调试、使用第三方工具进行错误监控和上报等。
合理的错误处理方法可以使网页更加健壮。
4. 个人观点和理解在我看来,对JS错误的理解和处理至关重要。
作为网页开发者,我们应该注重代码质量,尤其是对可能产生JS错误的地方要特别注意。
合理的错误处理不仅可以提升用户体验,还可以减少不必要的维护成本。
总结回顾:通过本文的全面介绍,我对JS错误有了更加深刻的理解。
了解了JS错误的类型和影响,学习了处理JS错误的方法,并且了解了应对JS错误的重要性。
我相信在将来的网页开发中,能够更好地处理和避免JS错误,提升网页的健壮性和稳定性。
接下来,我会继续深入学习和实践,希望能够在网页开发中游刃有余地处理JS错误,为用户提供更好的网页体验。
JavaScript错误(JS错误)在网页开发中是一个非常普遍的问题,了解并处理好这些错误对于提升用户体验和网页稳定性非常重要。
在这篇文章中,我们通过介绍了JS错误的类型、影响以及处理方法,对JS错误有了更加深入的理解。
接下来,我们将进一步扩展对JS错误的认识,并探讨一些更加具体的处理方法和案例分析。
再也不怕JavaScript报错了,怎么看怎么处理都在这
再也不怕JavaScript报错了,怎么看怎么处理都在这在开发中,有时,我们花了几个小时写的 JS 代码,在游览器调试一看,控制台一堆红,瞬间一万头草泥马奔腾而来。
至此,本文主要记录 JS 常见的一些报错类型,以及常见的报错信息,分析其报错原因,并给予处理方法。
并且将介绍几种捕获异常的方法。
常见的错误类型RangeError:标记一个错误,当设置的数值超出相应的范围触发。
比如,new Array(-20)。
ReferenceError:引用类型错误,当一个不存在的变量被引用时发生的错误。
比如:console.log(a)。
SyntaxError:语法错误。
比如 if(true) {。
TypeError:类型错误,表示值的类型非预期类型时发生的错误。
常见的错误RangeError: Maximum call stack size exceeded含义:超出了最大的堆栈大小为什么报错?在使用递归时消耗大量堆栈,导致游览器抛出错误,因为游览器给分配的内存不是无限的。
举个栗子function pow(x, n) { return x * pow(x, n - 1);}pow(10,5);处理办法使用递归的时候,设定一个条件来终止递归,否则会无限循环,直到用尽调用堆栈空间为止。
function pow(x, n) { if (n == 1) return x; return x * pow(x, n - 1);}pow(10,5);ReferenceError: "x" is not defined含义:“x”未定义为什么报错?当你引用一个没有定义的变量时,抛出一个ReferenceError; 当你使用变量的时候,这个变量必须要声明,或者你可以确保它在你当前的脚本或作用域 (scope) 中可用。
举个栗子// 变量未声明console.log(a);fn();// 错误的作用域 function sum() {let number1 = 20,number2 = 30; return number1 + numbe r2;}console.log(number1);处理办法1. 变量使用var|let|const声明2. 提升变量的作用域// 变量未声明let a;function fn() {};console.log(a);fn();// 错误的作用域let number1 = 20, number2 = 30;function sum() { return numb er1 + number2;}console.log(number1);SyntaxError: Identifier 'x' has already been declared含义: 标识符已声明为什么报错?某个变量名称已经作为参数出现了,又在使用let再次声明。
JavaScript错误处理和堆栈追踪浅析
JavaScript错误处理和堆栈追踪浅析有时我们会忽略错误处理和堆栈追踪的一些细节, 但是这些细节对于写与测试或错误处理相关的库来说是非常有用的. 例如这周, 对于Chai 就有一个非常棒的PR, 该PR极大地改善了我们处理堆栈的方式, 当用户的断言失败的时候, 我们会给予更多的提示信息(帮助用户进行定位).作者:来源:dwqs|2017-03-08 08:57收藏分享有时我们会忽略错误处理和堆栈追踪的一些细节, 但是这些细节对于写与测试或错误处理相关的库来说是非常有用的. 例如这周, 对于Chai 就有一个非常棒的PR, 该PR极大地改善了我们处理堆栈的方式, 当用户的断言失败的时候, 我们会给予更多的提示信息(帮助用户进行定位).合理地处理堆栈信息能使你清除无用的数据, 而只专注于有用的数据. 同时, 当更好地理解Errors对象及其相关属性之后, 能有助于你更充分地利用Errors.(函数的)调用栈是怎么工作的在谈论错误之前, 先要了解下(函数的)调用栈的原理:当有一个函数被调用的时候, 它就被压入到堆栈的顶部, 该函数运行完成之后, 又会从堆栈的顶部被移除.堆栈的数据结构就是后进先出, 以LIFO (last in, first out) 著称.例如:function c() {console.log('c');}function b() {console.log('b');c();}function a() {console.log('a');b();}a();在上述的示例中, 当函数a运行时, 其会被添加到堆栈的顶部. 然后, 当函数b在函数a的内部被调用时, 函数b会被压入到堆栈的顶部. 当函数c在函数b的内部被调用时也会被压入到堆栈的顶部.当函数c运行时, 堆栈中就包含了a, b和c(按此顺序).当函数c运行完毕之后, 就会从堆栈的顶部被移除, 然后函数调用的控制流就回到函数b. 函数b运行完之后, 也会从堆栈的顶部被移除, 然后函数调用的控制流就回到函数a. 最后, 函数a运行完成之后也会从堆栈的顶部被移除.为了更好地在demo中演示堆栈的行为, 可以使用console.trace()在控制台输出当前的堆栈数据. 同时, 你要以从上至下的顺序阅读输出的堆栈数据.function c() {console.log('c');console.trace();}function b() {console.log('b');c();}function a() {console.log('a');b();}a();在Node 的REPL 模式中运行上述代码会得到如下输出:Traceat c (repl:3:9)at b (repl:3:1)at a (repl:3:1)at repl:1:1 // <-- For now feel free to ignore anything below this point, these are Node's internals at realRunInThisContextScript (vm.js:22:35)at sigintHandlersWrap (vm.js:98:12)at ContextifyScript.Script.runInThisContext (vm.js:24:12)at REPLServer.defaultEval (repl.js:313:29)at bound (domain.js:280:14)at REPLServer.runBound [as eval] (domain.js:293:12)正如所看到的, 当从函数c中输出时, 堆栈中包含了函数a, b以及c.如果在函数c运行完成之后, 在函数b中输出当前的堆栈数据, 就会看到函数c已经从堆栈的顶部被移除, 此时堆栈中仅包括函数a和b.function c() {console.log('c');}function b() {console.log('b');c();console.trace();}function a() {console.log('a');b();}正如所看到的, 函数c运行完成之后, 已经从堆栈的顶部被移除.Traceat b (repl:4:9)at a (repl:3:1)at repl:1:1 // <-- For now feel free to ignore anything below this point, these are Node's internalsat realRunInThisContextScript (vm.js:22:35)at sigintHandlersWrap (vm.js:98:12)at ContextifyScript.Script.runInThisContext (vm.js:24:12)at REPLServer.defaultEval (repl.js:313:29)at bound (domain.js:280:14)at REPLServer.runBound [as eval] (domain.js:293:12)at REPLServer.onLine (repl.js:513:10)Error对象和错误处理当程序运行出现错误时, 通常会抛出一个Error对象. Error对象可以作为用户自定义错误对象继承的原型. Error.prototype对象包含如下属性:∙constructor–指向实例的构造函数∙message–错误信息∙name–错误的名字(类型)上述是Error.prototype的标准属性, 此外, 不同的运行环境都有其特定的属性. 在例如Node, Firefox, Chrome, Edge, IE 10+, Opera 以及Safari 6+ 这样的环境中, Error对象具备stack属性, 该属性包含了错误的堆栈轨迹. 一个错误实例的堆栈轨迹包含了自构造函数之后的所有堆栈结构.如果想了解更多关于Error对象的特定属性, 可以阅读MDN 上的这篇文章.为了抛出一个错误, 必须使用throw关键字. 为了catch一个抛出的错误, 必须使用try...catch包含可能跑出错误的代码. Catch的参数是被跑出的错误实例.如Java 一样, JavaScript 也允许在try/catch之后使用finally关键字. 在处理完错误之后, 可以在finally语句块作一些清除工作.在语法上, 你可以使用try语句块而其后不必跟着catch语句块, 但必须跟着finally语句块. 这意味着有三种不同的try语句形式:∙try...catch∙try...finally∙try...catch...finallyTry语句内还可以在嵌入try语句:try {try {throw new Error('Nested error.'); // The error thrown here will be caught by its own `catch` clause } catch (nestedErr) {console.log('Nested catch'); // This runs}} catch (err) {console.log('This will not run.');}也可以在catch或finally中嵌入try语句:try {throw new Error('First error');} catch (err) {console.log('First catch running');try {throw new Error('Second error');} catch (nestedErr) {console.log('Second catch running.');}}try {console.log('The try block is running...');} finally {try {throw new Error('Error inside finally.');} catch (err) {console.log('Caught an error inside the finally block.');}}需要重点说明一下的是在抛出错误时, 可以只抛出一个简单值而不是Error对象. 尽管这看起来看酷并且是允许的, 但这并不是一个推荐的做法, 尤其是对于一些需要处理他人代码的库和框架的开发者, 因为没有标准可以参考, 也无法得知会从用户那里得到什么. 你不能信任用户会抛出Error对象, 因为他们可能不会这么做, 而是简单的抛出一个字符串或者数值. 这也意味着很难去处理堆栈信息和其它元信息.例如:function runWithoutThrowing(func) {try {func();} catch (e) {console.log('There was an error, but I will not throw it.');console.log('The error\'s message was: ' + e.message)}}function funcThatThrowsError() {throw new TypeError('I am a TypeError.');}runWithoutThrowing(funcThatThrowsError);如果用户传递给函数runWithoutThrowing的参数抛出了一个错误对象, 上面的代码能正常捕获错误. 然后, 如果是抛出一个字符串, 就会碰到一些问题了:function runWithoutThrowing(func) {try {func();} catch (e) {console.log('There was an error, but I will not throw it.');console.log('The error\'s message was: ' + e.message)}}function funcThatThrowsString() {throw 'I am a String.';}runWithoutThrowing(funcThatThrowsString);现在第二个console.log会输出undefined. 这看起来不是很重要, 但如果你需要确保Error对象有一个特定的属性或者用另一种方式来处理Error对象的特定属性(例如Chai的throws断言的做法), 你就得做大量的工作来确保程序的正确运行.同时, 如果抛出的不是Error对象, 也就获取不到stack属性.Errors 也可以被作为其它对象, 你也不必抛出它们, 这也是为什么大多数回调函数把Errors 作为第一个参数的原因. 例如:const fs = require('fs');fs.readdir('/example/i-do-not-exist', function callback(err, dirs) {if (err instanceof Error) {// `readdir` will throw an error because that directory does not exist// We will now be able to use the error object passed by it in our callback functionconsole.log('Error Message: ' + err.message);console.log('See? We can use Errors without using try statements.');} else {console.log(dirs);}});最后, Error对象也可以用于rejected promise, 这使得很容易处理rejected promise:new Promise(function(resolve, reject) {reject(new Error('The promise was rejected.'));}).then(function() {console.log('I am an error.');}).catch(function(err) {if (err instanceof Error) {console.log('The promise was rejected with an error.');console.log('Error Message: ' + err.message);}});处理堆栈这一节是针对支持Error.captureStackTrace的运行环境, 例如Nodejs.Error.captureStackTrace的第一个参数是object, 第二个可选参数是一个function. Error.captureStackTrace会捕获堆栈信息, 并在第一个参数中创建stack属性来存储捕获到的堆栈信息. 如果提供了第二个参数, 该函数将作为堆栈调用的终点. 因此, 捕获到的堆栈信息将只显示该函数调用之前的信息.用下面的两个demo来解释一下. 第一个, 仅将捕获到的堆栈信息存于一个普通的对象之中:const myObj = {};function c() {}function b() {// Here we will store the current stack trace into myObjError.captureStackTrace(myObj);c();}function a() {b();}// First we will call these functionsa();// Now let's see what is the stack trace stored into myObj.stackconsole.log(myObj.stack);// This will print the following stack to the console:// at b (repl:3:7) <-- Since it was called inside B, the B call is the last entry in the stack // at a (repl:2:1)// at repl:1:1 <-- Node internals below this line// at realRunInThisContextScript (vm.js:22:35)// at sigintHandlersWrap (vm.js:98:12)// at ContextifyScript.Script.runInThisContext (vm.js:24:12)// at REPLServer.defaultEval (repl.js:313:29)// at bound (domain.js:280:14)// at REPLServer.runBound [as eval] (domain.js:293:12)// at REPLServer.onLine (repl.js:513:10)从上面的示例可以看出, 首先调用函数a(被压入堆栈), 然后在a里面调用函数b(被压入堆栈且在a之上), 然后在b中捕获到当前的堆栈信息, 并将其存储到myObj中. 所以, 在控制台输出的堆栈信息中仅包含了a和b的调用信息.现在, 我们给Error.captureStackTrace传递一个函数作为第二个参数, 看下输出信息:const myObj = {};function d() {// Here we will store the current stack trace into myObj// This time we will hide all the frames after `b` and `b` itselfError.captureStackTrace(myObj, b);}function c() {d();}function b() {c();}function a() {b();}// First we will call these functionsa();// Now let's see what is the stack trace stored into myObj.stackconsole.log(myObj.stack);// This will print the following stack to the console:// at a (repl:2:1) <-- As you can see here we only get frames before `b` was called// at repl:1:1 <-- Node internals below this line// at realRunInThisContextScript (vm.js:22:35)// at sigintHandlersWrap (vm.js:98:12)// at ContextifyScript.Script.runInThisContext (vm.js:24:12)// at REPLServer.defaultEval (repl.js:313:29)// at bound (domain.js:280:14)// at REPLServer.runBound [as eval] (domain.js:293:12)// at REPLServer.onLine (repl.js:513:10)// at emitOne (events.js:101:20)当将函数b作为第二个参数传给Error.captureStackTraceFunction时, 输出的堆栈就只包含了函数b调用之前的信息(尽管Error.captureStackTraceFunction是在函数d中调用的), 这也就是为什么只在控制台输出了a. 这样处理方式的好处就是用来隐藏一些与用户无关的内部实现细节.参考JavaScript Errors and Stack Traces in Depth【编辑推荐】1.盘点JavaScript函数的基本知识2.美观又实用,10款强大的开源Javascript图表库3.JavaScript 基本数据类型和引用类型的区别详解4. 6 个值得好好学习的JavaScript 框架5.怎样写一个能同时用于Node和浏览器的JavaScript包?6.JavaScript单线程& setTimeout定时器7.JavaScript 与Java、PHP 的比较。
javascript中的错误处理机制
本文由我司收集整编,推荐下载,如有疑问,请与我司联系javascript 中的错误处理机制2016/07/17 0 前面的话错误处理对于web 应用程序开发至关重要,不能提前预测到可能发生的错误,不能提前采取恢复策略,可能导致较差的用户体验。
由于任何javascript 错误都可能导致网页无法使用,因此作为开发人员,必须要知道何时可能出错,为什么会出错,以及会出什么错。
本文将详细介绍javascript 中的错误处理机制error 对象error 对象是包含错误信息的对象,是javascript 的原生对象。
当代码解析或运行时发生错误,javascript 引擎就会自动产生并抛出一个error 对象的实例,然后整个程序就中断在发生错误的地方console.log(t);//Uncaught ReferenceError: t is not defined ECMA-262 规定了error 对象包括两个属性:message 和name。
message 属性保存着错误信息,而name 属性保存错误类型//一般地,使用try-catch 语句来捕获错误try{ t;}catch(ex){ console.log(ex.message);//t is not defined console.log();//ReferenceError} 浏览器还对error 对象的属性做了扩展,添加了其他相关信息。
其中各浏览器厂商实现最多的是stack 属性,它表示栈跟踪信息(safari 不支持)try{ t;}catch(ex){ console.log(ex.stack);//@file:///D:/wamp/www/form.html:12:2} 当然,可以使用error()构造函数来创建错误对象。
如果指定message 参数,则该error对象将把它用做它的message 属性;若不指定,它将使用一个预定义的默认字符串作为该属性的值new Error();new Error(message); //一般地,使用throw 语句来抛出错误throw new Error(‘test’);//Uncaught Error: testthrow new Error();//Uncaught Errorfunction UserError(message) { this.message = message; = “UserError”;}UserError.prototype= new Error();UserError.prototype.constructor = UserError;throw new UserError(“errorMessage”);//Uncaught UserError: errorMessage 当不使用new 操作符,直接将Error()构造函数像一个函数一样调用时,它的行为和带。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
JavaScript中错误正确处理方式JavaScript的事件驱动范式增添了丰富的语言,也是让使用JavaScript编程变得更加多样化。
如果将浏览器设想为JavaScript的事件驱动工具,那么当错误发生时,某个事件就会被抛出。
理论上可以认为这些发生的错误只是JavaScript中的简单事件。
本文将会讨论客户端JavaScript中的错误处理。
主要介绍JavaScript中的易犯错误、错误处理、异步代码编写等内容。
下面就让我们一起看看如何正确处理JavaScript中的错误。
Demo演示本文中使用的demo可以在GitHub上找到,运行之后会是这样的页面:每个按钮都会引发一个“错误(Exception)”,同时这个错误会模拟出一个被抛出的异常TypeError。
下面是模块的定义:// scripts/error.jsfunction error() {var foo = {};return foo.bar();}首先,这个函数声明了一个空对象foo。
需要注意的是,bar( )未在任何地方定义。
接下来验证这个单元测试是否会引发“错误”:// tests/scripts/errorTest.jsit('throws a TypeError', function () {should.throws(error, TypeError);});这个单元测试在Mocha中,同时在Should.js中有测试声明。
Mocha是测试运行工具,而Should.js是断言库。
这个单元测试运行在Node上,不需要使用浏览器。
error( )定义一个空对象,然后尝试访问一个方法。
因为bar( )在对象内不存在,所以就会引发异常。
这种发生在像JavaScript这样的动态语言上的错误,每个人可能都会遇到!错误处理(一)通过以下代码,对上述错误进行处理:// scripts/badHandler.jsfunction badHandler(fn) {try {return fn();} catch (e) { }return null;}该处理程序将fn作为输入参数,然后fn在处理函数内部会被调用。
单元测试会体现出以上错误处理程序的作用:// tests/scripts/badHandlerTest.jsit('returns a value without errors', function() {var fn = function() {return 1;};var result = badHandler(fn);result.should.equal(1);});it('returns a null with errors', function() {var fn = function() {throw new Error('random error');};var result = badHandler(fn);should(result).equal(null);});如果出现问题,错误处理程序就会返回null。
fn( )回调函数可以指向一个合法的方法或错误。
以下的点击事件会继续进行事件处理:// scripts/badHandlerDom.js(function (handler, bomb) {var badButton = document.getElementById('bad');if (badButton) {badButton.addEventListener('click', function () {handler(bomb);console.log('Imagine, getting promoted for hiding mistakes');});}}(badHandler, error));这种处理方式在代码中隐藏了一个错误,并且很难发现。
隐藏的错误可能会花费好几个小时的调试时间。
尤其是在具有深度调用堆栈的多层解决方案中,这个错误会更难发现。
所以这是一种很差的错误处理方式。
错误处理(二)下面是另一个错误处理方式:// scripts/uglyHandler.jsfunction uglyHandler(fn) {try {return fn();} catch (e) {throw new Error('a new error');}}处理异常的方式如下所示:// tests/scripts/uglyHandlerTest.jsit('returns a new error with errors', function () {var fn = function () {throw new TypeError('type error');};should.throws(function () {uglyHandler(fn);}, Error);});以上对错误的处理程序有明显的改进。
在这里异常会调用堆栈进行冒泡。
同时错误会展开堆栈,这对调试非常有帮助。
除了抛出异常,解释器还会沿着栈寻找另外的处理。
这也带来了可以从堆栈顶部处理错误的可能。
但这还是一种较差的错误处理,需要我们从堆栈中一步步追溯原始的异常。
可以采用一种替代方案,用自定义的错误方式来结束这种较差的错误处理。
当你向错误中添加更多详细信息时,会让这种方法变得很有帮助。
例如:// scripts/specifiedError.js// Create a custom errorvar SpecifiedError = function SpecifiedError(message) { = 'SpecifiedError';this.message = message || '';this.stack = (new Error()).stack;};SpecifiedError.prototype = new Error();SpecifiedError.prototype.constructor = SpecifiedError;// scripts/uglyHandlerImproved.jsfunction uglyHandlerImproved(fn) {try {return fn();} catch (e) {throw new SpecifiedError(e.message);}}// tests/scripts/uglyHandlerImprovedTest.jsit('returns a specified error with errors', function () {var fn = function () {throw new TypeError('type error');};should.throws(function () {uglyHandlerImproved(fn);}, SpecifiedError);});指定的错误会添加更多详细信息并保留原始的错误消息。
有了这个改进,以上的处理不再是较差的处理方式了,而是一个清晰有用的方式。
经过了上面的处理,我们还收到了一个未处理的异常。
接下来让我们看看浏览器在处理错误时,有什么帮助。
展开堆栈处理异常的一种方式是在调用堆栈的顶部加入try...catch。
比如说:function main(bomb) {try {bomb();} catch (e) {// Handle all the error things}}但是,浏览器是事件驱动的, JavaScript中的异常也是一个事件。
发生异常时,解释器会暂停执行并展开:// scripts/errorHandlerDom.jswindow.addEventListener('error', function (e) {var error = e.error;console.log(error);});此事件处理程序会捕获任何执行上下文中发生的错误。
各个目标发生的错误事件会触发各种类型的错误。
这种集中在代码中的错误处理是非常激进的。
你可以使用菊花链处理方式来处理特定的错误。
如果你遵循SOLID原则,就可以采用具有单一目的错误处理方式。
这些处理程序可以随时进行注册,解释器会循环执行需要执行的处理程序。
代码库可以从try...catch块中释放出来,这也使得调试变得容易。
在JavaScript中,把错误处理当作事件处理很重要。
捕获堆栈在解决问题时,调用堆栈会非常有用,同时浏览器正好可以提供这些信息。
虽然堆栈属性不是标准的一部分,但是最新的浏览器已经可以查看这些信息了。
下面是在服务器上记录错误的示例:// scripts/errorAjaxHandlerDom.jswindow.addEventListener('error', function (e) {var stack = e.error.stack;var message = e.error.toString();if (stack) {message += '\n' + stack;}var xhr = new XMLHttpRequest();xhr.open('POST', '/log', true);// Fire an Ajax request with error detailsxhr.send(message);});每个错误处理都具有单个目的,这样可以保持代码的DRY原则(目的单一,不要重复自己原则)。
在浏览器中,需要将事件处理添加到DOM。
这意味着如果你正在构建第三方库,那么你的事件会与客户端代码共存。
window.addEventListener( )会帮你进行处理,同时也不会抹去现有的事件。
这是服务器上日志的截图:可以通过命令提示符查看日志,但是Windows上,日志是非动态的。
通过日志可以清楚的看到,具体什么情况触发了什么错误。
在调试时调用堆栈也会非常有用,所以不要低估调用堆栈的作用。
在JavaScript中,错误信息仅适用于单个域。
因为在使用来自不用域的脚本时,将会看不到任何错误详细信息。
一种解决方案是重新抛出错误,同时保留错误消息:try {return fn();} catch (e) {throw new Error(e.message);}一旦重新启动了错误备份,全局错误处理程序就会完成其余的工作。