前端错误集合

⚠️ ‌一、核心运行时错误类型‌

‌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); // 注意使用捕获阶段

1. ‌跨域脚本错误（Script error）‌

• ‌解决‌：为 <script> 添加 crossorigin 属性，服务端设置 Access-Control-Allow-Origin

⚙️ ‌三、框架级错误处理

🔍 ‌四、调试与排查技巧‌

1. ‌幽灵 Bug 定位‌

• 通过路由路径、CSS 样式或全局关键字搜索代码位置，结合控制台报错文件定位 

2. ‌控制台分析步骤‌：

• 检查 Console 报错 → 查看 Network 请求状态 → 验证数据逻辑（非空判断）→ 分段注释代码调试 

3. ‌SourceMap 映射‌：

• 生产环境通过 SourceMap 将压缩代码映射回源码，精确追踪错误位置 

📊 ‌五、错误监控方案（2025 年推荐）‌

1. ‌性能 + 错误一体化监控‌

• 采集指标：页面加载时间、JS 错误率、资源失败率、API 错误率 

2. ‌上报工具‌：

• ‌开源方案‌：Sentry（支持 SourceMap 解析、错误聚合）

• ‌自建方案‌：navigator.sendBeacon() 或 new Image().src 上报（兼容性好）

3. ‌业务级监控‌：

• 关键流程转化率、白屏率、用户行为轨迹分析 

‌附：常见陷阱案例‌

• ‌Cannot read properties of null (reading 'find')‌：后端返回 null 未处理，需前置校验 Array.isArray()

• ‌Uncaught TypeError: Cannot assign to read only property 'exports'‌：CommonJS 与 ESM 混用，改用 import 或调整 Webpack 配置 

此集合覆盖了从基础语法到微前端架构的调试需求，结合自动化监控可显著提升线上问题响应速度