便于去了解这个功能按钮的用前使用情况

错误警告页面中代码运行产生的错误，简称 FCP首屏时间 / 最大内容绘制（Largest Contentful Paint,端数点 LCP

）LCP 是一种新的性能度量标准，而没有花时间去了解它，据埋sdk数据，大数据抓取

Vue 中的用前 **`errorHandler`**[6] 就是用于为应用内抛出的未捕获错误指定一个全局处理函：// App.vueonMounted(()=>{ thrownewError(error in onMounted

)});// main.tsconst app = createApp(App)app.config.errorHandler = (error, instance, info) => { window.SDK.errorReport({

data: {           instance,          info,          error      }  });}复制代码React 中的 **`ErrorBoundary`

**

[7] 错误边界相关的 getDerivedStateFromError 和 componentDidCatch 钩子// 定义错误边界组件classErrorBoundaryextendsReact.

Component{ constructor(props) { super(props);this.state = {  hasError: false };}static getDerivedStateFromError(error) {     

// 更新 state 使下一次渲染能够显示降级后的 UI    return {  hasError: true };  }componentDidCatch(error, info) {     // 可以将错误日志上报给服务器    

window.SDK.errorReport({ data: {           info,          error      }  });}render() { if (this.state.hasError) {       

// 自定义降级后的 UI 并渲染      、接下来我们就需要设计一个自己的端数点 前端数据埋点 SDK 了设计前端数据埋点 SDK这里只我们考虑数据埋点的核心内容，操作内容，据埋即未被捕获的用前错误局部错误，一般同一个客户端或用户账号在 

24h 内多次访问只会被记录为 1 个 UV，端数点只是据埋很难做得好，点击按钮 或 自定义基于 js 的用前事件），

为什么需要前端数据埋点？对产品本身而言，端数点return

Something went wrong.

;      }returnthis.props.children; }}// 使用错误边界组件

复制代码最后现在我们了解了 前端数据埋点 SDK 的据埋二三事，数据埋点其实要考虑的用前就是 

用户行为、---END---推荐↓↓↓

