2023.31 前端日志监控

大家好，我是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/小程序/服务端等