前端埋点与监控最佳实践：从基础到全流程实现

程序员Sunday2024-11-11 15:53

Hello，大家好，我是 Sunday。

正如标题所言，今天我们想要花一些时间来为大家完整的讲解前端【埋点、监控】的【全流程】。以补充很多同学在这一块的知识空白。

视频版访问：www.bilibili.com/video/BV1Kh...

大纲

我们会从以下三个方向来讲解埋点与监控的知识：

  • 什么是埋点？什么是监控？
  • JS 中实现监控的核心方案
  • 写一个"相对"完整的监控实例

一、什么是埋点？什么是监控？

在日常沟通中，我们经常会把【埋点】和【监控】放到一起说，但是它们在本质上是有一定的区别的：

1. 埋点

埋点主要用于收集用户行为数据 。在日常开发中，我们会通过 在前端代码中插入代码或脚本的方式 来实现埋点功能。

埋点的主要作用就是：捕获特定用户行为（如点击、浏览、提交表单、页面跳转等）以及关键业务数据（如下单金额、商品类别等）

在日常开发中，埋点的实现方案大致可以分为以下三大类：

  • 手动埋点：在代码中手动加入记录代码来捕获特定事件。
  • 自动埋点：利用 DOM 事件代理等技术来捕获页面上所有事件，从而减少手动配置。
  • 可视化埋点：通过工具界面标记需要采集的元素和事件，可以不用手写代码。

2. 监控

而监控则主要关注 系统的性能和稳定性 。在日常开发中，我们会通过 采集页面加载时间、资源请求、错误日志等数据 的方式来实现前端监控。

监控的主要作用就是：及时发现并定位页面性能瓶颈或代码异常，目的是为了保障系统不出 bug

在日常开发中，监控一般需要完成以下三大部分：

  • 性能监控：如：首屏加载时间、页面交互耗时、资源加载耗时等。
  • 错误监控：捕获 JavaScript 错误、网络请求失败、资源加载异常等。
  • 用户体验监控：收集白屏、卡顿等影响用户体验的问题等。

区别总结

维度 前端埋点 前端监控
目标 捕获用户行为数据 监控系统性能、错误、稳定性
数据类型 用户点击、表单提交、页面跳转等 页面加载时间、错误日志、卡顿情况等
实现方式 手动埋点、自动埋点、可视化埋点 错误捕获、性能指标采集
核心关注点 用户行为、业务数据 系统Bug、性能优化

二、JS 中实现监控的核心方案

根据上面所说，我们知道埋点和监控的目的存在不同，但是它们的思路确是有很多一致性的，其核心都是：获取关键的数据，发送（上报）给服务端，依据数据来解决其不同的目的。

所以，无论是埋点也好，还是监控也罢，我们都需要 获取关键位置数据。

1. 跟踪用户事件（点击、滚动等）

定义通用跟踪函数（后续事件会通过该函数完成上报） ：trackEvent 函数接收事件类型和事件详情，并上报到服务端。

js 复制代码 
// 用于记录或发送跟踪数据到服务器的函数
function trackEvent(eventType, details) {
    console.log(`Event: ${eventType}`, details); // 在控制台打印事件类型和详情
    // 上报到服务端。
    fetch('/测试接口地址', { method: 'POST', body: JSON.stringify({ eventType, details }) });
}

捕获按钮点击事件 ：获取 id 为 myButton 的按钮，并在其 click 事件上添加监听器。在按钮被点击时调用 trackEvent 函数，记录点击事件的类型（button_click）、按钮 ID 和时间戳。

js 复制代码 
// 跟踪按钮点击事件
const button = document.getElementById('myButton'); // 获取按钮元素
button.addEventListener('click', function () {
    trackEvent('button_click', { buttonId: 'myButton', timestamp: Date.now() }); // 记录点击事件并添加按钮ID和时间戳
});

捕获页面滚动事件 ：在全局 scroll 事件上添加监听器，每当页面发生滚动时调用 trackEvent 函数，记录滚动事件的类型（page_scroll）、页面垂直滚动距离（scrollY）和时间戳。

