javascript中可通过监听error事件捕获资源加载失败，但该事件不冒泡且无法获取http状态码；需在插入dom前绑定、注意缓存与跨域限制，并推荐封装带重试和上报的加载器。
JavaScript中可以通过监听元素的error事件来捕获资源加载失败（如图片、脚本、样式表等）的情况，但需注意该事件**不冒泡**，且某些场景下存在兼容性或触发限制。
图片加载失败的error监听
图片是最常见的需要监听加载失败的资源。直接在<img>标签上绑定onerror属性或使用addEventListener均可，推荐后者以保持逻辑统一：
- 使用内联
onerror：简单直接，适合单图兜底，例如：<img src="logo.png" onerror="this.src='fallback.png'"> - 使用
addEventListener('error')：更灵活，支持复用处理逻辑，注意需在src赋值前绑定，否则可能错过同步错误（如404立即返回） - 若图片已缓存失败状态，再次设置相同
src不会重新触发error，可先设为空字符串再重设
动态创建资源的错误捕获
通过document.createElement插入的<script></script>、<link>或<img>，必须在插入DOM前绑定error事件：
-
<script></script>标签：监听error可发现CDN挂掉或路径错误，但无法获取具体HTTP状态码 -
<link rel="stylesheet">：部分浏览器（如Chrome）支持error事件，但Firefox旧版本可能不触发，建议配合load事件做双重判断 - 动态
img：绑定后立即赋src，避免竞态；可结合loading="lazy"，但懒加载图片的error仍可正常捕获
error事件的局限与绕过方案
error事件本身能力有限，不能提供HTTP状态、响应头或失败原因，且跨域资源（如CDN图片）可能因CORS策略导致error静默或信息受限：
- 无法区分404、500、网络中断或CORS拒绝，只能确认“加载未成功”
- 跨域脚本/图片触发
error时，event.target仅暴露有限信息（如src），无详细错误堆栈 - 替代思路：对关键资源用
fetch()预检（需同源或CORS允许），根据HTTP状态码主动控制加载逻辑 - 监控层面：可结合
window.addEventListener('error')捕获全局JS执行错误，但它不涵盖资源加载失败
实用的错误处理模式
生产环境建议封装可复用的资源加载器，内置降级、重试和上报机制：
- 单次加载失败后自动切换备用URL（如主CDN → 备CDN → 本地）
- 限制重试次数（如最多2次），避免无限循环；每次重试可加短延时
- 记录失败资源URL、标签类型、时间戳，上报至监控系统（注意脱敏用户隐私字段）
- 对非关键图片，可降级为占位符+文字提示；对核心脚本失败，应触发友好错误页或降级交互
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
