onerror 事件本身不自动循环，但在处理函数中动态加载新脚本并出错时可能形成链式错误；需防重、限重试、禁用 document.write，并用元素级 error 监听捕获资源加载错误。
onerror 事件能否触发循环调用
不能自动循环，onerror 本身是一次性监听器；但若在 onerror 处理函数里又动态加载了新脚本（比如 fallback 重试），而新脚本又出错，就可能形成人为的「链式错误触发」，看起来像循环。
常见误操作：在 onerror 回调中直接 document.write 或反复 appendChild 同一个失败的 <script></script> 标签，没加防重逻辑，导致无限加载→无限报错→浏览器卡顿甚至崩溃。
- 每次加载新脚本前检查是否已尝试过（可用
Set记录src） - 限制重试次数（例如最多 2 次），超限后静默丢弃或上报为「加载失败」
- 避免在错误回调中使用
document.write（已废弃且会清空页面）
如何用 onerror 捕获并记录脚本加载错误
window.onerror 不捕获资源加载错误（如 <script src="xxx"></script> 404），必须用 <script></script> 元素自身的 onerror 属性或 addEventListener('error')。
推荐绑定到具体元素上，更精准：
立即学习“前端免费学习笔记（深入）”；
<script src="/js/main.js" onerror="handleScriptError(this)"></script>
<script>
function handleScriptError(el) {
const url = el.src || el.dataset.src;
console.error('Script load failed:', url);
// 上报逻辑：fetch('/log', { method: 'POST', body: JSON.stringify({ type: 'script_error', url }) })
}
</script>
-
this在内联onerror中指向当前<script></script>元素，可读取src - 不要依赖
event参数——内联写法中它不自动传入；要用addEventListener才有标准Event对象 - 如果脚本是动态插入的，记得在
insertBefore或appendChild前就绑定error监听器
为什么 addEventListener('error') 比 onerror 属性更可靠
onerror 属性只能绑定一个处理函数，后赋值会覆盖前一个；而 addEventListener 支持多次绑定、解绑、细粒度控制。
动态脚本加载典型写法：
function loadScript(src) {
const script = document.createElement('script');
script.src = src;
script.addEventListener('error', (e) => {
console.warn('Failed to load:', src);
// 可在此触发降级逻辑，如加载 CDN 备份地址
if (src.includes('cdn-a')) {
loadScript(src.replace('cdn-a', 'cdn-b'));
}
});
document.head.appendChild(script);
}
- 注意：必须在
appendChild之前绑定error监听器，否则可能错过错误事件 -
error事件不会冒泡，所以不能委托到document或head上监听所有脚本错误 - 某些低版本 iOS Safari 对
error事件支持不稳定，建议加兜底超时检测（setTimeout+clearTimeout）
上报错误时容易漏掉的关键信息
只记 src 不够。真实排障需要上下文：触发时机、环境、是否重复发生。
- 加上
document.currentScript?.src（当前执行脚本）辅助定位执行链 - 记录
navigator.userAgent和location.href，便于复现 - 对同一
src的错误做频率限制（如 1 分钟内相同错误只上报 1 次），避免日志刷屏 - 注意跨域脚本的
error事件只有type和target，没有堆栈——需确保 CDN 脚本加了crossorigin="anonymous"属性
跨域脚本没配 crossorigin，error 事件里连 target.src 都可能被浏览器屏蔽，只剩一个空事件对象——这点最容易被忽略。
