前端层面----监控与埋点
前言:
站在产品的视角,经常会问如下几个问题:
产品有没有用户使用
用户用得怎么样
系统会不会经常出现异常
如何更好地满足用户需求服务用户
当站在技术视角时,经常会问如下几个问题:
系统出现异常的频率如何
异常出现后如何快速进行定位追踪
如何分析解决问题
而当站在老板的视角时,问题可能又会变为:
我的存量用户多少,未来还有多少潜力
多少用户在系统内进行了消费
当在回答了上述问题之后,埋点&监控便跃然纸上。因为要回答以上问题,只有通过对系统进行数据分析的方式才能弄清楚。
其实无论是埋点亦或是监控,二者并不是独立存在,而是相互依存的关系。
下图是摘自网上的,感觉挺不错的,如下:

那么实现它有哪些意义呢?
前端监控埋点的定义与意义
定义:
埋点,即数据埋点,是数据采集领域(尤其是用户行为数据采集领域)的术语,指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。
意义:
- 数据采集:通过埋点,可以收集到用户在应用中的所有行为数据,如页面浏览、按钮点击、表单提交等。
- 数据分析:采集的数据有助于分析网站或App的使用情况、用户行为习惯等,为后续建立用户画像、用户行为路径等数据产品提供基础。
- 改进决策:通过对埋点数据的分析,企业可以了解用户的真实需求和行为习惯,从而做出更符合市场和用户需求的决策。
- 优化运营:了解用户的兴趣和行为后,企业可以优化运营策略,提高运营效率和收益。
- 预测趋势:通过对数据的分析,企业可以预测市场和用户的未来趋势,提前做好准备,把握市场机遇。
那么又如何实现呢?
以下提供js实现方式,目前也有现成的组件库来实现,例如 Vue 插件:可以集成如 Sentry 或 LogRocket 等前端监控工具。
1. 前端监控
1.1 捕获 JavaScript 错误
可以在 Vue 应用中使用 errorCaptured 和全局 window.onerror 来捕获和处理 JavaScript 错误。
1.1.1 全局错误捕获
在 Vue 组件的根实例中使用全局错误处理:
javascript
// main.js
Vue.config.errorHandler = function (err, vm, info) {// 处理错误,例如发送到服务器fetch('https://your-logging-endpoint.com/errors', {method: 'POST',`在这里插入代码片`body: JSON.stringify({message: err.message,stack: err.stack,info}),headers: { 'Content-Type': 'application/json' }});// 也可以在这里执行其他的错误处理逻辑console.error(err);
};
1.1.2 组件级错误捕获
在 Vue 组件中使用 errorCaptured 钩子捕获错误:
javascript
export default {errorCaptured(err, vm, info) {// 处理错误,例如发送到服务器fetch('https://your-logging-endpoint.com/errors', {method: 'POST',body: JSON.stringify({message: err.message,stack: err.stack,info}),headers: { 'Content-Type': 'application/json' }});// 继续向上传递错误return false;}
};
1.2 捕获未处理的 Promise 错误
捕获全局未处理的 Promise 拒绝错误:
javascript
window.addEventListener('unhandledrejection', function (event) {fetch('https://your-logging-endpoint.com/promises', {method: 'POST',body: JSON.stringify({reason: event.reason}),headers: { 'Content-Type': 'application/json' }});// 防止控制台显示默认错误event.preventDefault();
});
1.3 用户行为监控
可以在 Vue 组件中添加事件监听器来记录用户行为。例如,记录用户的点击事件:
javascript
export default {mounted() {this.addEventListeners();},methods: {addEventListeners() {document.addEventListener('click', this.handleUserAction);},handleUserAction(event) {fetch('https://your-logging-endpoint.com/user-actions', {method: 'POST',body: JSON.stringify({ type: 'click', element: event.target.tagName }),headers: { 'Content-Type': 'application/json' }});}},beforeDestroy() {document.removeEventListener('click', this.handleUserAction);}
};
2. 埋点实现
埋点通常用于跟踪用户与应用的交互行为,帮助分析用户行为和产品性能。可以在 Vue 组件中实现埋点,例如,跟踪用户点击、表单提交等事件。
2.1 组件级埋点
在 Vue 组件中,可以在事件处理函数中添加埋点逻辑:
javascript
export default {methods: {trackClick() {// 记录点击事件fetch('https://your-tracking-endpoint.com/track', {method: 'POST',body: JSON.stringify({event: 'button_click',timestamp: new Date().toISOString()}),headers: { 'Content-Type': 'application/json' }});}}
};
2.2 全局事件总线
使用 Vue 的全局事件总线来统一管理事件埋点:
javascript
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();// main.js
import { EventBus } from './event-bus';EventBus.$on('user-action', (data) => {fetch('https://your-tracking-endpoint.com/track', {method: 'POST',body: JSON.stringify(data),headers: { 'Content-Type': 'application/json' }});
});// 使用事件总线触发埋点
export default {methods: {triggerAction() {EventBus.$emit('user-action', {event: 'button_click',timestamp: new Date().toISOString()});}}
};
总结:
前端监控:通过全局和组件级错误捕获,处理未处理的 Promise 错误,记录用户行为。
埋点实现:在组件中直接记录用户交互事件,或通过全局事件总线统一管理和发送埋点数据。
相关文章:
前端层面----监控与埋点
前言: 站在产品的视角,经常会问如下几个问题: 产品有没有用户使用 用户用得怎么样 系统会不会经常出现异常 如何更好地满足用户需求服务用户 当站在技术视角时,经常会问如下几个问题: 系统出现异常的频率如何 异常…...
linux Command
linux Command 1. 系统监控命令 1.1 top top [param] top -H -p pid,查看进程pid下面的子线程。-b以处理模式操作-c显示完整的命令行而不只是显示命令名。-d 屏幕刷新间隔时间。-l 忽略失效过程。-s 保密模式。-S 累积模式。-u 【用户名】 指定用户名。-p 【进程…...
uniapp登录页面( 适配:pc、小程序、h5)
<!-- 简洁登录页面 --> <template><view class"login-bg"><image class"img-a" src"https://zhoukaiwen.com/img/loginImg/2.png"></image><image class"img-b" src"https://zhoukaiwen.com/im…...
关于OceanBase 多模一体化的浅析
在当今多元化的业务生态中,各行各业对数据库系统的需求各有侧重。举例来说,金融风控领域对数据库的高效事务处理(TP)和分析处理(AP)能力有着严格要求;游戏行业则更加注重文档数据库的灵活性和性…...
快速git
下载 sudo apt install git配置 $ git config --global user.name "John Doe" $ git config --global user.email johndoeexample.com没有空格可以不加双引号如果~/.ssh没有先创建(下一步用) ssh方式制作密钥 github解释 #以邮箱作为标签…...
欺诈文本分类检测(十四):GPTQ量化模型
1. 引言 量化的本质:通过将模型参数从高精度(例如32位)降低到低精度(例如8位),来缩小模型体积。 本文将采用一种训练后量化方法GPTQ,对前文已经训练并合并过的模型文件进行量化,通…...
2024.9.14(RC和RS)
一、replicationcontroller (RC) 1、更改镜像站 [rootk8s-master ~]# vim /etc/docker/daemon.json {"registry-mirrors": ["https://do.nark.eu.org","https://dc.j8.work","https://docker.m.daocloud.io",&…...
【算法随想录04】KMP 字符串匹配算法
这是字符串模式匹配经典算法。 给定一个文本 t 和一个字符串 s,我们尝试找到并展示 s 在 t 中的所有出现(occurrence)。 #include<bits/stdc.h>using namespace std;vector<int> KMP(string s) {int n s.size();vector<int&g…...
TCP和MQTT通信协议
协议分层 网络分层 协议应用层 Co AP MQTT HTTP传输层 UDP TCP网络层 IP链路层 Enternet 网络分层中最…...
Python Pickle 与 JSON 序列化详解:存储、反序列化与对比
Python Pickle 与 JSON 序列化详解:存储、反序列化与对比 文章目录 Python Pickle 与 JSON 序列化详解:存储、反序列化与对比一 功能总览二 Pickle1 应用2 序列化3 反序列化4 系统资源对象1)不能被序列化的系统资源对象2)强行序列…...
第二百三十二节 JPA教程 - JPA教程 - JPA ID自动生成器示例、JPA ID生成策略示例
JPA教程 - JPA ID自动生成器示例 我们可以将id字段标记为自动生成的主键列。 数据库将在插入时自动为id字段生成一个值数据到表。 例子 下面的代码来自Person.java。 package cn.w3cschool.common;import javax.persistence.Entity; import javax.persistence.GeneratedValu…...
计算机网络 ---- 计算机网络的体系结构【计算机网络的分层结构】
一、以快递网络来引入分层思想 1.1 “分层” 的设计思想【将庞大而复杂的问题,转化为若干较小的局部问题】 从我们最熟悉的快递网络出发,在你家附近会有一个快递终点站A,在其他的城市,也会有这种快递终点站,比如说快递…...
Vite + Electron 时,Electron 渲染空白,静态资源加载错误等问题解决
问题 如果在 electron 里直接引入 vite 打包后的东西,那么有些资源是请求不到的 这是我的引入方式 根据报错,我们来到 vite 打包后的路径看一看 ,修改一下 dist 里的文件路径试了一试 修改后的样子,发现是可以的了 原因分析 …...
ZAB协议(算法)
一、ZAB(ZooKeeper Atomic Broadcast)介绍 ZAB 即 ZooKeeper Atomic Broadcast,是 ZooKeeper 实现分布式数据一致性的核心算法。它是一种原子广播协议,用于确保在分布式环境中,多个 ZooKeeper 服务器之间的数据一致性。…...
多个音频怎么合并?把多个音频合并在一起的方法推荐
多个音频怎么合并?无论是制作连贯的播客节目还是将音乐片段整合成专辑,音频合并已成为许多创作者的常见需求。通过有效合并音频,可以显著提升项目的整体质量,确保内容的连续性和一致性。然而,合并后的文件通常比原始单…...
【Django】Django Class-Based Views (CBV) 与 DRF APIView 的区别解析
Django Class-Based Views (CBV) 与 DRF APIView 的区别解析 在 Django 开发中,基于类的视图(Class-Based Views, CBV)是实现可重用性和代码结构化的利器。而 Django REST Framework (DRF) 提供的 APIView 是针对 API 开发的扩展。 一、CBV …...
如何增加Google收录量?
想增加Google收录量,首先自然是你的页面数量就要多,但这些页面的内容也绝对不能敷衍,你的网站都没多少页面,谷歌哪怕想收录都没办法,当然,这是一个过程,持续缓慢的增加页面,增加网站…...
leetcode练习 格雷编码
n 位格雷码序列 是一个由 2n 个整数组成的序列,其中: 每个整数都在范围 [0, 2n - 1] 内(含 0 和 2n - 1)第一个整数是 0一个整数在序列中出现 不超过一次每对 相邻 整数的二进制表示 恰好一位不同 ,且第一个 和 最后一…...
【LLM:Gemini】文本摘要、信息提取、验证和纠错、重新排列图表、视频理解、图像理解、模态组合
开始使用Gemini 目录 开始使用Gemini Gemini简介 Gemini实验结果 Gemini的多模态推理能力 文本摘要 信息提取 验证和纠错 重新排列图表 视频理解 图像理解 模态组合 Gemini多面手编程助理 库的使用 引用 本文概述了Gemini模型和如何有效地提示和使用这些模型。本…...
CMS之Wordpress建设
下载 https://cn.wordpress.org/ 宝塔安装Wordpress 创建网站 上传文件、并解压、剪切文件到项目根目录 安装 -> 数据库信息 -> 标题信息 http://wordpress.xxxxx.com 登录 http://wordpress.xxxxxxxxx.com/wp-admin/ 1. 主题(模板) wordpress-基本使用-02-在主题…...
基于算法竞赛的c++编程(28)结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中,结构体可以嵌套使用,形成更复杂的数据结构。例如,可以通过嵌套结构体描述多层级数据关系: struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...
什么是库存周转?如何用进销存系统提高库存周转率?
你可能听说过这样一句话: “利润不是赚出来的,是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业,很多企业看着销售不错,账上却没钱、利润也不见了,一翻库存才发现: 一堆卖不动的旧货…...
基于数字孪生的水厂可视化平台建设:架构与实践
分享大纲: 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年,数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段,基于数字孪生的水厂可视化平台的…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库,例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体,比如 SnowballFight、Huggy the Do…...
学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕,#AI 监考一度冲上热搜。当AI深度融入高考,#时间同步 不再是辅助功能,而是决定AI监考系统成败的“生命线”。 AI亮相2025高考,40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕,江西、…...
【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验
Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上,对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...
AD学习(3)
1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分: (1)PCB焊盘:表层的铜 ,top层的铜 (2)管脚序号:用来关联原理图中的管脚的序号,原理图的序号需要和PCB封装一一…...
