JavaScript 错误对象有哪些？内置类型和自定义异常怎么用？

lichen360
前端
5天前
15热度
0评论

在JavaScript开发中，错误处理是代码健壮性的生命线。据统计，超过60%的线上故障源于未正确处理异常。无论是语法错误导致的页面白屏，还是运行时错误引发的功能中断，理解Error对象体系和异常处理机制都是现代Web开发的必备技能。本文将从7大内置错误类型到企业级自定义异常方案，为您构建完整的错误处理知识体系。

一、JavaScript错误分类与核心机制

1.1 两大基础错误类型

语法错误（Syntax Errors）：

代码编译阶段被解析器检测到
典型表现：缺少括号、错误符号等
无法被常规try-catch捕获
React项目中可通过ErrorBoundary捕获

运行时错误（Runtime Errors）：

代码执行阶段触发
常见于变量未声明、类型错误等场景
可通过try-catch捕获处理

1.2 错误处理特性差异

特性	语法错误	运行时错误
捕获方式	ErrorBoundary	try-catch/window.onerror
触发时机	代码解析时	代码执行时
典型场景	let x = ((10);	undefinedVariable()

二、7大内置错误类型深度解析

2.1 基础错误对象

Error：

所有错误类型的基类
包含name/message/stack核心属性

2.2 具体错误类型

SyntaxError：

const obj = { x: 5,;  // 缺少属性值

TypeError：

null.toString();  // Cannot read properties of null

ReferenceError：

console.log(undeclaredVar);  // 引用未声明变量

RangeError：

new Array(到1);  // 无效数组长度

URIError：

decodeURI('%');  // URI格式异常

EvalError：

new eval();  // eval()使用不当

AggregateError：

Promise.any([rejectedPromise]);  // 多错误聚合

三、自定义异常开发实践

3.1 创建自定义错误类

class APIError extends Error {
  constructor(code, message) {
    super(message);
    this.name = "APIError";
    this.code = code;
    this.stack = (new Error()).stack;
  }
}

3.2 企业级异常处理方案

错误编码体系：建立10xxx系统错误/20xxx业务错误编码规范
错误边界处理：React ErrorBoundary + 全局window.onerror监控
上下文信息增强：在错误对象中附加请求参数、用户信息等元数据

3.3 广告投放异常处理案例

function executeBatch(batch) {
  try {
    validateAdData(batch);
    sendToServer(batch);
  } catch (e) {
    throw new AdException({
      code: 5001,
      batchId: batch.id,
      originalError: e
    });
  }
}

四、错误处理最佳实践

4.1 黄金法则

及时处理：每个异步操作后检查错误状态
精准捕获：避免空catch块导致的错误吞没
分级处理：区分致命错误与非致命错误

4.2 调试技巧

利用Error.stack定位问题源头
通过source-map解析生产环境错误堆栈
使用Sentry/NewRelic实现错误监控

4.3 性能优化

避免在循环体内使用try-catch
错误日志异步上报机制
开发环境启用详细日志，生产环境精简错误信息

总结：构建健壮的异常处理体系

从基础错误类型认知到自定义异常开发，优秀的错误处理策略需要：理解JavaScript错误机制本质、建立类型化错误体系、实施分级处理策略。建议将错误处理代码占比控制在项目总代码量的15%到20%，这是保证应用健壮性的关键指标。记住：没有被妥善处理的错误，终将成为线上系统的不定时炸弹。