前端监控

指标

mindmap  基础数据类型    基本日志数据      唯一键值traceId      日志类型type      日志产生时间createAt      日志最后更新时间updatedAt    浏览器信息      浏览器UserAgent      浏览器类型BrowserType    页面信息      页面ID      页面地址URL      ?页面标题    用户信息      指纹ID      用户ID      ?用户名      ?用户邮箱    业务信息      业务标识appld      ?业务名称appName      客户端类型clientType      日志类型level

mindmap  root((以代码维度的字段))    异常信息，data      代码异常        通用字段          代码堆栈，stack      网络请求        通用字段          请求耗时，elapsedTime          请求方法，method          请求类型，httpType          API地址，url          请求参数，body          响应状态，status      自定义日志        通用字段          打标签，tag      PVUV日志        通用字段          路由地址，route      Promise日志        通用字段      资源日志        通用字段    通用字段      问题ID，dataId      日志名称，name      问题级别，level      问题信息，message      问题发生事件，time      问题类型，type    页面性能，perf      日志id      指标名称，name      指标值，value      当前值和上次获取值的差值，delta      判断性能级别，rating    操作行为，breadcrumbs      行为名称，name      行为级别，level      行为类型，type      行为分类，category      发生时间，time

WebVitals

• 网页加载速度指标 LCP（Largest Contentful Paint）：记录页面首屏可见区域中最大元素的呈现时间
• 网页可交互指标 FID（First Input Delay）：从用户首次和 Web 应用互动到浏览器实际开始处理事件或者处理脚本，响应用户互动的这段时间
• 网页视觉稳定性指标 CLS（Cumulative Layout Shift）：这个指标更多的是判断用户的视觉上的体验，也就是在浏览器可视区内现有元素发生位置的改变，触发布局偏移，是否影响用户的使用体验
• 首次内容绘制 FCP（Firs1t Contentful Paint）：记录页面首次渲染的时间
• 互动响应速度 INP （Interaction to Next Paint）：监听用户交互互动到页面响应的延迟时间
• 可交互时间 TTI （Time to Interactive）：衡量从网页开始加载到其主要子资源加载完成的时间
• 总阻塞时间 TBT (Total Blocking Time)：衡量页面渲染期间，主线程阻塞的时间，超过50ms的阻塞时间，会被记录下来，作为页面渲染的延迟
• 首字节时间 TTFB (Time to First Byte)：记录页面请求到响应的第一个字节的时间

TTFB    |             FP|                  FCP|                         LCP|

TTFB 最早发生，FP (First Paint) 紧接着 TTFB 之后发生，FCP 紧接着 FP 之后发生，LCP 紧接着 LCP 之后发生

接口异常监听

通过拦截 ajax 请求接口，来实现如下目标：

• HTTP 响应码
• 请求中断
• 请求超时

资源脚本异常监听

通过全局的 onerror 监听或者框架提供的全局 errorHandle，实现全局的资源加载异常或脚本异常监听

全局操作监听

通过全局的 onxx 监听，实现全局的点击、键盘等事件监听，包括：

• 鼠标点击
• 键盘点击
• 触摸点击
• 触摸滑动
• ...

数据上报方式

• fetch/xhr
• beacon api
• 通过请求小图片在url中携带数据