如何实现一个前端日志记录与上报系统？

前端日志系统需采集错误、行为、性能和自定义日志，通过全局监听与手动触发结合，结构化存储并批量上报，利用sendBeacon保障可靠性，避免重复与敏感信息泄露。

前端日志系统的核心目标是捕获用户在使用网页或应用过程中的行为、错误和性能数据，帮助开发团队快速定位问题并优化体验。要实现一个实用的前端日志记录与上报系统，关键在于采集、聚合、上报、去重与服务端配合这几个环节。

1. 日志类型定义与采集

明确需要记录的日志类型，是构建系统的前提。常见的前端日志包括：

• 错误日志：JavaScript 运行时错误（通过 window.onerror）、Promise 异常（window.addEventListener(‘unhandledrejection’)）、资源加载失败等。
• 行为日志：用户点击、页面跳转、组件曝光、表单提交等关键交互行为。
• 性能日志：页面加载时间、首屏时间、资源耗时（利用 Performance API）。
• 自定义日志：开发者主动插入的调试信息或业务埋点。

采集方式可通过全局监听 + 手动触发结合实现。例如：

javascript
// 捕获 JS 错误
window.onerror = function(message, source, lineno, colno, error) {
logError({ message, source, lineno, colno, stack: error?.stack });
};
// 捕获未处理的 Promise 错误
window.addEventListener(‘unhandledrejection’, event => {
logError({ message: event.reason?.message, stack: event.reason?.stack });
});

2. 日志结构设计与本地缓存

每条日志应包含统一结构，便于后续分析。建议字段包括：

立即学习“前端免费学习笔记（深入）”；

• type：日志类型（error、behavior、performance 等）
• timestamp：时间戳
• page：当前 URL
• userAgent：设备与浏览器信息
• userId / sessionId：用户标识或会话 ID（如已登录）
• data：具体日志内容，结构化存储

为避免频繁上报影响性能，可先将日志暂存于内存或 localStorage，设置阈值后批量上报。例如：积累 10 条或每 30 秒上报一次。

3. 上报策略与网络优化

上报需兼顾可靠性和性能开销：

• 使用 navigator.sendBeacon 在页面卸载前发送日志，确保不被中断。
• 普通上报可使用 fetch 发送 POST 请求到指定接口。
• 对重复错误做简单去重，比如根据错误堆栈哈希值判断，避免刷屏。
• 在弱网或频繁失败时，可启用退避机制或本地持久化重试。

上报接口建议支持批量接收，减少请求数量。服务端返回 200 即认为成功，本地清除已上报日志。

4. 安全与性能注意事项

日志系统本身不能成为性能瓶颈或安全漏洞：

• 避免记录敏感信息（密码、token、用户隐私），必要时脱敏或禁止采集。
• 限制日志体积，单条不宜过大，总缓存不超过几 MB。
• 异步执行采集与上报逻辑，不阻塞主线程。
• 提供开关机制，可在生产环境动态开启/关闭日志采集。

基本上就这些。一个轻量但完整的前端日志系统，不需要一开始就复杂化。从捕获错误开始，逐步加入行为和性能数据，配合简单的上报服务，就能显著提升问题排查效率。