如何收集和存储前端日志数据

如何收集和存储前端日志数据

收集和存储前端日志数据是监控、调试和优化应用的关键环节。以下是系统的实现方案：

---

一、日志收集类型

1. 错误日志
   • JS错误（window.onerror、unhandledrejection）
   • 资源加载错误（<img>、<script>的onerror事件）
   • HTTP请求错误（XHR/Fetch拦截）
2. 性能日志
   • 页面加载时间（Navigation Timing API）
   • 异步请求耗时
   • 关键用户体验指标（FP/FCP/LCP）
3. 行为日志
   • 用户点击/滚动/输入（需脱敏）
   • 页面路由切换（SPA的hashchange或popstate）

---

二、收集方法

1. 前端SDK集成

   • 自研工具：通过addEventListener全局监听错误/行为事件。
   • 开源工具：
     • Sentry/Rollbar（错误监控）
     • Google Analytics/Matomo（行为分析）
     • Lighthouse（性能采集）

2. 手动埋点

   • 关键流程插入日志代码（如按钮点击、API调用）。

3. 自动化工具

   • Web Vitals库收集Core Web Vitals指标。

---

三、传输方式

1. 即时发送

   • 通过navigator.sendBeacon()（页面关闭时保障数据可靠传输）或 Fetch API 实时上报。
   • 优势：数据时效性强。
   • 缺点：高频请求可能影响性能。

2. 批量发送

   • 本地缓存（如localStorage或IndexedDB），定时或按量合并上报。
   • 优势：减少网络请求，离线兼容。

3. 采样策略

   • 对大流量应用，按比例采样（如10%用户上报全量日志）。

---

四、存储方案

1. 云端服务（推荐）

• 错误监控：Sentry/Datadog
• 行为分析：Google Analytics/Mixpanel
• 全栈日志：ELK（Elasticsearch + Logstash + Kibana）或Grafana Loki
• 时序数据：InfluxDB/Prometheus（适合性能指标）

2. 自建服务

• 后端API：Node.js/Python服务接收日志，写入数据库。
• 数据管道：Kafka/RabbitMQ缓冲高并发日志。
• 存储层：
  • 结构化数据：PostgreSQL/MongoDB
  • 高性能查询：Elasticsearch
  • 低成本长期存储：S3 + Parquet格式

3. 前端临时存储

• indexedDB（大容量）或 localStorage（小容量，需注意5MB限制）。

---

五、隐私与安全

1. 数据脱敏
   • 过滤用户敏感信息（如密码、身份证号）。
2. GDPR合规
   • 提供用户选择退出日志采集的选项。
3. 加密传输
   • 使用HTTPS并签名防止篡改。

---

六、优化建议

1. 日志分级：区分DEBUG/INFO/ERROR，按需上报。
2. 自动清理：设置日志过期时间（如仅保留30天）。
3. SourceMap映射：线上JS错误反解源码（需保护SourceMap文件安全）。
4. A/B测试：日志上报逻辑的版本控制。

---

七、技术栈示例

// 示例：Sentry初始化 + 自定义行为日志
import * as Sentry from '@sentry/browser';
Sentry.init({ dsn: 'YOUR_DSN' });

// 手动记录用户行为
trackButtonClick = (buttonId) => {
  Sentry.captureMessage(`Button clicked: ${buttonId}`);
  // 或发送至自有API
  fetch('/log', {
    method: 'POST',
    body: JSON.stringify({ event: 'click', buttonId }),
  });
};

---

总结

选择方案需平衡业务需求（实时性 vs 成本）、团队技术栈和数据规模。中小团队建议直接使用Sentry+GA等SaaS服务，大型应用可自建ELK或数据湖（如Delta Lake）。