埋点

前端监控

• 发现问题和解决问题
• 做产品的决策依据
• 提高技术的深度与广度

监控目标

• 稳定性

  • js错误：js执行错误或promise异常
  • 资源异常：script、link等资源加载异常
  • 接口错误：ajax或fetch请求接口异常
  • 白屏：页面空白

• 用户体验

  • 加载时间：各个阶段的加载时间
  • TTFB首字节时间：浏览器发起第一个请求到数据返回第一个字节所消耗的时间，这个是时间包含了网络请求、后端处理时间
  • FP首次绘制：包括了任何用户自定义的背景绘制，它是将第一个像素点绘制到屏幕的时间
  • FCP首次内容绘制：浏览器将第一个DOM渲染到屏幕的时间，可以是任何文本、图像、SVG等的时间
  • FMP首次有意义的绘制：页面可用性的标准
  • FID首次输入延迟：用户首次和页面交互到页面响应交互的时间
  • 卡顿：超过50ms的长任务

• 业务

  • PV：page view 即页面浏览器会点击量
  • UV：指访问某个站点的不同IP地址的人数
  • 页面的停留时间： 用户在每一个页面的停留时间

流程：

自己埋点步骤

• 埋点 –> 数据采集(前端做到这就行，后面交给阿里云) –> (阿里云日志服务)数据建模存储 –> 数据传输(实时/批量) –> 数据统计(分析/挖掘) –> 支线一数据可视化(反馈) –> 支线二报告与报警

直接接入现成的：

• sentry https://docs.sentry.io/
• fundebug https://www.fundebug.com/

常见的埋点方案

• 代码埋点

  • 以嵌入代码的形式进行埋点，比如需要监控用户的点击事件，会选择在用户点击时，插入一段代码，保存这个监听行为或者直接监听行为以某一种数据格式直接传递给服务器端
  • 优点： 在任意时刻，精确的发送或保存所需要的数据信息
  • 缺点：工作量较大

• 可视化埋点

  • 将业务代码和埋点代码分离，提供一个可视化交互的页面，输入为业务代码，通过这个可视化系统，可以在业务代码中自定义的增加埋点事件等，最后输出的代码耦合了业务代码和埋点代码
  • 本质：用系统代替手工插入埋点代码

• 无痕埋点

  • 前端的任意一个事件都被绑定一个标识，所有的事件都别记录下来
    • 通过定期上传记录文件，配合文件解析，解析出来外面响应的数据，并生成可视化报告供专业人员分析
    • 优点：采集全量数据，不会出现漏埋和误埋现象
    • 缺点： 给数据传输和服务器增加压力，也无法灵活定制数据结构
      埋点部署

sdk

sdk需要监控什么？

• 错误统计
• 行为日志埋点
• PV/UV统计

sdk功能拆分

1. 参数注入
2. sdk初始化
3. pv统计、uv统计、用户埋点统计、错误监控、全局配置

捕获错误

同步错误：可以被try/catch捕获

<button 
	onClick = {() => {
		try {
			const name = 'tongbucuowu'
			console.log(nam)
		}catch(error) {
			console.log('----同步错误----')
		}
	}}
>同步错误</button>

异步错误：无法被try/catch捕获，可以使用window.onerror处理

<button 
	onClick = {() => {
		try {
			const name = 'yibucuowu'
			name.map()
		}catch(error) {
			console.log('----异步错误----')
		}
	}}
>异步错误</button>
window.onerror = function(mas,url,roe, col, error) {}

promise 错误：

• window.onerror处理不了，可以使用catch捕获或者监听unhandledrejection事件

  window.addEventListener('unhandledrejection', function(error){
  	console.log('异常',error)
  },true)

资源加载错误

window.addEventListener('error', (error) => {
	console.log('异常'，error)
},true)

error与onerror的区别

• error: 可以写多个
• onerror：只能写一个，后者会覆盖前者

手动捕获

• 手动埋点：在回调函数中手动调用tracker函数
• 属性埋点：没有回调函数，直接在属性上传值，可获取到，改属性是定义函数时指定的
• 自动埋点（无痕埋点）：没有回调也没有属性设置值，就会获取元素的dom，不直观，交互存储压力大

统计与路由

pv统计：

• SPA应用之前只需要监听onload事件
• SPA应用中分为hash路由和history路由

history路由：

• 主要依赖pushState和replaceState来实现，但这两种方法被popstate监听到，所以要重写
• history.pushState(): 添加新的历史记录
• history.replaceState(): 修改当前的记录项
• history.back():返回上一页，回退
• history.forward():前进一页，前进
• history.go():调账到历史记录中的某一页
• 监听这一页的停留时间：监听到下一页进入的时间 - 进入这一页的时间
• 监听那一夜的停留时间，记录上一页的路径

hash路由：监听hashchange和重写replaceState

uv统计

• 统计用户数量 统计uid，在初始化时只进行上报，其余有服务端处理
• fetch上报会有数据丢失，sendBeacon无数据丢失