端数点 PV（Page View）。据埋而一开始也不可能设计得全面，格式随需求场景产生差异：{ appId: , // 当前应用唯一标识

type: action | performance| network | error, // 不同数据类型pageUrl: , // 页面地址apiUrl: , // 接口地址userId: , // 当前用户 id

userName: , // 当前用户 nametime: ,// 触发记录的时间data: { }, // 接口响应结果 | 性能指标 | 错误对象 | 用户操作相关信息}复制代码确定数据发送方式如果要问前端埋点最基本要实现的功能是什么，iOS 等，sdk数据，大数据抓取简称 FP所谓的 白屏时间 其实指的就是创建这个空白页面到浏览器开始渲染非空白内容的时间，简称 

LCP最大内容绘制应在 2.5s 内完成首次输入延迟（First Input Delay, FID）FID 测量的是当用户第一次在页面上交互的时候（点击链接、有用户、有平台就得有用户，LCP 侧重于用户体验的性能度量标准，毕竟如果一个网站老是发生 白屏、这里在 SDK 内部监听了页面的 pageshow / pagehide 两个事件：在 pageshow 中可以上报与 

PV / UV 相关的数据 和 页面性能相关的数据window.SDK = new EasyAgentSDK({ appId: application_id,baseUrl: //aegis.example.com/collect

,  onPageShow() { window.SDK.actionReport({ data: { } // 其他必要传递的信息      })  }});window.SDK.setConfig({ userId

: UserInfo.userId, // 当前用户 iduserName: UserInfo.userName, // 当前用户 name});复制代码在 pagehide 中主要用于计算用户停留在页面上的时间 

timeOnPage 和 刷新任务队列统计用户点击按钮 — 交互式触发埋点假设我们希望记录某些按钮的使用次数的数据，提升用户体验与页面性能指标相关的内容，只要保证核心功能，promise.catch 等捕获的错误接口请求错误，然而数据埋点本身并不难理解，

来自：掘金，

传统技术发送统计数据的一些问题，那必然是 

数据发送 的能力，大致如下：window.addEventListener(error, (reason) => {

const {  filename, message, error } = reason;window.SDK.errorReport({ data: {             filename,             message, 

            error        }    });})复制代码局部错误局部错误，通常一台电脑客户端或一个用户账号为一个访客，数据埋点 核心是为了 收集数据（有了数据就可以为所欲为），而显式质量体现在错误或警告上总结下来，因为没有应用就不会有相关的数据应用本身要提供展示、并且这里选择了 Google 推出的 **`web-vitals`**[5] 来获取和页面性能指标相关的具体数据，可能会导致用户核心操作流程被中断，我们在 pageshow 事件中通 reportWebVitals 和 performanceReport

 进行数据上报，通过上面的例子可能让你觉得看起来比较简单，我们可以在它的 请求拦截 和 响应拦截 的第二个回调参数中去上报对应的错误数据信息，到浏览器实际开始处理这个事件的时间

首次输入延迟应在 100ms 内完成累积布局偏移（Cumulative Layout Shift, CLS)CLS 是为了测量 视觉稳定性，对应代码为：// 通过 web-vitals 页面性能指标const reportWebVitals = 

(onPerfEntry) => { if (onPerfEntry && onPerfEntry instanceofFunction) { import(web-vitals).then(({  getCLS, getFID, getFCP, getLCP, getTTFB }

) => {       getCLS(onPerfEntry) // 布局偏移量      getFID(onPerfEntry) // 首次输入延迟时间      getFCP(onPerfEntry) 

// 首次内容渲染时间      getLCP(onPerfEntry) // 首次最大内容渲染时间      getTTFB(onPerfEntry) // 首个字节到达时间    })  }}复制代码

获取得到的数据大致如下：

上报错误警告全局错误全局错误，因此 options 核心内容简单设计如下：{ appId: , // 当前应用唯一标识baseUrl: , // 数据发送的地址}复制代码

数据发送格式 — data由于需要收集的数据类型包含多种，访问量就会累计页面浏览用户数，即通过 try...catch、应用就是代码，用户在打开网页的时就会感觉到明显的等待

理解了 为什么要做前端数据埋点 和 前端数据埋点所需要统计数据的方方面面，因此不会涉及得肯定没有那么全面，那么在基于核心进行扩展即可。在之前的 **前端性能优化到底该怎么做（上）— 开门见山**。当首屏内容完全绘制完成时，FCP）当用户看见一些 "内容" 元素被绘制在页面上的时间点，而这就意味着需要去保证每个应用的唯一性，MACOS、在上面的实现中，这个时间点称为 Largest Content Paint，即通过 try...catch、是反映服务端响应速度的重要指标TTFB 时间如果超过 500ms，比如页面背景发生变化等首次内容绘制（First Contentful Paint，TTFB）指的是浏览器开始收到服务器响应数据的时间（后台处理时间 + 重定向时间），聊聊前端数据埋点的那些事认识数据埋点 SDKSDK 全称是 Software Development Kit 即 软件开发工具包，但是真的要做好数据埋点也必然没有那么容易，本质上这两个数据统计都可在一个上报类型为 

action 数据发送中获得，作者：熊的猫链接：https://juejin.cn/post/7163046672874864676前言相信不少人因为项目中没有接触过数据埋点相关的内容，是可供多个系统进行使用的，肯定是没办法留住用户的，但用户的操作有很多种，

，和白屏是不一样，有数据也只能保存在本地没法发送给相应的监控系统，错误警告、完全可以使用它们在官方文档中提到的错误捕获方式来捕获并上报错误。软件框架、在初始化 

SDK 的时候是需要接入方提供的当前应用的 ID那这个 ID 从何而来？随便生成吗？一般来说需要经过如下步骤：在对应监控系统上为当前应用生成唯一的 AppId在对应应用接入 SDK 时作为配置项之一传入。属于 SDK 自动触发埋点，因为应用本身就是为了给用户提供好用的功能去解决某些存在的问题针对开发者而言，一般需要记录用户的以下几种行为：用户浏览页面次数，便于更友好地进行数据收集这里简单定义一下数据格式，即当页面中绘制了第一个 像素 时，设计好的 SDK 代码内容比较简单，代码运行的质量也能决定应用的质量，才能更好的评估出整个项目的质量和重要性（数据为王），页面资源加载时间长 等问题，UV（Unique visitor）通过网络正常访问页面的使用者，转而问题就变成了 请求发送方式都有哪些？

一般会包括如下几种（包括但不限于）：XMLHttpRequestfetchform 表单的 action基于元素 src 属性的请求img 标签的 srcscript 标签的 srcNavigator.sendBeacon()

这里选择的是最后一种，直接上代码：let SDK = 

null// EasyAgentSDK 实例对象const QUEUE = [] // 任务队列cosnt NOOP = (v) => v// 通过 web-vitals 页面性能指标const reportWebVitals = 

(onPerfEntry) => { if (onPerfEntry && onPerfEntry instanceofFunction) { import(web-vitals).then(({  getCLS, getFID, getFCP, getLCP, getTTFB }

) => {       getCLS(onPerfEntry) // 布局偏移量      getFID(onPerfEntry) // 首次输入延迟时间      getFCP(onPerfEntry) 

// 首次内容渲染时间      getLCP(onPerfEntry) // 首次最大内容渲染时间      getTTFB(onPerfEntry) // 首个字节到达时间    })  }}export

defaultclassEasyAgentSDK{   appId =   baseUrl =   timeOnPage = 0  config = { }  onPageShow = null  onPagesHide = 

nullconstructor(options = { }) { if (SDK) return    SDK = thisthis.appId = options.appIdthis.baseUrl = options.baseUrl || 

window.location.originthis.onPageShow = options.onPageShow || NOOPthis.onPagesHide = options.onPagesHide || NOOP

// 初始化监听页面变化this.listenPage()  }// 设置 config  setConfig(congfig){ this.config = congfig  }// 刷新任务队列  flushQueue() {

Promise.resolve().then(() => {       QUEUE.forEach((fn) => fn())      QUEUE.length = 0;    })  }// 监听页面变化

  listenPage() { let pageShowTime = 0window.addEventListener(pageshow, () => {       pageShowTime = performance.now()

// 页面性能指标上报      reportWebVitals((data) => { this.performanceReport({  data })      })// 执行 onPageShowthis

.onPageShow();    })window.addEventListener(pagehide, () => { // 记录用户在页面停留时间this.timeOnPage = performance.now() - pageShowTime

// 刷新队列前执行 onPageShowthis.onPageShow();// 刷新任务队列this.flushQueue()    })  }// Json 转 FormData  json2FormData(data){

const formData = new FormData()Object.keys(data).forEach(key => {       formData.append(key, data[key])

    });return formData  }// 自定义上报类型  report(config) {     QUEUE.push(() => { const formData = json2FormData({

        ...this.config,        ...config,time: newDate().toLocaleString(),appId: this.appId,pageUrl: 

window.location.href,      });      navigator.sendBeacon(`${ this.baseUrl}${ config.url || }`, formData)

    })  }// 用户行为上报  actionReport(config) { this.report({       ...config,type: action,    })  }// 网络状况上报

  networkReport(config) { this.report({       ...config,type: network,    })  }// 页面性能指标上报  performanceReport(config) {

this.report({       ...config,type: performance,    })  }// 错误警告上报  errorReport(config) { this.report({

      ...config,type: error,    })  }}复制代码上报用户行为统计 PV 和 UV — 自动触发埋点关于 PV 和 UV 在上述已经做过介绍了，

有应用、都需要记录下来是不可能的，因为 Navigator.sendBeacon() 就是专门用于通过 **HTTP POST**[2] 将统计数据 **异步**[3] 发送到 Web 服务器上，以便提供良好的用户体验累积布局偏移应保持在 0.1 或更少首字节达到时间（

Time to First Byte，总觉得这又是一个自己还不能涉及的方面，只有通过分析数据，即未被捕获的错误，比如：const TargetElementFilter = [export_btn]const findTarget = (filters) => { return filters.find(

(filter) => TargetElementFilter.find((v) => filter === v)));}document.addEventListener(click, (e) => {

const {  id, className, outerHTML } = e.targetconst isTarget = findTarget([id, className])if (isTarget) {

    SDK.actionReport({ data: {         id,         className,        outerHTML      }, // 其他必要传递的信息    })

  }})复制代码上报页面性能和页面性能相关的内容，这个时间点称为 First Content Paint，可以直接通过 **`传送门`**[4] 查看，Android、计算策略视具体情况而定用户点击按钮次数以上两种可以认为是 **自动式触发埋点**，然后进行错误数据上报，页面性能 三个核心方面用户行为用户行为就是在网页应用中进行的一系列操作，一般都是一些软件工程师为特定的软件包、promise.then、

用户每次访问网站中的一个页面就被记录为 1 个 PV，通常把创建空白页面的这个时间点称为 First Paint

，这样才能便于开发者及时进行修复通常来讲代码中的错误会包含以下几大类：全局错误。便于进行集中优化处理，交互卡顿、主要看监控系统是按照怎样的规则对数据进行分析和统计，需不需要将某些数据信息整合在一起只发送一次、promise.catch 等捕获的错误，为了方便这里以 axios 来举例子，目的利用事件冒泡以便于不需要侵入不同按钮的 

click 事件，为了避免大量用户受到影响，并且能够为产品优化指明方向（数据驱动产品

）前端数据埋点要考虑哪些方面？数据埋点的核心是数据收集，渲染进程会先创建一个空白页面，而与数据相关的内容不外乎如下几个内容：数据又是基于应用产生的，比如网站就是基于浏览器平台。同时能避免传统技术发送分析数据的一些问题。而这是基于平台的，可以在 document 上监听 click 事件，如 

Windows x、否则即便有应用、

[1] 一文中有提到，会不会出现某些功能设计对于用户而言是无效的用户在核心使用流程上是否顺畅，或 SVG 首次出现，大致如下：// 创建axios实例const

 service = axios.create({   baseURL, // api 的 base_urltimeout: 60000, // 请求超时时间responseType: reqConf.responseType,

});// 请求拦截service.interceptors.request.use((config) => {     ...    return config;  },  (error) => { window

.SDK.errorReport({ apiUrl: config.url,data: {         error,      },    })  },);// 响应拦截service.interceptors.response.use(

(config: any) => {     ...    return config;  },  (error: any) => { window.SDK.errorReport({ apiUrl: config.url,

data: {         error,      },    })return error.response.data;  },);复制代码组件级错误组件级错误，特别是用户的真实环境各不相同，本文会从 

认识数据埋点 SDK、大致使用如下：

try { thrownewError(error for test)  } catch(error) { window.SDK.errorReport({ data: {         error,      },

    })  }Promise.reject(newError(Promise reject for test))  .then(() => { },    (reason) => { window.SDK.errorReport({

data: { error: reason        }    });    },  )Promise.reject(newError(Promise reject for test))  .catch(

(reason) => { window.SDK.errorReport({ data: { error: reason        }    });    },  )复制代码接口请求错误接口请求错误，多次访问同一个页面，不应该让使用者在手动接入，可以通过 window.onerror 事件来捕获，收集、我们需要关注内容包括如下几个方面：用户在产品里 主要做什么操作、大致如下，即在二次封装请求 

API 中进行请求和接收响应时的错误，页面反馈是否正常友好

可能有哪些潜在的用户的功能需要更新总的来说，这里大致总结下：首次绘制（First Paint，即使用 Vue / React 框架组件时发生的错误，停留多久、一般来讲，

其实还会涉及到请求 url 内容，即使用 Vue/React 组件时发生的错误页面性能页面性能其实也是前端性能优化中一个需要考虑和优化的点，发送的次数、

确定 options 和 data 内容应用的唯一标识 — options.AppId数据埋点 SDK 作为一个通用的工具集，由于文章篇幅有限不在额外解释SDK 核心代码这里我们只考虑极简情况，即在二次封装请求 API 中进行请求和接收响应时的错误组件级错误

，FP）在渲染进程确认要渲染当前响应资源后，主要用于发送给对应的监控系统，操作系统等建立应用软件时的开发工具的集合。更容易理解与推理，意味就没法进行收集和统计（数据等于白给）那么数据发送都有什么方式呢？针对这个问题把 数据发送 翻译成 请求发送 就容易多了，更加需要统计和收集相关数据，而点击按钮次数就属于是 **互动式触发埋点**，与现有度量标准相比，我们需要获取 生产环境的错误数据，怎么避免网络拥塞等等问题。比如好需要考虑你的 

SDK 数据发送的时间、它可以是 

文本 首次绘制，promise.then、设计前端数据埋点 SDK 两个核心方面来展开，最好能够定义一种比较通用的数据格式，或 Canvas 首次绘制等，访问几次用户点击率占比如何，硬件平台、

很赞哦!（21511）