window.onerror无法捕获CSS加载失败，因其触发的是LINK元素级error事件且不冒泡，必须用window.addEventListener('error', handler, true)监听捕获阶段并过滤rel="stylesheet"的LINK标签。
直接结论：不能靠 window.onerror，必须用 window.addEventListener('error', handler, true) 捕获，并过滤 LINK 元素，且需注意跨域、空 href、MIME 类型等隐性拦截点。
为什么 window.onerror 抓不到 CSS 加载失败？
因为 CSS 文件加载失败触发的是 DOM 元素级的 error 事件，不是 JS 执行错误。它不冒泡到 window，所以 window.onerror 完全无感知。你看到控制台报 “Failed to load resource: the server responded with a status of 404”，但监听函数压根不会执行——这不是漏报，是根本没进监听通道。
怎么写才能真正捕获 LINK 标签的 CSS 加载失败？
核心是三点：监听捕获阶段、判断元素类型、提取有效地址。下面这段代码能稳定触发：
window.addEventListener('error', function (event) {
const target = event.target;
if (target && target.tagName === 'LINK' && target.rel === 'stylesheet') {
const href = target.href || '';
// 排除空 href 或内联 style（避免误报）
if (href && !href.startsWith('data:text/css')) {
console.log('CSS 加载失败:', href);
// sendReport({ type: 'resource_error', tag: 'LINK', detail: href });
}
}
}, true);
关键细节：
立即学习“前端免费学习笔记（深入）”；
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
true是必须的，否则捕获不到 - 只认
rel="stylesheet"的LINK，排除rel="icon"等干扰 - 检查
href是否为空或 data URL，否则页面里写个<link rel="stylesheet">就会误报 - 不要依赖
event.message，它对资源错误基本为空或不可靠
CSS 失败时浏览器到底发生了什么？
失败不一定等于 404。常见真实场景包括：
-
403 Forbidden：服务器拒绝读取 CSS 文件（如 Nginx 未开放.cssMIME 类型或权限配置错误） -
404 Not Found：路径写错、构建产物未生成、CDN 同步延迟 -
net::ERR_CONNECTION_REFUSED：本地开发时后端挂了，但 HTML 已加载，LINK尝试请求失败 - 响应头
Content-Type !== 'text/css'：比如服务器返回了text/plain，浏览器会静默丢弃，仍触发error事件 - 跨域且未配
crossorigin：如果 CSS 域名不同，又没加crossorigin属性，错误信息会被浏览器屏蔽（target.href可读，但event.filename等为空）
这些情况都会走同一个 error 事件通道，但上报后需要结合状态码（需服务端配合）或网络面板人工验证才能归因。
容易被忽略的兼容与性能坑
实际部署时这几个点常导致监控失效：
- 某些老版本 iOS Safari 对
LINK的error事件支持不稳定，建议 fallback 到定时比对performance.getEntriesByType('resource')和document.querySelectorAll('link[rel="stylesheet"]')的差集 - 监听函数里别做重操作（如深克隆
event或同步发 XHR），否则可能阻塞样式解析，引发 FOUC 或布局抖动 - 如果用了微前端，子应用动态插入的
LINK标签，其error事件仍会被主应用的全局监听捕获——前提是监听在主应用生命周期内已注册 -
sendBeacon上报最稳妥，但要注意：若用户快速关闭标签页，部分低版本浏览器可能丢弃 beacon 请求；可加 localStorage 缓存 + 页面卸载前补发
最麻烦的其实是“失败但没报错”：比如 CSS 文件存在、返回 200，但内容是 HTML 错误页（如 502 时 Nginx 返回的默认页），浏览器不会触发 error 事件，只能靠后续样式渲染异常或人工巡检发现。
