答案：前端日志监控通过捕获错误、性能与行为数据并上报，提升应用稳定性。1. 定义错误、性能、行为和自定义四类日志；2. 利用全局事件监听捕获JS错误、Promise异常及资源加载失败；3. 使用Performance API采集页面加载、渲染等性能指标；4. 通过立即上报严重错误、批量发送低优先级日志，并结合sendBeacon确保页面卸载时日志不丢失，实现高效可靠的数据收集。
前端日志记录与上报是提升应用稳定性和用户体验的重要手段。通过 JavaScript 实现日志监控，可以捕获错误、性能数据和用户行为，帮助开发者快速定位问题并优化产品。以下是实现这一功能的核心思路与代码示例。
1. 日志类型定义
明确需要收集的日志类型，有助于后续分析和处理：
错误日志：JavaScript 运行时错误、资源加载失败、Promise 异常等性能日志：页面加载时间、首屏渲染、资源耗时等（利用 Performance API）行为日志：关键按钮点击、路由跳转、用户停留时长等自定义日志：业务逻辑中的调试信息或状态标记
2. 全局异常捕获
使用全局事件监听器捕获未处理的异常和错误：
// 捕获 JS 运行时错误window.addEventListener('error', (event) => { const log = { type: 'error', message: event.message, filename: event.filename, lineno: event.lineno, colno: event.colno, stack: event.error?.stack || '', url: location.href, timestamp: Date.now() }; reportLog(log);});// 捕获未处理的 Promise 错误window.addEventListener('unhandledrejection', (event) => {const log = {type: 'promise_rejection',reason: event.reason?.message || String(event.reason),stack: event.reason?.stack || '',url: location.href,timestamp: Date.now()};reportLog(log);});
// 资源加载失败（如 img、script）window.addEventListener('error', (event) => {const target = event.target;if (target instanceof HTMLImageElement || target instanceof HTMLScriptElement ||target instanceof HTMLLinkElement) {const log = {type: 'resource_error',tagName: target.tagName,src: target.src || target.href,outerHTML: target.outerHTML,url: location.href,timestamp: Date.now()};reportLog(log);}}, true);
3. 性能数据采集
利用 Performance API 获取关键性能指标：
立即学习“Java免费学习笔记（深入）”；
function collectPerformance() { const perfData = performance.getEntriesByType('navigation')[0]; if (!perfData) return;const log = {type: 'performance',loadTime: perfData.loadEventEnd - perfData.fetchStart,domReady: perfData.domContentLoadedEventEnd - perfData.fetchStart,firstPaint: performance.getEntriesByName('first-paint')[0]?.startTime,firstContentfulPaint: performance.getEntriesByName('first-contentful-paint')[0]?.startTime,url: location.href,timestamp: Date.now()};reportLog(log);}
// 页面加载完成后上报window.addEventListener('load', collectPerformance);
4. 日志上报策略
避免频繁请求，合理控制上报频率和时机：
立即上报严重错误（如崩溃类错误）批量上报低优先级日志（定时或达到一定数量后）考虑用户网络环境（避免在弱网下频繁发送）使用 sendBeacon 确保页面卸载时日志不丢失
let logQueue = [];function reportLog(log) {logQueue.push(log);
// 立即上报致命错误if (log.type === 'error' || log.type === 'promise_rejection') {flushLogs();}
// 防抖批量上报clearTimeout(reportLog.timer);reportLog.timer = setTimeout(flushLogs, 3000);}
function flushLogs() {if (logQueue.length === 0) return;
const logsToSend = logQueue.splice(0, logQueue.length);
// 使用 sendBeacon 在页面关闭时也能发送if (navigator.sendBeacon) {const blob = new Blob([JSON.stringify({ logs: logsToSend })], { type: 'application/json' });navigator.sendBeacon('/api/log', blob);} else {// fallback 到 fetchfetch('/api/log', {method: 'POST',body: JSON.stringify({ logs: logsToSend }),keepalive: true // 保持连接，确保发送成功}).catch(() => {});}}
基本上就这些。通过合理设计日志结构、全面捕获异常、结合性能采集和可靠上报机制，就能构建一个轻量但实用的前端监控系统。关键是平衡数据完整性与性能开销，避免影响主业务流程。
以上就是JS实现前端日志记录与上报_javascript监控的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1533883.html
微信扫一扫 
支付宝扫一扫 
