核心是组合window.onerror（捕获同步JS错误）、unhandledrejection（捕获未处理Promise拒绝）和error事件（捕获资源加载失败），并过滤重复与跨域噪音，框架错误边界仅作补充。
在前端用 JavaScript 实现统一的全局错误拦截，核心是捕获三类异常：同步 JS 错误、异步 Promise 拒绝、资源加载失败。只要合理组合 window.onerror、window.addEventListener('unhandledrejection') 和 window.addEventListener('error')，就能覆盖绝大多数场景。
捕获同步脚本错误（SyntaxError 除外）
window.onerror 是最常用的方式，能拿到错误消息、脚本 URL、行号、列号和错误对象：
window.onerror = function(message, source, lineno, colno, error) {
console.error('JS Error:', { message, source, lineno, colno, error });
// 上报到监控系统，例如：
// reportError({ type: 'js-error', message, url: source, line: lineno, col: colno, stack: error?.stack });
return true; // 阻止触发 window.addEventListener('error')
};
注意：它无法捕获语法错误（如 let a = ;）和 Promise 中未 catch 的 reject。
捕获未处理的 Promise 拒绝
使用 unhandledrejection 事件监听未被 .catch() 或 try/catch 捕获的 Promise 错误：
立即学习“Java免费学习笔记（深入）”；
window.addEventListener('unhandledrejection', function(event) {
console.error('Unhandled Promise Rejection:', event.reason);
// event.reason 就是 reject 的值或 Error 实例
reportError({
type: 'promise-reject',
reason: event.reason instanceof Error
? event.reason.stack || event.reason.message
: String(event.reason)
});
event.preventDefault(); // 可选：阻止默认控制台警告
});
常见于 fetch 失败未 catch、async/await 抛错未 try-catch 等情况。
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
捕获静态资源加载失败（图片、CSS、Script）
window.addEventListener('error') 可捕获 img、link、script 等标签加载失败（注意：不触发 window.onerror）：
window.addEventListener('error', function(event) {
const target = event.target;
if (target && (target instanceof HTMLImageElement ||
target instanceof HTMLScriptElement ||
target instanceof HTMLLinkElement)) {
console.warn('Resource load failed:', {
tagName: target.tagName,
src: target.src || target.href,
currentSrc: target.currentSrc
});
reportError({
type: 'resource-error',
tagName: target.tagName,
src: target.src || target.href
});
}
}, true); // 使用捕获阶段，确保优先于元素自身的 onerror
建议加判断，避免把 JS 运行时错误重复上报（这类错误已被 window.onerror 处理）。
补充：Vue / React 应用内错误边界（可选增强）
框架层可进一步兜底：
-
Vue 2/3：全局配置
app.config.errorHandler（Vue 3）或Vue.config.errorHandler（Vue 2） -
React：用
ErrorBoundary组件包裹路由或 Layout，捕获子组件渲染期错误 - 但它们不替代全局监听——仅覆盖组件生命周期内的 JS 异常，无法捕获网络、定时器、第三方 SDK 抛出的错误
真正可靠的方案，始终以原生全局监听为基础，框架层为补充。
不需要引入额外库，几段标准 API 就能搭起健壮的错误收集能力。关键是区分错误类型、避免重复上报、保留足够上下文（如 URL、UserAgent、页面路径），方便后续定位。
