JavaScript中错误异常的分析（附示例）
本篇文章给大家带来的内容是关于JavaScript中错误异常的分析（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
我的建议是不要隐藏错误，勇敢地抛出来。没有人会因为代码出现 bug 导致程序崩溃而羞耻，我们可以让程序中断，让用户重来。错误是无法避免的，如何去处理它才是最重要的。
JavaScript 提供一套错误处理机制，错误是干扰程序正常流程的非正常的事故。而没人可以保持程序没有 bug，那么上线后遇到特殊的 bug，如何更快的定位问题所在呢？这就是我们这个专题需要讨论的问题。
下面会从 JavaScript Error 基础知识、如何拦截和捕获异常、如何方便的在线上报错误等方面来叙述，本人也是根据网上的知识点进行了一些总结和分析（我只是互联网的搬运工，不是创造者），如果有什么错漏的情况，请在 issue 上狠狠的批评我。
这个专题目前是针对浏览器的，还没考虑到 node.js，不过都是 JavaScript Es6 语法，大同小异。
什么时候 JavaScript 会抛出错误呢？
一般分为两种情况：
JavaScript 自带错误
开发者主动抛出的错误
JavaScript 引擎自动抛出的错误
大多数场景下我们遇到的错误都是这类错误。如果发生Javscript 语法错误、代码引用错误、类型错误等，JavaScript 引擎就会自动触发此类错误。如下一些场景：
场景一
console.log(a.notExited) // 浏览器会抛出 Uncaught ReferenceError: a is not defined
场景二
const a; // 浏览器抛出 Uncaught SyntaxError: Missing initializer in const declaration
语法错误，浏览器一般第一时间就抛出错误，不会等到执行的时候才会报错。
场景三
let data;
data.forEach(v=>{})
// Uncaught TypeError: Cannot read property 'forEach' of undefined手动抛出的错误
一般都是类库开发的自定义错误异常（如参数等不合法的错误异常抛出）。或者重新修改错误 message 进行上报，以方便理解。
场景一
function sum(a,b){
if(typeof a !== 'number') {
throw TypeError('Expected a to be a number.');
}
if(typeof b !== 'number') {
throw TypeError('Expected b to be a number.');
}
return a + b;
}
sum(3,'d');
// 浏览器抛出 uncaught TypeError: Expected b to be a number.场景二
当然我们不一定需要这样做。
let data;
try {
data.forEach(v => {});
} catch (error) {
error.message = 'data 没有定义，data 必须是数组。';
error.name = 'DataTypeError';
throw error;
}如何创建 Error 对象？
创建语法如下：
new Error([message[,fileName,lineNumber]])
省略 new 语法也一样。
其中fileName 和 lineNumber 不是所有浏览器都兼容的，谷歌也不支持，所以可以忽略。
Error 构造函数是通用错误类型，除了 Error 类型，还有 TypeError、RangeError 等类型。
Error 实例
这里列举的都是 Error 层的原型链属性和方法，更深层的原型链的继承属性和方便不做说明。一些有兼容性的而且不常用的属性和方法不做说明。
console.log(Error.prototype)
// 浏览器输出 {constructor: ƒ, name: "Error", message: "", toString: ƒ}其他错误类型构造函数是继承 Error，实例是一致的。
属性
Error.prototype.message
错误信息， Error("msg").message === "msg"。
Error.prototype.name
错误类型(名字)， Error("msg").name === "Error”。如果是 TypeError，那么 name 为 TypeError。
Error.prototype.stack
Error 对象作为一个非标准的栈属性提供了一种函数追踪方式。无论这个函数被被调用，处于什么模式，来自于哪一行或者哪个文件，有着什么样的参数。这个栈产生于最近一次调用最早的那次调用，返回原始的全局作用域调用。
这个不是规范，存在兼容性。经测试，谷歌、火狐、Edge、safar 都支持此特性(都是在最新的版本下测试 2019-04-02)，IE 不支持。
方法
Error.prototype.constructor
Error.prototype.toString
返回值格式为 ${name}: ${message}。
常用 Error 类型
除了通用的 Error 构造函数外，JavaScript还有常见的 5 个其他类型的错误构造函数。
TypeError
创建一个 Error 实例，表示错误的原因：变量或参数不属于有效类型。
throw TypeError("类型错误");
// Uncaught TypeError: 类型错误RangeError
创建一个 Error 实例，表示错误的原因：数值变量或参数超出其有效范围。
throw RangeError("数值超出有效范围");
// Uncaught RangeError: 数值超出有效范围ReferenceError
创建一个 Error 实例，表示错误的原因：无效引用。
throw ReferenceError("无效引用");
// Uncaught ReferenceError: 无效引用SyntaxError
创建一个 Error 实例，表示错误的原因：语法错误。这种场景很少用，除非类库定义了新语法(如模板语法)。
throw SyntaxError("语法错误");
// Uncaught SyntaxError: 语法错误URIError
创建一个 Error 实例，表示错误的原因：涉及到 uri 相关的错误。
throw URIError("url 不合法");
// Uncaught RangeError: url 不合法自定义 Error 类型
自定义新的 Error 类型需要继承 Error ，如下自定义 CustomError：
function CustomError(...args){
class InnerCustomError extends Error {
name = "CustomError";
}
return new InnerCustomError(...args);
}继承 Error 后，我们只需要对 name 做重写，然后封装成可直接调用的函数即可。
如何拦截 JavaScript 错误？
既然没人能保证 web 应用不会出现 bug，那么出现异常报错时，如何拦截并进行一些操作呢？
try…catch… 拦截
这是拦截 JavaScript 错误，拦截后，如果不手动抛出错误，这个错误将静默处理。平常写代码如果我们知道某段代码可能会出现报错问题，就可以使用这种方式。如下：
const { data } = this.props;
try {
data.forEach(d=>{});
// 如果 data 不是数组就会报错
} catch(err){
console.error(err);
// 这里可以做上报处理等操作
}一些使用方式
十分不友好的处理方式
try...catch... 使用需要注意，try…catch… 后，错误会被拦截，如果不主动抛出错误，那么无法知道报错位置。如下面的处理方式就是不好的。
function badHandler(fn) {
try {
return fn();
} catch (err) { /**noop，不做任何处理**/ }
return null;
}
badHandler();这样 fn 回调发送错误后，我们无法知道错误是在哪里发生的，因为已经被 try…catch 了，那么如何解决这个问题呢？
相对友好但糟糕的处理方式
function CustomError(...args){
class InnerCustomError extends Error {
name = "CustomError";
}
return new InnerCustomError(...args);
}
function uglyHandlerImproved(fn) {
try {
return fn();
} catch (err) {
throw new CustomError(err.message);
}
return null;
}
badHandler();现在，这个自定义的错误对象包含了原本错误的信息，因此变得更加有用。但是因为再度抛出来，依然是未处理的错误。
try…catch… 可以拦截异步错误吗？
这个也要分场景，也看个人的理解方向，首先理解下面这句话：
try…catch 只会拦截当前执行环境的错误，try 块中的异步已经脱离了当前的执行环境，所以 try…catch… 无效。
setTimeout 和 Promise 都无法通过 try…catch 捕获到错误，指的是 try 包含异步（非当前执行环境），不是异步包含 try（当前执行环境）。异步无效和有效 try…catch 如下：
setTimeout
这个无效：
try {
setTimeout(() => {
data.forEach(d => {});
});
} catch (err) {
console.log('这里不会运行');
}下面的 try…catch 才会有效：
setTimeout(() => {
try {
data.forEach(d => {});
} catch (err) {
console.log('这里会运行');
}
});Promise
这个无效：
try {
new Promise(resolve => {
data.forEach(d => {});
resolve();
});
} catch (err) {
console.log('这里不会运行');
}下面的 try…catch 才会有效：
new Promise(resolve => {
try {
data.forEach(d => {});
} catch (err) {
console.log('这里会运行');
}
});小结
不是所有场景都需要 try…catch… 的，如果所有需要的地方都 try…catch，那么代码将变得臃肿，可读性变差，开发效率变低。那么我需要统一获取错误信息呢？有没有更好的处理方式？当然有，后续会提到。
Promise 错误拦截
Promise.prototype.catch 可以达到 try…catch 一样的效果，只要是在 Promise 相关的处理中报错，都会被 catch 到。当然如果你在相关回调函数中 try…catch，然后做了静默提示，那么也是 catch 不到的。
如下会被 catch 到：
new Promise(resolve => {
data.forEach(v => {});
}).catch(err=>{/*这里会运行*/})下面的不会被 catch 到：
new Promise(resolve => {
try {
data.forEach(v => {});
}catch(err){}
}).catch(err=>{/*这里不会运行*/})Promise 错误拦截，这里就不详细说了，如果你看懂了 try…catch，这个也很好理解。
setTimeout 等其他异步错误拦截呢？
目前没有相关的方式直接拦截 setTimeout 等其他异步操作。
如果要拦截 setTimeout 等异步错误，我们需要在异步回调代码中处理，如：
setTimeout(() => {
try {
data.forEach(d => {});
} catch (err) {
console.log('这里会运行');
}
});这样可以拦截到 setTimeout 回调发生的错误，但是如果是下面这样 try…catch 是无效的：
try {
setTimeout(() => {
data.forEach(d => {});
});
} catch (err) {
console.log('这里不会运行');
}如何获取 JavaScript 错误信息？
你可以使用上面拦截错误信息的方式获取到错误信息。但是呢，你要每个场景都要去拦截一遍吗？首先我们不确定什么地方会发生错误，然后我们也不可能每个地方都去拦截错误。
不用担心，JavaScript 也考虑到了这一点，提供了一些便捷的获取方式(不是拦截，错误还是会终止程序的运行，除非主动拦截了)。
window.onerror 事件获取错误信息
onerror 事件无论是异步还是非异步错误（除了 Promise 错误），onerror 都能捕获到运行时错误。
需要注意一下几点：
window.onerror 函数只有在返回 true 的时候，异常才不会向上抛出，否则即使是知道异常的发生控制台还是会显示 Uncaught Error: xxxxx。如果使用 addEventListener，event.preventDefault() 可以达到同样的效果。
window.onerror 是无法捕获到网络异常的错误、或
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
Windows Update 更新提示Error 0x8024401c错误的解决方法
Jun 08, 2024 pm 12:18 PM
目录解决方法一解决方法二一、删除Windows更新的临时文件二、修复受损的系统文件三、查看并修改注册表项四、关闭网卡IPv6五、运行WindowsUpdateTroubleshootor工具进行修复六、关闭防火墙和其它相关的杀毒软件。七、关闭WidowsUpdate服务。解决方法三解决方法四华为计算机Windows更新出现“0x8024401c”报错问题现象问题原因解决方案仍未解决？最近web服务器因为系统漏洞需要更新，登录服务器之后，更新提示错误代码0x8024401c解决方法一
C++ 函数异常与多线程：并发环境下的错误处理
May 04, 2024 pm 04:42 PM
C++中函数异常处理对于多线程环境尤为重要，以确保线程安全和数据完整性。通过try-catch语句，可以在出现异常时捕获和处理特定类型的异常，以防止程序崩溃或数据损坏。
C++ 异常处理如何支持自定义错误处理例程？
Jun 05, 2024 pm 12:13 PM
C++异常处理允许创建自定义错误处理例程，通过抛出异常并使用try-catch块捕捉异常来处理运行时错误。1.创建一个派生自exception类的自定义异常类并覆盖what()方法；2.使用throw关键字抛出异常；3.使用try-catch块捕捉异常并指定可以处理的异常类型。
Java函数中递归调用与异常处理有何关系？
May 03, 2024 pm 06:12 PM
递归调用中的异常处理：限制递归深度：防止堆栈溢出。使用异常处理：使用try-catch语句处理异常。尾递归优化：避免堆栈溢出。
C++ Lambda 表达式如何进行异常处理？
Jun 03, 2024 pm 03:01 PM
C++Lambda表达式中的异常处理没有自己的作用域，默认不捕获异常。要捕获异常，可以使用Lambda表达式捕获语法，它允许Lambda表达式捕获其定义范围内的变量，从而在try-catch块中进行异常处理。
C++ 技术中的异常处理：如何在多线程环境中正确处理异常？
May 09, 2024 pm 12:36 PM
在多线程C++中，异常处理遵循以下原则：及时性、线程安全和明确性。实战中，可以通过使用mutex或原子变量来确保异常处理代码线程安全。此外，还要考虑异常处理代码的重入性、性能和测试，以确保其在多线程环境中安全有效地运行。
PHP异常处理：通过异常追踪了解系统行为
Jun 05, 2024 pm 07:57 PM
PHP异常处理：通过异常追踪了解系统行为异常是PHP用于处理错误的机制，由异常处理程序处理异常。异常类Exception代表一般异常，而Throwable类代表所有异常。使用throw关键字抛出异常，并使用try...catch语句定义异常处理程序。实战案例中，通过异常处理捕获并处理calculate()函数可能抛出的DivisionByZeroError，确保应用程序在出现错误时也能优雅地失败。
您如何在PHP中有效处理异常（尝试，捕捉，最后，投掷）？
Apr 05, 2025 am 12:03 AM
在PHP中，异常处理通过try,catch,finally,和throw关键字实现。1)try块包围可能抛出异常的代码；2)catch块处理异常；3)finally块确保代码始终执行；4)throw用于手动抛出异常。这些机制帮助提升代码的健壮性和可维护性。
