轻量级埋点sdk搭建，便捷更全面 android 埋点方案
liuian 2024-12-26 15:05 56 浏览
引言
借助埋点监控sdk,我们可以统计用户的点击，页面pv、uv，脚本错误、dom上报等关键信息等。
一：项目初始化
1.技术栈
- Ts
- rollup打包工具
2.搭建项目
npm init -y
tsc --init
npm install typescript -D
npm install rollup-plugin-dts -D
npm install rollup-plugin-typescript2 -D- dist:打包产物
- service:后端服务
- index.html:测试埋点
3.配置package.json打包命令
"scripts": {
"dev": "rollup -c"
},4.配置rollup.config.js
import ts from 'rollup-plugin-typescript2'
import path from 'path'
import dts from 'rollup-plugin-dts';
export default [{
//入口文件
input: "./src/core/index.ts",
output: [
//打包esModule
{
file: path.resolve(__dirname, './dist/index.esm.js'),
format: "es",
name:'tracker'
},
//打包common js
{
file: path.resolve(__dirname, './dist/index.cjs.js'),
format: "cjs"
},
//打包 AMD CMD UMD
{
input: "./src/core/index.ts",
file: path.resolve(__dirname, './dist/index.js'),
format: "umd",
name: "tracker"
}
],
//配置ts
plugins: [
ts(),
]
}, {
//打包声明文件
input: "./src/core/index.ts",
output:{
file: path.resolve(__dirname, './dist/index.d.ts'),
format: "es",
},
plugins: [dts()]
}] 5.测试
在rollup.config.js配置中，我们将src/core/index.ts作为入口文件。因此随便在index.ts文件写点代码 然后在终端中输入:npm run dev。观察dist目录输出的打包产物。
console.log("test")二：埋点设计
1. 类型定义：src/type/index.ts
/**
* @requestUrl 接口地址
* @historyTracker history上报
* @hashTracker hash上报
* @domTracker 携带Tracker-key 点击事件上报
* @sdkVersionsdk版本
* @extra透传字段
* @jsError js 和 promise 报错异常上报
*/
export interface DefaultOptons {
uuid: string | undefined,
requestUrl: string | undefined,
historyTracker: boolean,
hashTracker: boolean,
domTracker: boolean,
sdkVersion: string | number,
extra: Record<string, any> | undefined,
jsError:boolean,
whiteScreen:boolean
}
//用户必传参数
export interface Options extends Partial<DefaultOptons> {
requestUrl: string
}
//版本号
export enum Trackerversion {
version = "1.0.0"
}2. 埋点类设计:src/core/index.ts
埋点监控主要对以下行为进行监听
- 指定的dom
- js错误
- pv
export default class Tracker {
private data:Options
public constructor(options:Options) {
}
//dom上报
private domTracker() {
}
//js错误上报
private jsError() {
}
//pv上报
private pv(){
}
//数据上报到后端
private sendData<T>(data:T) {
}
}3.对dom的监控上报
对dom的监控上报设计规则如下：监控页面html节点中指定dom的操作事件，例如监听此类dom的移入、移出、点击事件等。
export default class Tracker {
private data:Options
//dom监听的事件列表
private eventList:string[] = ['click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup', 'mouseenter', 'mouseout', 'mouseover']
public constructor(options:Options) {
}
//dom上报
private domTracker() {
this.eventList.forEach(item=>{
window.addEventListener(item,e=>{
let element = e.target as HTMLElement
let isTarget = element.getAttribute('target-key')
if(isTarget) {
this.sendData({type:'dom'})
}
})
})
}
//js错误上报
private jsError() {
}
//pv上报
private pv(){
}
//数据上报到后端
private sendData<T>(data:T) {
}
}
4.对js错误的监听
js的错误可以划分为
- 逻辑错误
- 资源加载错误
- promise错误
逻辑错误监听
js中的逻辑表达式错误都可以通过window.addEventListener('error',fn)去捕获
window.addEventListener("error",e=>{
console.log(e)
})
console.log(a)资源加载错误
资源加载错误最常见的就是页面的图片、图标等资源连接丢失，这种错误也是通过window.addEventListener('error',fn)去捕获,为了区分逻辑错误，可以通过ErrorEvent判断当前错误类型，逻辑错误事件的原型链上存在ErrorEvent
window.addEventListener('error',e=>{
e.preventDefault();
const isErrorEvent:boolean = e instanceof ErrorEvent//判断错误类型
if(!isErrorEvent) {
this.sendData({type:'resource',msg:e.message})//资源加载错误
return
}
this.sendData({type:'js',msg:e.message})//js错误
},true)Promise错误
promise错误通过unhandledrejection进行捕获，值得注意的是promise的错误分为两种
promise内部产生的错误
promise的reject状态未捕获
window.addEventListener('unhandledrejection',(e:PromiseRejectionEvent)=>{
e.preventDefault()
e.promise.catch((error)=>{
let msg = error?.message || error//区分promise的两种错误消息
this.sendData({type:'promise',msg})
})
})完整代码
export default class Tracker {
private data:Options
//dom监听的事件列表
private eventList:string[] = ['click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup', 'mouseenter', 'mouseout', 'mouseover']
public constructor(options:Options) {
}
//dom上报
private domTracker() {
this.eventList.forEach(item=>{
window.addEventListener(item,e=>{
let element = e.target as HTMLElement
let isTarget = element.getAttribute('target-key')
if(isTarget) {
this.sendData({type:'dom'})
}
})
})
}
//js错误上报
private jsError() {
//1.脚本错误，资源错误
window.addEventListener('error',e=>{
e.preventDefault();
const isErrorEvent:boolean = e instanceof ErrorEvent
if(!isErrorEvent) {//资源错误
this.sendData({type:'resource',msg:e.message})
return
}
this.sendData({type:'js',msg:e.message})
},true)
//2.promise错误
window.addEventListener('unhandledrejection',(e:PromiseRejectionEvent)=>{
e.preventDefault()
e.promise.catch((error)=>{
let msg = error?.message || error
this.sendData({type:'promise',msg})
})
})
}
//pv上报
private pv(){
}
//数据上报到后端
private sendData<T>(data:T) {
}
}
5.对pv的监听
页面的访问量监听我们可以通过监听history和hash两种路由去实现数据监听上报。
hash路由监听
hash路由的监听直接使用hashchange事件进行监听
window.addEventListener('hashchange',e=>{
this.sendData({type:'history',msg:e})
})
history路由监听
与hash路由不同的是，history路由模式下无法通过addEventListener去监听其路由改变。因此只能通过自定义事件去监听history路由改变。设计思路如下:首先history路由的跳转只能通过pushState、replaceState去操作，那么我们可以重写history路由的pushState、replaceState，在其在完成路由跳转的同时触发自定义事件进行pv的统计。总结如下
- 自定义pushState、replaceState事件，自定义事件名称可以不唯一，此处为了与路由方法保持统一。
- 重写history路由的pushState、replaceState方法
- 保留原有方法的功能（否则无法完成路由跳转），同时触发步骤0定义的事件，完成数据的上报。
如何自定义事件？
- 创建自定义事件对象
- 通过addEventListener监听自定义事件
- 在执行某些操作时派发自定义事件，此时步骤2可以捕获到。
<button>click</button>
const e = new Event('testEvent');
window.addEventListener('testEvent',e=>{
console.log('捕获到自定义事件啦');
})
function btnClick() {
window.dispatchEvent(e)
}按照上述步骤我们创建了自定义事件testEvent,当按钮被点击时就可以拦截到自定义事件。
history路由监听代码
export default class Tracker {
private data:Options
//dom监听的事件列表
private eventList:string[] = ['click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup', 'mouseenter', 'mouseout', 'mouseover']
public constructor(options:Options) {
}
//dom上报
private domTracker() {
this.eventList.forEach(item=>{
window.addEventListener(item,e=>{
let element = e.target as HTMLElement
let isTarget = element.getAttribute('target-key')
if(isTarget) {
this.sendData({type:'dom'})
}
})
})
}
//js错误上报
private jsError() {
//1.脚本错误，资源错误
window.addEventListener('error',e=>{
e.preventDefault();
const isErrorEvent:boolean = e instanceof ErrorEvent
if(!isErrorEvent) {//资源错误
this.sendData({type:'resource',msg:e.message})
return
}
this.sendData({type:'js',msg:e.message})
},true)
//2.promise错误
window.addEventListener('unhandledrejection',(e:PromiseRejectionEvent)=>{
e.preventDefault()
e.promise.catch((error)=>{
let msg = error?.message || error
this.sendData({type:'promise',msg})
})
})
}
//pv上报
private pv(){
//hash监听
window.addEventListener('hashchange',e=>{
this.sendData({type:'hash',msg:e})
})
//history监听
this.histroryType.forEach((item:keyof History)=>{
let origin = history[item];
let eventHistory = new Event(item);
(window.history[item] as any) = function(this:any){
origin.apply(this,arguments);
window.dispatchEvent(eventHistory)
}
window.addEventListener(item,()=>{
this.sendData({type:'history',msg:item})
})
})
}
//数据上报到后端
private sendData<T>(data:T) {
}
}6.完整代码
import { DefaultOptons,Options,Trackerversion } from "./../type/index"
export default class Tracker {
private data:Options
private histroryType:Partial<keyof History>[]
private eventList:string[] = ['click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup', 'mouseenter', 'mouseout', 'mouseover']
public constructor(options:Options) {
this.histroryType = ['pushState','replaceState']
this.data = Object.assign(this.initConfig(),options);//初始化配置对象
this.installExtra()
}
private domTracker() {
this.eventList.forEach(item=>{
window.addEventListener(item,e=>{
let element = e.target as HTMLElement
let isTarget = element.getAttribute('target-key')
if(isTarget) {
this.sendData({type:'dom'})
}
})
})
}
//数据上报
private sendData<T>(data:T) {
const params = Object.assign({},data,{time:Date.now()})
let headers = {
type: 'application/x-www-form-urlencoded'
};
let blob = new Blob([JSON.stringify(params)], headers);
console.log('blob',blob)
navigator.sendBeacon(this.data.requestUrl,blob)
}
private jsError() {
//1.脚本错误，资源错误
window.addEventListener('error',e=>{
e.preventDefault();
const isErrorEvent:boolean = e instanceof ErrorEvent
if(!isErrorEvent) {//资源错误
this.sendData({type:'resource',msg:e.message})
return
}
this.sendData({type:'js',msg:e.message})
},true)
//2.promise错误
window.addEventListener('unhandledrejection',(e:PromiseRejectionEvent)=>{
e.preventDefault()
e.promise.catch((error)=>{
let msg = error?.message || error
this.sendData({type:'promise',msg})
})
})
}
//定制功能
public installExtra() {
//history
if(this.data.historyTracker) {
this.histroryType.forEach((item:keyof History)=>{
let origin = history[item];
let eventHistory = new Event(item);
(window.history[item] as any) = function(this:any){
origin.apply(this,arguments);
window.dispatchEvent(eventHistory)
}
window.addEventListener(item,()=>{
this.sendData({type:'history',msg:item})
})
})
}
//hash
if(this.data.hashTracker) {
window.addEventListener('hashchange',e=>{
this.sendData({type:'hash',msg:e})
})
}
//dom手动上报
if(this.data.domTracker) {
this.domTracker();
}
//jsError
if(this.data.jsError) {
this.jsError()
}
}
//初始化配置项
private initConfig():DefaultOptons {
return <DefaultOptons>{
sdkVersion:Trackerversion.version,
historyTracker:false,
hashTracker:false,
domTracker:false,
jsError:false,
}
}
}三：测试使用
后端服务
创建后端文件夹service，终端输入
npm init -y
npm install express cors -S创建index.js
const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors())
app.use(express.urlencoded({ extended: false }))
app.post('/tracker', (req, res) => {
console.log(req.body);
res.send(200)
})
app.listen(9000, () => {
console.log('服务启动在9000');
})终端输入node index.js启动服务
前端index.html测试
- 终端输入：npm run dev进行项目的打包
- html文件导入打包的js文件测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./dist/index.js"></script>
<script>
new tracker({
requestUrl:'http://127.0.0.1:9000/tracker',
historyTracker:true,
domTracker:true,
jsError:true
})
</script>
</head>
<body>
<button target-key="dzp">dzp</button>
<script>
</script>
</body>
</html>四：发布npm
- 配置package.json文件
{
"name": "dzp-tracker",//包的名称，必须唯一
"version": "1.0.3",//当前版本，每次发布必须与上一次不同
"description": "maidian",
"main": "dist/index.cjs.js",//command模式下导入
"module": "dist/index.esm.js",//es module模式下导入
"browser":"dist/index.js",//amd模式下导入使用
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "rollup -c"
},
"files":["dist"],
"keywords": ["埋点"],
"author": "dongzeping",
"license": "ISC",
"devDependencies": {
"rollup": "^2.76.0",
"rollup-plugin-dts": "^6.1.0",
"rollup-plugin-typescript2": "^0.36.0",
"typescript": "^5.2.2"
}
}发布到npm
npm publish五：react导入测试
npm i dzp-tracker
index.js文件初始化埋点sdk,测试并使用正常。
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import tracker from "dzp-tracker"
const root = ReactDOM.createRoot(document.getElementById('root'));
new tracker({
requestUrl:'http://127.0.0.1:9000/tracker',
historyTracker:true,
domTracker:true,
jsError:true
})
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();轻量级埋点sdk搭建
原文链接：https://juejin.cn/post/7298641610431332378
相关推荐
- win11怎么样（win11怎么样删除软件）
-
win11适合打游戏的。主要原因如下：1、win11的升级并不会丢失原本系统中的文件和软件，因此用户可以在升级后直接玩原本的游戏。2、win11虽然是一款新系统，但是在游戏性能的表现上已经有着非常好的...
- adobe flash官方下载（adobe flash player完整版下载）
-
您可以从Adobe官网（https://get.adobe.com/flashplayer/）下载AdobeFlashPlayer最新版本，并在您的手机上安装它。Adobe宣布终止研发移动设备fl...
-
- 五笔打字字根表（金山五笔打字字根表）
-
1区横起笔、G键：王旁青头兼五一；F键：土士二干十寸雨；D键：大三肆头古石厂；S键：木丁西边要无女；A键：工戈草头右框七。2区竖起笔、H键：目止具头卜虎皮；J键：日曰两竖与虫依；K键：口中两川三个竖；L键：田框四车甲单底；M键：山由贝骨下...
-
2025-11-10 21:55 liuian
- u盘写保护打开方法（u盘写保护打不开怎么把它格式化）
-
1.查看U盘上是否有写保护开关，打开开关（通常写保护开关在U盘的侧面是一个滑块）。2.尝试重新插入U盘读取数据。解决方案二：运行磁盘检测修复命令1.使用组合键“Win+R”，唤出运行页，在对话框中...
- 微软密钥在哪里找（bitlocker万能恢复密钥）
-
如果您使用的是MicrosoftOffice365，密钥激活的账户是免费订阅的，因此不需要查看。您可以通过以下步骤免费获取Office365:1.访问Microsoft官网(https...
- 大学生一般买什么笔记本电脑
-
回答：联想小新Air15锐龙版性能轻薄本15.6英寸全面屏轻薄笔定位：轻薄本配置：处理器(R7-5700U)、显卡(集显)、分辨率(1920×1080)、内存(16G)、尺寸(15.6英寸)评价：20...
- 樱花影院电视剧电影免费观看
-
像科学佳萌一样剧情的漫画有《某科学的超电磁炮》。《某科学的超电磁炮》讲述的是有230万人口，其中八成人口为学生的“学园都市”，是比其他地区科技更为先进，并从事“超能力开发”的特殊地区。而整座学园都市中...
- ghost软件的功能（ghost软件类型）
-
Ghost软件的功能就是把分区或者是硬盘做成镜像，或者是把镜像文件恢复到分区或者是恢复到硬盘。完整的功能就是把某一个分区备份成一个镜像文件，或者是把整个硬盘备份成一个镜像文件。在需要的时候可以把这个镜...
- 360一键还原系统（360一键还原系统怎么关闭）
-
360安全卫士中选择功能大全，系统工具，系统重装，即可完成操作。1、首先，在电脑上打开360安全卫士的软件，在打开的主界面点击术马查杀。2、然后，在术马查杀的界面点击左下方恢复区的图标。...
- mac安装虚拟机（mac安装虚拟机可以用网银吗）
-
可以安装，步骤如下第一步：首先在Mac中下载VirtualBox工具，然后安装(下载地址看图或去网上搜索Mac版VirtualBox虚拟机工具)。 第二步：下载完成后，打开VirtualBox，点击...
- 笔记本键盘（笔记本键盘个别键失灵怎么修复）
-
键盘分功能键区和字母数字符号键区。功能键区环绕在键盘周边，可以单键使用（如F1)，也可以组合键使用。主要用于控制电脑部分功能（如触摸板）的开关、撤销（Esc）、帮助（如F1)、执行操作（Enter)、...
- tplogin cn登录管理界面（tplogincn登录入口管理员密码）
-
TP-LINK路由器的登录入口(管理页面)地址是tplogin.cn，我们只需打开浏览器，在浏览器顶部的地址栏里输入路由器的管理页面地址tplogin.cn就能打开tplink登录入口页面了。tplo...
- windowsxp专业版密钥（xp专业版系统产品密钥多少）
-
XP序列号：BX6HT-MDJKW-H2J4X-BX67W-TVVFG。采用最新SP2(2180)简体中文正式版制作CD-KEY:DG8FV-B9TKY-FRT9J-6CRCC-XPQ4G采...
- 163邮箱登录入口官网网页（163邮箱官方登录页面）
-
1.在网页上搜索maiI163邮箱登录，如果有邮箱账号密码的话就直接输入并点击“登录”，没有的话就点击“立即注册”。2.点击“立即注册”后进入页面，输入信息点击“注册”。3.注册成功后就直接搜索登录。...
- pe系统安装教程（pe系统装机教程）
-
用PE进入电脑装系统方法：1、进入pe后，选择在u盘里的iso系统文件。右击它，选择加载为虚拟磁盘。2、点击进来之后，再点击确定就可以挂载成功了。3、挂载成功后去桌面打开windows安装器。4、第一...
- 一周热门
- 最近发表
- 标签列表
-
- python判断字典是否为空 (50)
- crontab每周一执行 (48)
- aes和des区别 (43)
- bash脚本和shell脚本的区别 (35)
- canvas库 (33)
- dataframe筛选满足条件的行 (35)
- gitlab日志 (33)
- lua xpcall (36)
- blob转json (33)
- python判断是否在列表中 (34)
- python html转pdf (36)
- 安装指定版本npm (37)
- idea搜索jar包内容 (33)
- css鼠标悬停出现隐藏的文字 (34)
- linux nacos启动命令 (33)
- gitlab 日志 (36)
- adb pull (37)
- python判断元素在不在列表里 (34)
- python 字典删除元素 (34)
- vscode切换git分支 (35)
- python bytes转16进制 (35)
- grep前后几行 (34)
- hashmap转list (35)
- c++ 字符串查找 (35)
- mysql刷新权限 (34)