前端性能监控

大纲 我们会从以下三个方向来讲解埋点与监控的知识： 什么是埋点？什么是监控？ JS 中实现监控的核心方案 写一个“相对”完整的监控实例 一、什么是埋点？什么是监控？ 在日常沟通中，我们经常会把【埋点】和【监控】放到一起说，但是它们在本质上是有一定的区别的： 1. 埋点 埋点主要用于收集用户行为数据。在日常开发中，我们会通过 在前端代码中插入代码或脚本的方式 来实现埋点功能。 埋点的主要作用就是：捕获特定用户行为（如点击、浏览、提交表单、页面跳转等）以及关键业务数据（如下单金额、商品类别等） 在日常开发中，埋点的实现方案大致可以分为以下三大类： 手动埋点：在代码中手动加入记录代码来捕获特定事件。 自动埋点：利用 DOM 事件代理等技术来捕获页面上所有事件，从而减少手动配置。 可视化埋点：通过工具界面标记需要采集的元素和事件，可以不用手写代码。 2. 监控 而监控则主要关注 系统的性能和稳定性。在日常开发中，我们会通过 采集页面加载时间、资源请求、错误日志等数据 的方式来实现前端监控。 监控的主要作用就是：及时发现并定位页面性能瓶颈或代码异常，目的是为了保障系统不出 bug 在日常开发中，监控一般需要完成以下三大部分： 性能监控：如：首屏加载时间、页面交互耗时、资源加载耗时等。 错误监控：捕获 JavaScript 错误、网络请求失败、资源加载异常等。 用户体验监控：收集白屏、卡顿等影响用户体验的问题等。 区别总结 维度 前端埋点 前端监控 目标 捕获用户行为数据 监控系统性能、错误、稳定性 数据类型 用户点击、表单提交、页面跳转等 页面加载时间、错误日志、卡顿情况等 实现方式 手动埋点、自动埋点、可视化埋点 错误捕获、性能指标采集 核心关注点 用户行为、业务数据 系统Bug、性能优化 二、JS 中实现监控的核心方案 根据上面所说，我们知道埋点和监控的目的存在不同，但是它们的思路确是有很多一致性的，其核心都是：获取关键的数据，发送（上报）给服务端，依据数据来解决其不同的目的。 所以，无论是埋点也好，还是监控也罢，我们都需要 获取关键位置数据。 1. 跟踪用户事件（点击、滚动等） 定义通用跟踪函数（后续事件会通过该函数完成上报）：trackEvent 函数接收事件类型和事件详情，并上报到服务端。 // 用于记录或发送跟踪数据到服务器的函数 function trackEvent(eventType, details) { console.log(`Event: ${eventType}`, details); // 在控制台打印事件类型和详情 // 上报到服务端。 fetch('/测试接口地址', { method: 'POST', body: JSON.stringify({ eventType, details }) }); } 捕获按钮点击事件：获取 id 为 myButton 的按钮，并在其 click 事件上添加监听器。在按钮被点击时调用 trackEvent 函数，记录点击事件的类型（button_click）、按钮 ID 和时间戳。 ...