当前位置: 首页 > news >正文

前端层面----监控与埋点

前言:

站在产品的视角,经常会问如下几个问题:

  1. 产品有没有用户使用

  2. 用户用得怎么样

  3. 系统会不会经常出现异常

  4. 如何更好地满足用户需求服务用户

当站在技术视角时,经常会问如下几个问题:

  1. 系统出现异常的频率如何

  2. 异常出现后如何快速进行定位追踪

  3. 如何分析解决问题

而当站在老板的视角时,问题可能又会变为:

  1. 我的存量用户多少,未来还有多少潜力

  2. 多少用户在系统内进行了消费

当在回答了上述问题之后,埋点&监控便跃然纸上。因为要回答以上问题,只有通过对系统进行数据分析的方式才能弄清楚。

其实无论是埋点亦或是监控,二者并不是独立存在,而是相互依存的关系。
下图是摘自网上的,感觉挺不错的,如下:
在这里插入图片描述

那么实现它有哪些意义呢?

前端监控埋点的定义与意义

定义:

埋点,即数据埋点,是数据采集领域(尤其是用户行为数据采集领域)的术语,指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。

意义:

  1. 数据采集:通过埋点,可以收集到用户在应用中的所有行为数据,如页面浏览、按钮点击、表单提交等。
  2. 数据分析:采集的数据有助于分析网站或App的使用情况、用户行为习惯等,为后续建立用户画像、用户行为路径等数据产品提供基础。
  3. 改进决策:通过对埋点数据的分析,企业可以了解用户的真实需求和行为习惯,从而做出更符合市场和用户需求的决策。
  4. 优化运营:了解用户的兴趣和行为后,企业可以优化运营策略,提高运营效率和收益。
  5. 预测趋势:通过对数据的分析,企业可以预测市场和用户的未来趋势,提前做好准备,把握市场机遇。

那么又如何实现呢?

以下提供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 多模一体化的浅析

在当今多元化的业务生态中&#xff0c;各行各业对数据库系统的需求各有侧重。举例来说&#xff0c;金融风控领域对数据库的高效事务处理&#xff08;TP&#xff09;和分析处理&#xff08;AP&#xff09;能力有着严格要求&#xff1b;游戏行业则更加注重文档数据库的灵活性和性…...

快速git

下载 sudo apt install git配置 $ git config --global user.name "John Doe" $ git config --global user.email johndoeexample.com没有空格可以不加双引号如果~/.ssh没有先创建&#xff08;下一步用&#xff09; ssh方式制作密钥 github解释 #以邮箱作为标签…...

欺诈文本分类检测(十四):GPTQ量化模型

1. 引言 量化的本质&#xff1a;通过将模型参数从高精度&#xff08;例如32位&#xff09;降低到低精度&#xff08;例如8位&#xff09;&#xff0c;来缩小模型体积。 本文将采用一种训练后量化方法GPTQ&#xff0c;对前文已经训练并合并过的模型文件进行量化&#xff0c;通…...

2024.9.14(RC和RS)

一、replicationcontroller &#xff08;RC&#xff09; 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&#xff0c;我们尝试找到并展示 s 在 t 中的所有出现&#xff08;occurrence&#xff09;。 #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 序列化详解&#xff1a;存储、反序列化与对比 文章目录 Python Pickle 与 JSON 序列化详解&#xff1a;存储、反序列化与对比一 功能总览二 Pickle1 应用2 序列化3 反序列化4 系统资源对象1&#xff09;不能被序列化的系统资源对象2&#xff09;强行序列…...

第二百三十二节 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 “分层” 的设计思想【将庞大而复杂的问题&#xff0c;转化为若干较小的局部问题】 从我们最熟悉的快递网络出发&#xff0c;在你家附近会有一个快递终点站A&#xff0c;在其他的城市&#xff0c;也会有这种快递终点站&#xff0c;比如说快递…...

Vite + Electron 时,Electron 渲染空白,静态资源加载错误等问题解决

问题 如果在 electron 里直接引入 vite 打包后的东西&#xff0c;那么有些资源是请求不到的 这是我的引入方式 根据报错&#xff0c;我们来到 vite 打包后的路径看一看 &#xff0c;修改一下 dist 里的文件路径试了一试 修改后的样子&#xff0c;发现是可以的了 原因分析 …...

ZAB协议(算法)

一、ZAB&#xff08;ZooKeeper Atomic Broadcast&#xff09;介绍 ZAB 即 ZooKeeper Atomic Broadcast&#xff0c;是 ZooKeeper 实现分布式数据一致性的核心算法。它是一种原子广播协议&#xff0c;用于确保在分布式环境中&#xff0c;多个 ZooKeeper 服务器之间的数据一致性。…...

多个音频怎么合并?把多个音频合并在一起的方法推荐

多个音频怎么合并&#xff1f;无论是制作连贯的播客节目还是将音乐片段整合成专辑&#xff0c;音频合并已成为许多创作者的常见需求。通过有效合并音频&#xff0c;可以显著提升项目的整体质量&#xff0c;确保内容的连续性和一致性。然而&#xff0c;合并后的文件通常比原始单…...

【Django】Django Class-Based Views (CBV) 与 DRF APIView 的区别解析

Django Class-Based Views (CBV) 与 DRF APIView 的区别解析 在 Django 开发中&#xff0c;基于类的视图&#xff08;Class-Based Views, CBV&#xff09;是实现可重用性和代码结构化的利器。而 Django REST Framework (DRF) 提供的 APIView 是针对 API 开发的扩展。 一、CBV …...

如何增加Google收录量?

想增加Google收录量&#xff0c;首先自然是你的页面数量就要多&#xff0c;但这些页面的内容也绝对不能敷衍&#xff0c;你的网站都没多少页面&#xff0c;谷歌哪怕想收录都没办法&#xff0c;当然&#xff0c;这是一个过程&#xff0c;持续缓慢的增加页面&#xff0c;增加网站…...

leetcode练习 格雷编码

n 位格雷码序列 是一个由 2n 个整数组成的序列&#xff0c;其中&#xff1a; 每个整数都在范围 [0, 2n - 1] 内&#xff08;含 0 和 2n - 1&#xff09;第一个整数是 0一个整数在序列中出现 不超过一次每对 相邻 整数的二进制表示 恰好一位不同 &#xff0c;且第一个 和 最后一…...

【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-在主题…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...