【前端监控系统】埋点数据上报的3种方式
前言
首先,我们先对前端监控做一些简单的描述:
前端监控的目的?
- 提升用户体验
- 更快的发现发现异常、定位异常、解决异常
- 了解业务数据,指导产品升级——数据驱动的思想
它指的是通过一定的手段来获取用户行为以及跟踪产品在用户端的使用情况,并以监控数据为基础,为产品优化指明方向,为用户提供更加精确、完善的服务。
前端监控的方向?
一般来说,前端监控无非就是从以下三个角度进行监控:
- 数据监控(监控用户行为)
- 性能监控(监控网页性能)
- 异常监控(监控代码异常)
前端监控的流程?
采集数据>>上报数据>>分析数据>>报警通知
很显然,前端监控首要的步骤就是前端埋点和数据上报,也就是数据的收集阶段,而数据收集的丰富性和准确性会影响对产品线上效果的判别结果。
那么,下文主要给大家讲下第一步数据收集阶段-埋点数据上报的相关知识。
埋点上报
埋点,它的学名是事件追踪(Event Tracking),主要是针对特定用户行为或业务过程进行捕获、处理和发送的相关技术及实施过程。埋点是数据领域的一个专业术语,也是互联网领域的一个俗称。埋点是产品数据分析的基础,一般用于推荐系统的反馈、用户行为的监控和分析、新功能或者运营活动效果的统计分析等。埋点包含两个重要概念:事件(event),属性(param)。
埋点主流方案包括无痕埋点(全埋点),代码埋点,可视化埋点。这里就不做过多赘述了,可以自行百度。
传送门
上报数据的三种方法
1. 直接发请求上报
我们可以直接将数据通过 ajax 发送到后端,以 axios
为例。
axios.post(url, data);
问题:
但这种方法有一个问题,就是在页面卸载或刷新时进行上报的话,请求可能会在浏览器关闭或重新加载前还未发送至服务端就被浏览器 cancel 掉,导致数据上报失败。
我们可以将 ajax 请求改为同步方法,这样就能保证请求一定能发送到服务端。由于 fetch
及 axios
都不支持同步请求,所以需要通过 XMLHttpRequest
发送同步请求。
示例:
const syncReport = (url, { data = {}, headers = {} } = {}) => {const xhr = new XMLHttpRequest();xhr.open('POST', url, false);xhr.withCredentials = true;Object.keys(headers).forEach((key) => {xhr.setRequestHeader(key, headers[key]);});xhr.send(JSON.stringify(data));
};
2. 利用图片上报
第二种方式就是利用图片的src属性发送请求进行数据上报,因为大部分浏览器会延迟卸载(unload)文档以加载图像(只是大多数浏览器,还是存在兼容性的),所以用图片上报就可以解决第一种方法的漏洞。
用图片上报还有以下优点:
- 图片请求方式不会出现跨域问题,因为打点域名经常不是当前域名;
- 防止阻塞页面加载,影响用户体验;
- 一般采用1*1像素的透明 gif 进行上报,因为gif图片格式体积小(最小的BMP文件需要74个字节,PNG需要67个字节,而合法的GIF,只需要43个字节)
示例:
new Image().src = 'https://example.com/aaa?name=hester&num='+Math.random()
3. sendBeacon
同样为了解决页面卸载时,数据不能完成上报等问题,web底层新增了sendBeacon方法。MDN说明
这个方法主要用于满足统计和诊断代码的需要,这些代码通常尝试在卸载(unload)文档之前向 Web 服务器发送数据。过早的发送数据可能导致错过收集数据的机会。然而,对于开发者来说保证在文档卸载期间发送数据一直是一个困难。
使用 sendBeacon()
方法会使用户代理(浏览器)在有机会时异步地向服务器发送数据,同时不会延迟页面的卸载或影响下一导航的载入性能,这意味着:
- 数据发送是可靠的。
- 数据异步传输。
- 不影响下一个页面的载入。
示例:
navigator.sendBeacon(url, data);
常用的埋点上报处理方式
为了防止因sendBeacon兼容性导致的上报错误问题,可以优先使用sendBeacon的方式,Image方式作为fallback。
function sendLog(url: string, params: object) {if(navigator.sendBeacon) {sendBeacon(url, params)} else {sendImage(url, params)}
我是阿彬,期待你的关注!
【前端监控系统】埋点数据上报的3种方式相关推荐
- 一步一步搭建前端监控系统:如何将网页截图上报?
摘要: 通过录屏或者截图,快速复现BUG场景. 作者:一步一个脚印一个坑 原文:搭建前端监控系统(备选)Js截图上报篇 Fundebug经授权转载,版权归原作者所有. PS:本文关于Fundebug录 ...
- 带api的php探针,从零开始搭建前端监控系统(一)——web探针sdk
前言 本系列文章旨在讲解如何从零开始搭建前端监控系统. 项目已经开源 项目地址: 您的支持是我们不断前进的动力. 喜欢请start!!! 喜欢请start!!! 喜欢请start!!! 本文是该系列第 ...
- 搭建前端监控系统(二)JS错误监控篇
背景:市面上的监控系统有很多,大多收费,对于小型前端项目来说,必然是痛点.另一点主要原因是,功能通用,却未必能够满足我们自己的需求, 所以我们自给自足. 这是搭建前端监控系统的第二章,主要是介绍如何统 ...
- 搭建前端监控系统(四)接口请求异常监控篇
背景:市面上的监控系统有很多,大多收费,对于小型前端项目来说,必然是痛点.另一点主要原因是,功能虽然通用,却未必能够满足我们自己的需求, 所以我们自给自足也许是个不错的办法. 这是搭建前端监控系统的第 ...
- 让我们一起写一个前端监控系统吧!
CSDN话题挑战赛第2期 参赛话题:前端技术分享 项目介绍 我们基于Vue2.利用vue-plugin实现项目级别的npm包监控报错,并专为Vue项目设计了监控中台 核心监控插件开箱即用,用户可灵活选 ...
- 网页前端监控系统(错误日志,接口监控)的使用
网页前端监控系统(错误日志,接口监控)的使用 开门见山地说当程序员开发网页达到一定的量级,用户的数量达到一个比较庞大的数量时,总会遇见一些怎么测试都无法复现的bug,但是用户操作的时候却能屡次碰到, ...
- 呀!原来这就是前端监控系统
大厂技术 高级前端 Node进阶 点击上方 程序员成长指北,关注公众号 回复1,加入高级Node交流群 在刚开始学前端的时候,那时候开发的应用总是在用户的设备中出现一些报错,开发者只知道这个型号的 ...
- 【Web技术】1480- 呀!原来这就是前端监控系统
在刚开始学前端的时候,那时候开发的应用总是在用户的设备中出现一些报错,开发者只知道这个型号的设备出现这个问题,但对其他信息却全然不知,比如说其他操作系统.其他设备型号.其他页面会有这个报错吗,这个报错 ...
- 【genius_platform软件平台开发】第七十九讲:Linux系统中可执行程序后台运行的几种方式
[genius_platform软件平台开发]第七十九讲:Linux系统中可执行程序后台运行的几种方式 1. 问题描述 2. & 符号 3. nohup指令 4. ctrl + z.jobs. ...
最新文章
- python导入模块快捷键_Python中的模块导入和读取键盘输入的方法
- flink 运行一段时间 内存溢出_Flink之运行时环境
- JavaScript event loop事件循环 macrotask与microtask
- 动手造轮子:实现一个简单的依赖注入(一)
- linux删除grid数据文件,MongoDB进阶系列(13)——GridFS大文件的添加、获取、查看、删除...
- echarts 山东地图_用Python画中国地图,实现各省份数据可视化
- 贪婪洞窟2服务器维护,《贪婪洞窟2》11月30日更新维护多久 贪婪洞窟2更新维护公告...
- 虚机不能启动的特例思考
- Python_今天是今年第几天
- 9.27 csp-s模拟测试53 u+v+w
- 编译器和解释器(Compiler and Interpreter)
- scala Trait及其与抽象类的比较
- 查看Sql语句执行速度
- 博弈中的 SaaS 渠道
- 海洋cms采集后无法播放解决方法
- ExtJs皮肤主题定制 sencha Themer
- 大数据分析-考试复习
- idea与svn的安装及集成
- PASSWORD_VERIFY_FUNCTION(口令复杂性验证)
- 五大数据分析软件对比:Python、Excel、R、SPSS、SAS
热门文章
- 企业做三体系认证有什么用吗,招投标加分吗
- 办公室装修设计6大规范示意
- 怎样下载安装python编程软件3.85_【Python下载】Python安装 v3.8.1 官方版-七喜软件园...
- AutoCAD VBA 通过选择集 删除图层上所有对象和图层
- 数据科学太难?这些陷阱请避开,正能量很重要!
- BERT代码的解读1---数据处理部分
- 青少年机器人编程大赛用什么语言
- 努比亚android11,努比亚Play开测Android11 填写基本信息即可
- 京东技术体系员工级别划分及薪资区间
- 【算法】最短路径之Bellman-Ford