前端小技巧: 设计一个简版前端统计 SDK

统计 sdk 如何设计

1 ) 概述

  • 客户端一个sdk ,把数据发送给服务端(第三方统计平台)
  • 服务端产生一个统计的报表

2 )需求点

  • 访问量:pv
  • 自定义事件:用户的一切行为我们都可以自定义采集
  • 性能,错误

3 ) 代码实现

const PV_URL_SET = new Set()class MyStatistic {constructor(productId) {this.productId = productIdthis.initPerformance() // 性能统计this.initError() // 初始化错误监控},// 发送统计数据send(url, params = {}) {// 加上必要参数params.productId = this.productIdconst paraArr = []for(let key in params) {const val = params[key]paramsArr.push(`${key}=${value}`)}const newUrl = `${url}?${paramsArr.join('&')}`const img = document.createElemnt('img')img.src = newUrl // get},// 初始化性能统计initPerformance() {// console.table(performance.timing) // 这个apiconst url = 'yyy'this.send(url, performance.timing) // 给最原始、最完整的结果,原始数据// 注意,至少要在 DOMContentLoaded 调用它},initError() {window.addEventListener('error', event => {const { error, lineno, colno} = eventthis.error(error, { lineno, colno })})// Promise未catch住的报错window.addEventListener('unhandledrejection', event => {this.error(new Error(event.reason), {type: "unhandledrejection"})})},pv() {// sendconst href = location.hrefif (PV_URL_SET.get(href)) return // 不重复发送this.event('pv')PV_URL_SET.add(href) 、、 },event(key, val) {// 自定义事件// sendconst url = 'xxx' // 自定义事件,统计serverthis.send(url, {key, val})}// 统计用户 try catch 里的errorerror(err, info={}) {// sendconst url = 'zzz'const {message, stack} = errthis.send(url, {message, stack, ...info})}
}const s = new MyStatistic('a1') // 至少要在 DOMContentLoaded 调用它s.pv() // pv只能调用,在 spa路由中切换需要调用
s.event('vip', 'ok')
s.event('vip', 'cancel')
s.event('vip', 'close')try {} catch(e) {s.error(ex, {})
}

4 )总结

  • 以上是一个简版的原生js的实现方式
  • 所有细节处理都在代码中
  • 如果使用框架,如React和Vue等,可替换成内部的捕获错误方法

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/209201.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uView框架的安装与Git管理

参考链接:Http请求 | uView - 多平台快速开发的UI框架 - uni-app UI框架 安装 打开我们项目的cmd进行下载: yarn add uview-ui 首先我们要确定,未下载前的文件目录以及下载后,是多了个文件目录node_modules 下载完成之后我们就…

QQ2023备份

需要修改的路径(共3处) 这三处路径中,只有一处是需要修改的 QQPC端-主菜单-设置-基本设置-文件管理 点击上面的“”自定义“”,然后修改路径即可 修改路径后提示 然后等一会才会关干净QQ的相关进程,关闭后才会有自动…

外贸找客户软件工具:WhatBotPlus 4.6.2

WhatBot 是所有使用 Whatsapp 与客户沟通的中小型公司、企业或自由职业者的理想软件。借助 WhatBot,您可以通过 Whatsapp 发送新闻通讯活动,还可以设置自动回复。由于命令一旦配置,客户就可以获取各种信息、接收优惠和促销等,从而…

linux安装tomcat

Tomcat官网: http://tomcat.apache.org 配置java环境 上传jdk1.8到服务器。安装jdk [rootjava-tomcat1 ~]# tar xzf jdk-8u191-linux-x64.tar.gz -C /usr/local/[rootjava-tomcat1 ~]# cd /usr/local/[rootjava-tomcat1 local]# mv jdk1.8.0_191/ java 设置环境…

51单片机独立按键以及矩阵按键的使用以及其原理--独立按键 K1 控制 D1 指示灯亮灭以及数码管显示矩阵按键 S1-S16 按下后键值 0-F

IO 的使用–按键 本文主要涉及8051单片机按键的使用,包括独立按键以及矩阵按键的使用以及其原理,其中代码实例包括: 1.独立按键 K1 控制 D1 指示灯亮灭 2.通过数码管显示矩阵按键 S1-S16 按下后键值 0-F 文章目录 IO 的使用--按键一、按键消抖二、独立按…

node.js和npm的安装与环境配置(2023最新版)

目录 安装node.js测试是否安装成功测试npm环境配置更改环境变量新建系统变量 安装node.js 1、进入官网下载:node.js官网 我选择的是windows64位的,你可以根据自己的实际情况选择对应的版本。 2、下载完成,安装。 打开安装程序 接受协议 选…

