前端日志收集需全面捕获异常并结构化上报。首先通过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 文件暴露在生产静态资源目录中，以防源码泄露。
基本上就这些。合理配置前端日志收集机制，能让问题发现更及时，调试效率更高。关键是做到全面捕获、结构化上报、安全可控。