前端错误2
⚠️ 一、错误分类
运行时错误
类型错误（TypeError）：操作数据类型不符（如调用非函数、访问undefined属性）
引用错误（ReferenceError）：使用未定义变量或函数
语法错误（SyntaxError）：代码不符合JS语法规则（如括号缺失）
范围错误（RangeError）：操作超出有效范围（如递归栈溢出）
资源加载错误
CSS/JS文件加载失败（404或网络中断）
图片、字体等静态资源加载异常
异步错误
未处理的Promise拒绝（Unhandled Promise Rejection）
Async/Await中的异常未捕获7
Fetch/XHR请求失败（如跨域限制、超时）
渲染层错误
样式兼容性问题（浏览器差异导致布局错乱）
事件绑定冲突（如冒泡引发意外行为）
🔍 二、错误捕获方法
💡 关键技巧：跨域脚本需添加
crossorigin属性捕获详细错误信息
🛠️ 三、调试与解决策略
控制台定位法
使用
console.trace()追踪调用栈利用Source Map还原压缩代码错误位置
二分注释法
逐步注释代码块，缩小问题范围（适用于无报错信息场景）事件冒泡阻断
使用@click.stop（Vue）或e.stopPropagation()阻止事件冒泡导致的连锁错误样式隔离实践
避免全局CSS污染（采用CSS Modules或Scoped CSS）
类名修改时同步更新HTML与CSS（防止选择器失效）
⚙️ 四、预防机制
自动化测试：单元测试覆盖核心逻辑（如Jest）
代码审查：强制PR审核流程（避免未测试代码上线）
错误监控：接入Sentry/Fundebug等实时报警系统
依赖管理：锁定npm版本（防止依赖更新引发兼容性问题）
案例启示：某项目因CSS类名更改未同步HTML导致页面布局崩溃，通过代码审查流程优化解决