# datapoint

**Repository Path**: hacker_jiayan/datapoint

## Basic Information

- **Project Name**: datapoint
- **Description**: No description available
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-08-12
- **Last Updated**: 2024-08-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# datapoint 一行代码实现无侵入数据埋点跟前端监控

# 前端监控和数据埋点
## 前端监控与数据埋点介绍
### 一、前端监控概述

前端监控是指对Web应用或网站在用户端的表现进行实时监控和数据分析的技术手段。它主要关注用户在前端页面的行为、性能表现以及可能出现的异常问题。前端监控在现代Web开发中扮演着至关重要的角色，是保障网站稳定性、性能优越性以及用户满意度的重要工具。

### 二、数据埋点定义与意义

> 定义：数据埋点（Data Buried Point）是在应用中特定的流程收集一些信息，用来跟踪应用使用的状况，后续用来进一步优化产品或是提供运营的数据支撑。数据埋点是数据采集领域（尤其是用户行为数据采集领域）的术语，指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。

**意义：**

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

### 三、前端监控的分类

前端监控主要分为三类：

1. 数据监控：记录上报产品在用户端的使用情况，以数据为导向，帮助团队做决策。常见的包括PV/UV（页面浏览量/用户访问量）、页面停留时间、访问入口等。
2. 性能监控：记录上报产品在用户端的性能表现，如首屏加载时间、白屏时间、请求响应时间、页面渲染时间等。
3. 异常监控：记录上报代码在执行过程中的异常，及时发现并修复线上运行代码的缺陷，如JavaScript的异常监控、样式异常的监控等。

### 四、数据埋点的方法

目前常见的前端埋点方法分为三种：

1. 代码埋点：以嵌入代码的形式进行埋点，如需要在用户点击时插入一段代码来保存监听行为。这种方式需要开发人员对业务逻辑有深入了解，并能够在关键位置插入埋点代码。
2. 可视化埋点：通过可视化交互的手段代替代码埋点，将业务代码和埋点代码分离，提供一个可视化交互的页面来配置埋点事件。这种方式操作简单，但可能受限于工具的功能和定制性。
3. 无埋点：并非不需要埋点，而是自动收集用户的行为数据，无需手动添加埋点代码。这种方式适用于简单的数据采集需求，但在实际应用中可能因数据上报量级大和存储成本高而受限。

### 五、数据埋点的重要性

1. 数据驱动决策：数据埋点提供的数据是数据分析和决策的基础，帮助企业了解用户需求和行为习惯，从而做出更精准的决策。
2. 优化产品和服务：通过对埋点数据的分析，可以发现产品的不足之处和用户的真实需求，进而优化产品功能和服务体验。
3. 提高运营效率：了解用户的兴趣和行为后，企业可以更有针对性地制定运营策略，提高运营效率和收益。
3. 预防风险：异常监控可以帮助企业及时发现并修复代码中的缺陷，避免潜在的风险和损失。

> 综上所述，前端监控和数据埋点在现代Web开发中具有重要意义，是保障网站稳定性、提升用户体验和优化运营策略不可或缺的技术手段。

# 目前实现的功能
1. 数据上报的方式：

- 这里是列表文本通过new Blob() 和 navigator.sendBeacon 模式实现接口数据上报
- 通过websocket模式实现实时上报
- 通过web worker的方式实现后台子线程数据上报
- 通过分组集中一次性上报模式实现延时上报：用到队列，单例等，用户每一次触发，先放到队列中，当满足队列已满的条件时，无限出队，直到队列为空时，再次入队，在出队时，程序同步等待，直到可以入队，程序继续执行 
- 来一个上报请求立即上报，接着再来一个则检查是否有正在上报的请求，没有的话则继续进行上报，有的话需要等待上一个请求上报完毕再进行上报


#### 介绍
{**以下是 Gitee 平台说明，您可以替换此简介**
Gitee 是 OSCHINA 推出的基于 Git 的代码托管平台（同时支持 SVN）。专为开发者提供稳定、高效、安全的云端软件开发协作平台
无论是个人、团队、或是企业，都能够用 Gitee 实现代码托管、项目管理、协作开发。企业项目请看 [https://gitee.com/enterprises](https://gitee.com/enterprises)}

#### 软件架构
软件架构说明


#### 安装教程

1.  npm install @jycoder/datapoint --save
2.  new tracker.flowTracker({
                requestUrl: 'http://localhost:9000/tracker', // 请求的埋点接口
                historyTracker: false,
                hashTracker: false,
                domTracker: true,
                jsError: false
            }, ["click", "dblclick"], 'default', 10, false)
3.  new tracker.mergeTracker({
                requestUrl: 'http://localhost:9000/tracker', // 请求的埋点接口
                historyTracker: false,
                hashTracker: false,
                domTracker: true,
                jsError: false
            }, ["click", "dblclick"], 'default', 10, false)
4.  new tracker.Tracker({
                requestUrl: 'http://localhost:9000/tracker', // 请求的埋点接口
                historyTracker: false,
                hashTracker: false,
                domTracker: true,
                jsError: false
            }, ["click", "dblclick"], 'default', 10, false)
3.  xxxx

#### 使用说明

1.  xxxx
2.  xxxx
3.  xxxx

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request