大家好，我是wo不是黄蓉，看了很多关于前端日志收集和监控的资料，但是看到的相对来说更多的还是技术方案，想自己写一个收集日志的SDK感觉还是比较困难的，没有思路，暂时先记录下日志相关的学习内容以及涉及到的信息，希望有大佬指导一二或者有好的相关日志相关的源码推荐一下。
-
准备工作：
- 需要引入js 监控SDK 用于数据采集
- 前端展示界面
-
错误监听分为：
- 报错类：js error ,http请求错误信息，promise类型错误， 静态资源加载错误
- 追踪用户行为
-
上报哪些信息：
- js错误信息栈
- 用户信息（用户信息、设备信息（操作系统、浏览器、分辨率，设备）、ip信息）
- 应用信息（应用Id，版本号）
- 日志信息，自定义
-
怎么上报信息：
页面离开时上报信息
手动埋点上报信息
-
上报方式
-
ajax
-
优点：
- 相比get方式更加安全
- 可传输大容量的日志内容
-
缺点：
- 受跨域限制
- 传输效率不如get方式
- 页面销毁了日志数据还没上传完，造成上传中断失败
-
img
-
sendBeacon
- 上传时机：页面
unload或beforeunload
- 上传时机：页面
-
-
上报时机
页面首次渲染
首次可交互
dom ready
页面完全加载
-
离线存储，等操作完成后再上传
- 常见存储方案localStorage 、cookie 、indexDB
-
埋点类型
用户行为
-
异常监控
- js语法错误信息
曝光埋点
-
统计信息
-
分析维度
- js error
- 性能相关
- api成功率相关
用户id所属地区
pv/uv
首屏渲染速度
错误数统计，告警信息
-
统计维度：
- 时间维度
- 地区维度
- 设备维度
-
性能监控
-
performance API获取到当前页面中与性能相关的信息
timing 性能相关信息
timeOrigin
onresourcetimingbufferfull
-
navigation 当前页面导航次数
- 页面重定向次数
- type：0 正常进入页面
- 1：表示通过window.location.reload刷新页面
- 2：表示通过浏览器前进后退进入页面
- 255：其他方式
-
memory 浏览器内存使用情况
- jsHeapSizeLimit 内存大小限制
- totalJSHeapSize 可使用的内存
- usedJSHeapSize JS对象占用的内存
- 白屏时间 白屏时间 = firstPaint - performance.timing.navigationStart || pageStartTime浏览器从响应用户输入域名地址到浏览器开始显示内容的时间
eventCounts
-
-
上报需要兼容的类型：web/h5/小程序/服务端等