js 复制代码 
// 跟踪页面滚动事件
window.addEventListener('scroll', function () {
    trackEvent('page_scroll', { scrollY: window.scrollY, timestamp: Date.now() }); // 记录滚动事件并添加滚动位置和时间戳
});

2. 完成性能监控指标

我们可以使用 PerformanceAPI，来检测某些操作需要多长时间。如：页面加载时间和 API 调用耗时的监控:

页面加载时间监控 ：通过 window.addEventListener('load') 监听页面加载完成的事件，在页面完全加载后获取当前时间（使用 performance.now()），计算出页面加载的总耗时（从页面初始化到加载完成的时间），并通过 trackEvent 函数将事件类型、耗时数据等记录下来。

javascript 复制代码 
// 测量页面加载时间
window.addEventListener('load', function () {
    const pageLoadTime = performance.now(); // 获取页面加载完成后的时间（毫秒）
    trackEvent('page_load', { duration: pageLoadTime }); // 记录页面加载事件，并包含加载耗时数据
});

API 调用耗时监控 ：在 measureApiCallPerformance 函数中使用 performance.now() 获取调用 API 前的开始时间，通过 fetch 方法发起网络请求并在响应返回后再次获取时间差，计算 API 请求的总耗时。将 API 耗时和接口地址等信息通过 trackEvent 函数记录下来。

js 复制代码 
// 测量 API 调用的耗时
function measureApiCallPerformance() {
    const start = performance.now(); // 记录 API 调用的开始时间

    fetch('https://api.sunday.com/data')
        .then(response => response.json())
        .then(data => {
            const duration = performance.now() - start; // 计算 API 调用的耗时
            trackEvent('api_call', { duration: duration, endpoint: 'https://api.sunday.com/data' }); // 记录 API 调用事件，并包含耗时和接口地址
        });
}

3. 进行错误追踪监听

我们可以利用 window.onerror 回调或者直接使用一些库（如：Sentry）完成错误监听：

基础错误跟踪 ：通过 window.onerror 捕获全局 JavaScript 错误。当错误发生时，window.onerror 会自动获取错误的详细信息（如错误信息、文件、行号、列号及堆栈信息），并将这些信息通过 trackEvent 函数发送到后台，用于后续的错误分析和排查。

javascript 复制代码 
// 使用 window.onerror 实现基础的错误跟踪
window.onerror = function (message, source, lineno, colno, error) {
    // 捕获 JavaScript 错误信息，并通过 trackEvent 函数记录
    trackEvent('js_error', {
        message: message,      // 错误信息
        source: source,        // 错误发生的文件
        lineno: lineno,        // 错误所在的行号
        colno: colno,          // 错误所在的列号
        error: error ? error.stack : '' // 错误的堆栈信息（如果有）
    });
};

第三方错误跟踪服务（Sentry） ：Sentry 是一个常用的错误监控服务。通过 dsn 配置唯一的项目标识，之后可以使用 Sentry.captureException 方法捕获并上报自定义错误。这种方式适合用于捕获更多类型的异常并进行详细的错误分析。

