JavaScript 如何做前端监控

在做前端开发时，你有没有遇到过这种情况：用户反馈页面加载慢、按钮点了没反应，但你在开发环境里测了几十遍都没发现问题？或者上线后偶尔会出现报错，等你收到通知时，已经影响了好几个用户。这时候，前端监控就成了帮你“抓问题”的工具，而JavaScript作为前端的核心，就是实现这个监控的关键。

先搞懂：前端监控要抓什么问题

前端页面从打开到关闭，会经过好几个环节，每个环节都可能出问题。简单说，监控要抓三类最常见的问题：第一是页面加载慢，比如图片、脚本没加载出来，用户等半天看不到内容；第二是代码报错，比如点击按钮后触发的函数写错了，页面直接白屏；第三是用户操作异常，比如用户填表单时漏了必填项，或者跳转后找不到对应页面。这些问题靠开发时的自测很难全覆盖，必须用监控工具在真实用户的设备里抓数据。

JavaScript 做监控的核心：“埋点”抓数据

要监控这些问题，最直接的方法是在代码里加“埋点”——就像在页面上装个小摄像头，一有情况就自动记录。埋点分两种，一种是自动埋点，不用你写太多代码，另一种是手动埋点，针对特定需求加。

自动埋点最实用的场景是抓页面加载情况。比如用浏览器自带的performance对象，就能拿到页面从开始加载到所有资源加载完成的时间。举个例子：你想知道首页的加载时间，就可以写一行简单的代码，把这个时间记录下来。还有代码报错，浏览器有个window.onerror事件，只要JS代码运行时出错，这个事件就会触发，你可以把错误信息、出错的文件、甚至用户的浏览器型号都存下来，传到你的后台。

手动埋点则适合抓更细节的用户行为。比如你想知道“用户点了多少次提交按钮”，就在按钮的点击函数里加一行代码，记录这次点击的时间和用户ID。再比如用户提交表单后，你可以埋点记录提交是否成功，要是失败了，就马上收到通知。

数据怎么处理：别只存，要有用

抓来的数据不能随便堆着，得处理成有用的信息。比如你把所有用户的加载时间统计一下，就会发现大部分用户的加载时间是2秒左右，但有10%的用户用旧手机，加载时间超过5秒，这时候你就该优化一下页面的脚本大小了。

另外，数据要及时传后台，但不能影响用户体验。比如用navigator.sendBeacon这个方法，它会在后台悄悄传数据，不会打断用户的操作，就算用户关了页面，数据也能传出去。要是用普通的fetch方法，可能因为页面关闭导致数据丢了，这就是为什么这个方法常用的原因。

举个生活化的小例子

你可以把前端监控比作开一家奶茶店。用户进店（打开页面）后，你要知道奶茶（资源）有没有及时做出来（加载完成），店员有没有做错单（代码报错），顾客有没有反复问某个问题（重复操作）。用JavaScript做监控，就是在店里装几个传感器：门口的计时器记顾客从进门到拿到奶茶的时间，后厨的报错灯显示有没有做坏单，前台的计数器记顾客问了几次“少糖”。这些数据传到你手里，你就能知道是后厨太慢，还是某个口味的出错率高，及时调整。

通过这样的方式，JavaScript帮你把前端的“看不见的问题”变成“看得懂的数据”，不用再靠用户反馈猜问题，而是能主动发现并解决，让页面运行得更顺畅。