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