前端错误集合
⚠️ 一、核心运行时错误类型
SyntaxError（语法错误）
原因：代码不符合 JavaScript 语法规则（如变量命名不合规、括号缺失等）
案例：var1a = 10;（数字开头的变量名）或 console.log("abc")=1;
ReferenceError（引用错误）
原因：引用未定义的变量或对象属性
案例：console.log(undeclaredVar); 或对函数运行结果赋值 fn() = 1;
TypeError（类型错误）
原因：操作类型不匹配（如调用非函数、读取 null/undefined 属性）
经典场景：
null.find(...)（后端返回 null 但前端未校验）
Cannot destructure property 'name' of 'undefined'（解构未定义对象）
RangeError（范围错误）
原因：数值超出有效范围（如递归栈溢出）
URIError & EvalError
较少见：URL 解析异常或 eval() 使用不当触发
🌐 二、异步与资源加载错误
异步函数错误
setTimeout/Promise 内错误需通过以下方式捕获：
// Promise 未捕获异常window.addEventListener('unhandledrejection', e => { console.error('Unhandled Rejection:', e.reason);});静态资源加载失败（图片、脚本等）
捕获方法：全局监听
error事件并过滤资源类型：
window.addEventListener('error', e => { if (e.target.tagName === 'IMG' || e.target.tagName === 'SCRIPT') { reportError({ type: 'resource', url: e.target.src }); }}, true); // 注意使用捕获阶段跨域脚本错误（Script error）
解决：为
<script>添加crossorigin属性，服务端设置Access-Control-Allow-Origin
⚙️ 三、框架级错误处理
🔍 四、调试与排查技巧
幽灵 Bug 定位
通过路由路径、CSS 样式或全局关键字搜索代码位置，结合控制台报错文件定位
控制台分析步骤：
检查 Console 报错 → 查看 Network 请求状态 → 验证数据逻辑（非空判断）→ 分段注释代码调试
SourceMap 映射：
生产环境通过 SourceMap 将压缩代码映射回源码，精确追踪错误位置
📊 五、错误监控方案（2025 年推荐）
性能 + 错误一体化监控
采集指标：页面加载时间、JS 错误率、资源失败率、API 错误率
上报工具：
开源方案：Sentry（支持 SourceMap 解析、错误聚合）
自建方案：
navigator.sendBeacon()或new Image().src上报（兼容性好）业务级监控：
关键流程转化率、白屏率、用户行为轨迹分析
附：常见陷阱案例
Cannot read properties of null (reading 'find')：后端返回null未处理，需前置校验Array.isArray()
Uncaught TypeError: Cannot assign to read only property 'exports'：CommonJS 与 ESM 混用，改用import或调整 Webpack 配置
此集合覆盖了从基础语法到微前端架构的调试需求，结合自动化监控可显著提升线上问题响应速度