前言：聊聊前端流量监控到底是个啥

说实话，Zuo前端的兄弟们经常会遇到页面卡顿、请求异常、PV掉点这类小毛病。 咱就是说光靠肉眼根本抓不到细节。 于是监控系统就成了必备神器。 哈哈，这篇文章我就像老友一样，慢慢道来帮你搭建一个靠谱的前端流量监控平台。 别怕，我会把技术点拆成小块儿，一句一句敲进去，读起来轻松又不枯燥。

先别急着写代码，先把指标摆在桌面上。 常见的流量相关指标有：PV、UV、会话时长、跳出率，还有用户路径。 别忘了性Neng指标：FCP、LCP和CLS。 还有错误率：JS异常、接口错误、资源加载失败。 这些才是后面埋点的“种子”。 懂的dou懂，这些数据Neng帮我们快速定位问题，提升用户体验。

Zui直接的办法就是在页面入口加一段脚本。 我一般会写个独立的 monitor.js，用 ES6 模块导出一个 init 方法。 然后在 index.html Zui底部 `` 引入即可。 不对不对，应该是放在 `body` 结束前，这样Neng保证 DOM Yi经准备好，再去监听geng安全。 埋点主要分三类：页面浏览，资源请求，以及自定义事件。 每类dou对应一个监听器，捕获完后统一塞进一个队列里等到合适时机批量上报。 顺便说一下“为什么百度不收录”这个问题经常被问，我这里顺手给你解释下：百度爬虫Ru果遇到 JS 动态渲染的内容而没有 SSR 支持，就可Neng抓不到关键数据，从而导致页面不被收录。解决办法是使用服务端渲染或预渲染，让关键信息在 HTML 中直接可见；或者在 robots.txt 中明确允许爬虫抓取对应路径。这招用得好，搜索曝光率自然上升啦。

这里有两种常见方式：传统 AJAX POST 和新式 Beacon API。 说实话，我geng倾向于使用 `navigator.sendBeacon`，因为它Neng在页面 unload 时确保数据成功发送，不会阻塞页面关闭。 不过老旧浏览器不支持，那就回退到 XHR 吧，一套代码搞定兼容性。 上报频率也hen重要，太频繁会浪费带宽，太稀疏又失去实时性。我的经验是：每隔 5 秒或者队列满了 20 条就推送一次同时在 `visibilitychange` 或者 `beforeunload` 时强制 flush 一遍。 别忘了加密签名防止篡改，比如用 HMAC 把 payload 搞个 hash 再一起发过去。这样后端验证起来geng安心。

后端Ke以选 Node.js + Kafka + ClickHouse 的组合，也Ke以直接用 Python + Flask + InfluxDB，kan团队技术栈决定吧。 核心思路是把原始日志写进消息队列，然后离线聚合生成统计报表；实时需求的话Ke以直接写入时序数据库，再配合 Grafana Zuo可视化仪表盘。 我常用的字段结构大概是：{timestamp, pageUrl, userId, sessionId, metricName, metricValue, extra}. 记得给每条日志打上标签，比如 `type=error` 或者 `type=performance`，方便后面筛选和告警规则编写。 五、可视化 & 告警——让数据说话

Grafana 是我的首选，它自带多种图表模板，只要连上 ClickHouse/InfluxDB，就Neng秒出趋势图和柱状图了。

Ru果想要geng细粒度的业务kan板，Ke以自己写一个 React Dashboard，把关键指标以卡片形式展示。

告警规则别忘了设定阈值，例如 FCP 超过 2 秒算异常；错误率超过 1% 就触发钉钉/企业微信报警。

再提醒一下要Zuo好告警去噪声处理，否则一堆无意义的通知只会让人麻木。

另外你Ke以把热点页面自动列出来这样产品同学一眼就知道哪些页需要优化。

哈哈，说完这些，你应该Yi经对整个链路有个大概了解了吧？

// monitor.js // 简单版示例，仅供参考 export function init {   const queue = ;   function push{ queue.push; if{ flush; } }   function flush{ if return; const payload = JSON.stringify; navigator.sendBeacon; queue.length=0; }   // 页面浏览   window.addEventListener}));   window.addEventListener}));   // Ajax 拦截   const origXhrOpen = XMLHttpRequest.prototype.open;   XMLHttpRequest.prototype.open = function{ this.addEventListener=>{ push}); }); origXhrOpen.apply; };   // 页面隐藏时强制上报   document.addEventListener=>{ if{ flush; } }); }

// index.html 底部加入