js 复制代码 
// 使用第三方服务 Sentry 进行错误跟踪
Sentry.init({ dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0' }); // 初始化 Sentry
Sentry.captureException(new Error('在这里描述错误内容')); // 捕获并上报自定义错误

4. 自定义的埋点上报

有时候我们可能还需要进行一些特别要求的数据上报，比如：跟踪用户在页面特定区域的停留时间，一共分成三步来做：

  1. 当用户的鼠标进入指定区域（ID 为 sectionId）时，通过 mouseenter 事件记录进入的时间戳 sectionStartTime。
  2. 当用户的鼠标离开该区域时，通过 mouseleave 事件获取当前时间，计算用户在该区域的停留时长 timeSpent。
  3. 将停留时间和区域标识一起通过 trackEvent 函数发送到分析系统，方便后续分析用户在页面不同区域的停留时长
javascript 复制代码 
// 跟踪用户在页面特定区域的停留时间
let sectionStartTime = 0; // 记录进入区域的时间
const sectionElement = document.getElementById('sectionId'); // 获取目标区域的 DOM 元素

// 当用户鼠标进入该区域时触发
sectionElement.addEventListener('mouseenter', function () {
    sectionStartTime = Date.now(); // 记录进入区域的时间戳
});

// 当用户鼠标离开该区域时触发
sectionElement.addEventListener('mouseleave', function () {
    const timeSpent = Date.now() - sectionStartTime; // 计算停留时间
    trackEvent('time_spent', { section: 'sectionId', duration: timeSpent }); // 上报停留时间和区域标识
});

5. 局部小总结

通过以上的几个案例，我们可以再次明确：监控核心就是获取关键的数据，发送（上报）给服务端

我们只需要 依照自己的需求 ，找到对应的 事件节点 ，获取 需要上报的数据，通过接口传递给服务端即可。

PS：这里需要注意的是 上报的方式分为：【统一上报】和 【实时上报】 两大类，这里不去细说。

因此，想要完成监控，那么就需要更加深入的了解关键事件节点，如：浏览器窗口事件、鼠标事件、键盘事件、表单事件 甚至是 DOM 是否可见

三、一个完整的表单监控示例

那么接下来咱们就完成一个表单监控示例。他可以监控到 浏览量、按钮点击量和表单提交量 等

html 复制代码 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>表单行为跟踪示例</title>
	</head>
	<body>
		<!-- 示例表单 -->
		<h1>用户注册表单</h1>
		<form id="registrationForm">
			<label for="username">用户名：</label>
			<input type="text" id="username" name="username" required />
			<br /><br />

			<label for="email">邮箱：</label>
			<input type="email" id="email" name="email" required />
			<br /><br />

			<label for="password">密码：</label>
			<input type="password" id="password" name="password" required />
			<br /><br />

			<button type="button" id="submitButton">注册</button>
		</form>

		<script>
			// 通用跟踪函数：用于记录事件并发送到服务器
			function trackEvent(eventType, details) {
				console.log(`Event: ${eventType}`, details)
				// 将数据发送到分析服务
				fetch('/请求路径', {
					method: 'POST',
					headers: { 'Content-Type': 'application/json' },
					body: JSON.stringify({ eventType, details })
				})
			}

			// 1. 监控页面浏览量
			window.addEventListener('load', function () {
				trackEvent('page_view', {
					url: window.location.href,
					timestamp: Date.now()
				})
			})

			// 2. 监控输入字段聚焦事件
			const inputFields = document.querySelectorAll('#registrationForm input')
			inputFields.forEach((field) => {
				field.addEventListener('focus', function () {
					trackEvent('input_focus', {
						fieldName: field.name,
						timestamp: Date.now()
					})
				})
			})

			// 3. 监控按钮点击量
			const submitButton = document.getElementById('submitButton')
			submitButton.addEventListener('click', function () {
				trackEvent('button_click', {
					buttonId: 'submitButton',
					timestamp: Date.now()
				})

				// 模拟提交表单，调用表单提交处理逻辑
				handleSubmit()
			})

			// 4. 监控表单提交量
			const form = document.getElementById('registrationForm')
			function handleSubmit() {
				// 验证表单是否有效（如果需要可以增加更多验证逻辑）
				if (form.checkValidity()) {
					trackEvent('form_submit', {
						formId: 'registrationForm',
						formData: {
							username: form.username.value,
							email: form.email.value,
							password: form.password.value // 注意：实际场景中避免记录敏感信息
						},
						timestamp: Date.now()
					})

					// 模拟发送表单数据到服务器
					fetch('/请求路径', {
						method: 'POST',
						body: new FormData(form)
					})
						.then((response) => response.json())
						.then((data) => {
							console.log('Form submitted successfully', data)
						})
				} else {
					alert('请填写完整表单')
				}
			}
		</script>
	</body>
</html>

测试执行结果如下：

相关推荐
高山我梦口香糖1 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235241 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240252 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar2 小时前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人3 小时前
前端知识补充—CSS
前端·css
GISer_Jing3 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
m0_748245523 小时前
吉利前端、AI面试
前端·面试·职场和发展
理想不理想v3 小时前
webpack最基础的配置
前端·webpack·node.js
pubuzhixing3 小时前
开源白板新方案：Plait 同时支持 Angular 和 React 啦！
前端·开源·github
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程