在 JavaScript 中，可以通过 全局错误捕获 或 劫持原生方法（Hook） 来获取浏览器报错信息。以下是几种常见的方法：
1. 全局错误监听（window.onerror / window.addEventListener('error')）
适用于捕获运行时脚本错误、资源加载失败等。
// 方式1：window.onerror
window.onerror = function(message, source, lineno, colno, error) {
console.log("报错信息:", message);
console.log("出错文件:", source);
console.log("行号:", lineno);
console.log("列号:", colno);
console.log("Error对象:", error);
return true; // 阻止默认错误提示（非所有浏览器支持）
};
// 方式2：addEventListener（推荐）
window.addEventListener('error', function(event) {
console.log("报错事件:", event);
// event.error.stack 包含调用栈信息
}, true); // 使用捕获阶段监听资源加载错误
2. Hook console.error
劫持 console.error 以捕获通过控制台输出的错误：
const originalConsoleError = console.error;
console.error = function(...args) {
originalConsoleError.apply(console, args); // 保持原逻辑
console.log("拦截到错误日志:", args); // 自定义处理
};
3. Promise 未捕获异常（unhandledrejection）
捕获未被处理的 Promise 异常：
window.addEventListener('unhandledrejection', function(event) {
console.log("Promise报错:", event.reason);
});
4. Hook XMLHttpRequest/Fetch API
拦截网络请求的错误：
XMLHttpRequest Hook
const originalXHROpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url) {
this.addEventListener('error', () => {
console.log("XHR请求失败:", url);
});
originalXHROpen.apply(this, arguments);
};
Fetch API Hook
const originalFetch = window.fetch;
window.fetch = async function(...args) {
try {
const response = await originalFetch.apply(this, args);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response;
} catch (err) {
console.log("Fetch请求失败:", err.message);
throw err;
}
};
5. Source Map 解析堆栈（生产环境调试）
如果代码经过压缩，可通过 Source Map 反解错误位置：
- 在构建工具（Webpack/Vite）中生成 Source Map。
- 使用库如
source-map-js解析错误堆栈。
注意事项
- 跨域脚本：若脚本来自不同域且未返回 CORS Headers，
window.onerror只能捕获Script error.，需添加crossorigin="anonymous"：<script src="example.js" crossorigin></script> - 性能影响：过度 Hook 可能影响页面性能。
如果需要更完整的监控方案，可接入第三方服务（如 Sentry、Fundebug）。
内容由零声教学AI助手提供，问题来源于学员提问
