前端日志与监控

在前端应用中，日志和监控让我们可以及时发现异常、了解用户行为并持续迭代产品。本篇将探讨日志采集、错误追踪、性能监控和用户行为分析等内容，以及常用工具和最佳实践。

日志类型

JS 错误：运行时异常，需捕获并上报。
网络请求日志：API 调用的成功/失败、耗时等。
用户行为日志：点击、滚动、页面访问等。
性能指标：FP、FCP、LCP、TTFB 等。

每种类型的数据结构可能不同，但统一归档有助于分析。

错误捕获机制

在全局捕获：

window.addEventListener('error', e => {
  report({ type: 'js-error', message: e.message, stack: e.error?.stack });
});

window.addEventListener('unhandledrejection', e => {
  report({ type: 'promise-rejection', reason: e.reason });
});

如使用 React，可在根组件外层添加 ErrorBoundary。

自定义日志

使用封装好的函数发送事件：

1
2
3

function logEvent(name, data) {
  navigator.sendBeacon('/log', JSON.stringify({ name, data, timestamp: Date.now() }));
}

利用 sendBeacon 发送小型数据而不会阻塞 unload。

性能监控

使用 Performance API 和 PerformanceObserver：

const observer = new PerformanceObserver(list => {
  list.getEntries().forEach(entry => {
    report({ type: 'performance', name: entry.name, duration: entry.duration });
  });
});
observer.observe({ entryTypes: ['navigation', 'resource', 'paint'] });

捕获关键指标并上报，例如 first-contentful-paint。

网络监控

拦截 fetch/XHR：

const origFetch = window.fetch;
window.fetch = function(...args) {
  const start = Date.now();
  return origFetch.apply(this, args).then(res => {
    report({ type: 'network', url: args[0], duration: Date.now() - start, status: res.status });
    return res;
  });
};

对 XHR 可用相同思路重写原型。

用户行为采集

热图、点击流等可以帮助产品分析。

记录 click、mousemove、scroll 事件。
定时上报或使用 sendBeacon。

注意采集频率，避免产生大量数据。

日志压缩与传输优化

使用 JSON 存储结构化日志。
批量发送，减少请求次数。
使用 gzip 压缩数据。
使用 CDN 或边缘节点减少延迟。

隐私与合规性

采集时需尊重用户隐私，避免记录敏感信息，如密码、信用卡。遵循 GDPR、CCPA 等法规，提供数据删除接口。

常见工具

Sentry：错误追踪，支持源映射。
LogRocket：录制用户 session，结合日志查看。
New Relic Browser 部署 SDK 进行性能监控。
ELK/EFK：自建日志平台。

许多产品同时使用多个工具，以覆盖不同需求。

可视化与告警

将日志存储在 Elasticsearch、InfluxDB 等，然后通过 Kibana、Grafana 等可视化。设置告警阈值并结合 Slack/Email 通知。

归档与分析

定期归档旧日志、抽样保存，以减低存储成本。分析时使用聚合查询、map-reduce 或使用机器学习进行异常检测。

应用状态与健康检查

前端可以定期向后端发送心跳（heartbeat），并在启动时获取配置信息，例如是否开启某些功能。

版本与环境

在日志中记录应用版本、浏览器版本、操作系统等，以便排查兼容性问题。

可访问性事件

记录无障碍相关的错误，如 aria 属性缺失，帮助改善可访问性质量。

真实场景示例

某次线上错误导致页面闪退，通过 Sentry 日志查看堆栈信息，并快速回滚。
使用 LogRocket 回放用户操作，发现 network 请求失败后页面未提示。
分析 Performance 数据，发现某资源加载超过 5 秒，引入 CDN 并大幅提升 LCP。

策略与成本控制

日志量爆发可能导致费用急剧增加。采取策略如：

设置采样率（sampling）。
过滤重复错误（deduplication）。
在客户端聚合后上报。

新兴趋势

Edge Monitoring：在边缘运行脚本收集日志。
AI 异常检测：利用机器学习自动标记异常模式。

总结

前端日志与监控是保障线上应用稳定性的关键环节。虽然实现和工具可能各异，但核心目标是快速发现问题、还原用户操作、优化性能与体验。合理设计采集方案、关注隐私法规并控制成本，是构建健壮监控系统的基石。