【RabbitMQ基础编程模型】

文章目录 RabbitMQ基础编程模型基础编程模型step1、首先创建连接,获取Channelstep2、声明Exchange-可选step3、声明queuestep4、声明Exchange与Queue的绑定关系-可选 RabbitMQ基础编程模型 RabbitMQ的使用生态已经相当庞大,支持非常多的业务场景&#x…

五、HotSpot细节实现

一、并发标记与三色标记 问题:三色标记到底发生在什么阶段,替代了什么。并发标记 1、并发标记( Concurrent Marking) 从 GC Root 开始对堆中对象进行可达性分析,递归扫描整个堆里的对象图,找出要回收的对象,这阶段耗…

【大数据分析】

系列文章目录 文章目录 系列文章目录前言一、数据分析框架二、数据分析方法1.数据清洗&数据探索2.数据清洗之异常值判别3.数据清洗之缺失值处理4.数据探索5.结构优化 三、大数据可视化1.大数据可视化概念1.1 定义1.2 数据可视化的意义 2.可视化类型和模型2.1 科学可视化2.2…

网站内容审核功能的重要性

网站内容审核功能的重要性在保护用户权益、维护网站形象、遵守法律法规等方面都起到了至关重要的作用。 维护网站的合法性和道德性:网站内容审核功能的存在可以帮助过滤和删除违法、淫秽、恶意、诈骗等不良内容,保证网站内容的合法性和道德性。 保护用…

前端部分知识点总结

小程序接口的通用协议是什么 小程序接口的通用协议是HTTPS。 小程序体验版本打开后显示空白,只有点击"打开调试模式"再次打开才能显示正常,原因是体验版本的接口协议是HTTP,但小程序只认HTTPS,所以不会去调接口&#…

Python表单处理

目录 通过Flask处理表单 通过Flask-WTF处理表单 通过Flask-WTF验证表单 通过Flask处理表单 表单是在网页中搜集用户信息的各种表单控件的集合区域,表单控件包括文本框、单选框、复选框、提交按钮等,用于实现客户端和服务器端之间的数据交互。 利用F…

用Java写一个拼图游戏

目录 运行出的游戏界面如下: User类 CodeUtil类 游戏设置 登陆代码 注册代码 游戏代码 运行出的游戏界面如下: 按住A不松开,显示完整图片;松开A显示随机打乱的图片 User类 package domain;/*** ClassName: User* Author: Kox*…

AI人工智能和大模型(概念)之二

Pytorch的安装 通过Anaconda安装PyTorch更为便捷 张量:(1)Tensor可以是高维的(2)并非是PyTorch中才有的概念(3)PyTorch运算的基本单元(4)基础数据定义和运算&#xff0…

【Windows】安装 Apache服务 -- 实操详细版

👨‍🎓博主简介 🏅云计算领域优质创作者   🏅华为云开发者社区专家博主   🏅阿里云开发者社区专家博主 💊交流社区:运维交流社区 欢迎大家的加入! 🐋 希望大家多多支…

使用Pytorch实现变分自编码器

使用Pytorch实现变分自编码器 可以结合这篇VAE讲解文章阅读这篇blog post代码。 # Import necessary packages. import os import torch import torch.nn as nn import torch.nn.functional as F import torchvision from torchvision import transforms from torchvision.ut…

java打包到docker,以及idea远程调试

这里主要介绍 dockerfile的打包方式 一、打包jar包到容器 1. 在要打包的项目中创建dockerfile,dockerfile与项目的pom.xml是同级 2. 编辑dockerfile文件 FROM openjdk:8 VOLUME ["/data/untitled"] COPY target/untitled-1.0.jar "/app.jar"…

人工智能技能要求

人工智能技能要求可以根据具体的职位和任务而有所不同,但一般来说,以下是一些常见的人工智能技能要求: 编程技能:掌握至少一种编程语言,并能够运用该语言进行算法开发和数据处理。 机器学习:了解常见的机器…

开关电源基础认知

前言 从开关电源(BMS充电器)入门硬件之——开关电源基础认知 有纰漏请指出,转载请说明。 学习交流请发邮件 1280253714qq.com 1.什么是开关电源 开关电源是利用现代电力电子技术,控制开关管开通和关断的时间比率,维…

【vSphere | VM】虚拟机自定义规范Ⅲ —— 创建 Linux 虚拟机自定义规范

目录 4. 创建关于Linux系统的虚拟机自定义规范4.1 新建 Linux 虚拟机自定义规范(1)名称和目标操作系统(2)计算机名称(3)时区(4)自定义脚本(5)网络&#xff08…