前端日志收集需全面捕获异常并结构化上报。首先通过window.onerror、error事件和unhandledrejection监听全局错误与Promise异常；其次针对脚本、图片等资源加载失败绑定onerror或捕获error事件；再结合自定义埋点记录用户行为，封装reportLog统一上报，附带时间、URL、设备等上下文信息；最后利用Source Map还原压缩代码的错误堆栈，提升定位效率。整个机制应确保安全可控，避免源码泄露，实现高效问题追踪与用户体验优化。
前端日志收集与异常捕获是保障 Web 应用稳定运行的重要手段。随着前端工程复杂度提升，仅靠用户反馈排查问题已远远不够。建立完善的日志体系，能帮助开发团队快速定位错误、分析用户行为、优化性能表现。
一、全局异常捕获
JavaScript 提供了多种方式监听未捕获的异常，确保代码出错时能被记录下来。
● window.onerror：捕获全局同步脚本错误和资源加载错误（需开启跨域支持）。 ● window.addEventListener('error')：可捕获更广泛的错误类型，包括网络请求、资源加载等。 ● window.addEventListener('unhandledrejection')：专门用于监听未处理的 Promise 异常。示例代码：
window.onerror = function(message, source, lineno, colno, error) {
console.error('Global error:', { message, source, lineno, colno, error });
reportError({
type: 'js_error',
message,
stack: error?.stack,
line: lineno,
column: colno,
url: source
});
return true; // 阻止默认上报行为
};
window.addEventListener('unhandledrejection', event => {
const reason = event.reason;
reportError({
type: 'promise_rejection',
message: reason?.message || String(reason),
stack: reason?.stack,
reason: reason
});
});
二、资源加载异常监控
图片、脚本、CSS 等静态资源加载失败不会触发 window.onerror，但可通过 error 事件单独监听。
立即学习“Java免费学习笔记（深入）”；
对于动态插入的资源，建议在创建时绑定错误监听：
const script = document.createElement('script');
script.src = 'https://example.com/bundle.js';
script.onerror = () => {
reportError({
type: 'resource_load_fail',
resource: script.src,
tag: 'script'
});
};
document.head.appendChild(script);
也可通过捕获 error 事件统一处理：
window.addEventListener('error', (event) => {
if (event.target instanceof HTMLScriptElement ||
event.target instanceof HTMLLinkElement ||
event.target instanceof HTMLImageElement) {
reportError({
type: 'resource_error',
tagName: event.target.tagName,
src: event.target.src || event.target.href
});
}
}, true); // 使用捕获阶段
三、自定义日志与行为埋点
除异常外，关键业务流程也应主动上报日志，便于还原用户操作路径。
● 在关键函数入口添加logAction('user_login_start') 类型调用。
● 结合用户身份、设备信息、页面路径等上下文增强日志可读性。
● 控制上报频率，避免重复或冗余数据刷屏。
封装一个通用上报方法：
function reportLog(data) {
const baseInfo = {
timestamp: Date.now(),
url: location.href,
userAgent: navigator.userAgent,
uid: getUserID() // 自定义获取用户标识
};
fetch('/api/log', {
method: 'POST',
body: JSON.stringify({ ...baseInfo, ...data }),
headers: { 'Content-Type': 'application/json' }
}).catch(() => {
// 上报失败可尝试本地缓存或忽略
});
}
function reportError(errorData) {
reportLog({ level: 'error', ...errorData });
}
四、Source Map 支持与堆栈还原
生产环境通常使用压缩后的 JS 文件，错误堆栈中的行列号无法直接对应源码。通过构建 Source Map 并部署到服务器，可在后台服务中还原原始错误位置。
● 构建时生成 Source Map（webpack 默认支持）。 ● 将 map 文件上传至日志平台或专用解析服务。 ● 后端接收到错误后，根据文件 URL 和行列号查询原始文件及代码行。注意：不要将 map 文件暴露在生产静态资源目录中，以防源码泄露。
基本上就这些。合理配置前端日志收集机制，能让问题发现更及时，调试效率更高。关键是做到全面捕获、结构化上报、安全可控。
