JavaScript内置Error子类型包括SyntaxError、ReferenceError、TypeError等，用于区分错误场景；结合try-catch、全局事件监听及React错误边界（如getDerivedStateFromError和componentDidCatch），可实现分层错误处理；通过自定义错误类（如ValidationError）和错误上报，提升程序健壮性与用户体验。
JavaScript 的 Error 对象有多个内置子类型，每种对应不同错误场景。在开发中，结合这些类型和错误边界机制，可以有效提升程序健壮性。
常见的 Error 子类型
JavaScript 提供了多种继承自 Error 的内置异常类型，用于区分错误来源：
- Error：基础错误类型，通常用于自定义错误。
- SyntaxError：代码语法错误，如拼写错误、括号不匹配等，通常在解析阶段抛出。
- ReferenceError：引用未声明的变量时触发。
- TypeError：变量类型不符合操作要求，例如调用非函数值。
- RangeError：数值超出允许范围，如递归过深或数组长度非法。
- URIError：URI 相关函数使用不当，如错误使用 decodeURIComponent。
- EvalError：与 eval() 函数相关的错误（现在很少使用）。
- InternalError（非标准）：JavaScript 引擎内部错误，如栈溢出。
通过判断 error instanceof TypeError 等方式，可以在 catch 块中做差异化处理。
前端框架中的错误边界（React）
在 React 中，错误边界是一种 React 组件，能捕获其子组件树中的 JavaScript 错误，记录错误信息并展示降级 UI。
立即学习“Java免费学习笔记（深入）”；
- 使用 static getDerivedStateFromError() 渲染备用界面。
- 使用 componentDidCatch() 记录错误信息。
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; }
static getDerivedStateFromError(error) { return { hasError: true }; }
componentDidCatch(error, errorInfo) { console.error("Error caught by boundary:", error, errorInfo); }
render() { if (this.state.hasError) { return
将该组件包裹可能出错的子组件，即可防止整个应用崩溃。
原生 JavaScript 的错误处理策略
在非框架环境或 Node.js 中，合理使用 try-catch 和全局事件监听可提升容错能力。
- 同步代码使用 try...catch 捕获异常。
- 异步操作中，在 Promise 链末尾添加 .catch() 或使用 async/await 配合 try-catch。
- 监听全局错误事件：
- window.addEventListener('error') 捕获脚本错误。
- window.addEventListener('unhandledrejection') 处理未捕获的 Promise 拒绝。 - 生产环境中，将错误上报至监控服务（如 Sentry），便于追踪。
注意：跨域脚本错误会显示为 Script error.，需设置 CORS 头部或使用 crossorigin 属性获取详细信息。
自定义错误类型与统一处理
可根据业务需求扩展 Error 类，增强错误语义。
class ValidationError extends Error { constructor(message) { super(message); this.name = "ValidationError"; } }在 catch 块中通过 error.name 或 instanceof 判断具体类型，执行相应逻辑，比如表单验证失败时不中断流程，仅提示用户。
基本上就这些。合理利用 Error 类型体系和分层捕获机制，能让程序更稳定。
