核心流程是

      进行引用的启动和运行
             |
             |
    初始化全局的监控SDK的封装     
     |        |         |
     |        |         |
     |        |         |
JS错误监控   网络监控   资源加载监控
     |        |         |
     |        |         |
     --------------------
              |
              |
        统一的错误处理管理层
              |
              |
       异常上报数据的结构化层
              |
              |
         统一的上报数据层
              |
              |
 Navigator.sendBeacon()/Fetch API 网络请求调度层
              |
              |
         对接后端接口层
              |
              |
    上报数据的日志记录/日志的存储层

知识总结

• js 的错误分类

  • 同步执行代码异常处理：监听 window.onerror 事件

  • 异步执行代码，核心就是针对于 promise/async/await 等异步操作，此时就是监听的是 window.addEventListener('unhandledrejection', (event) => {}) 事件

• 资源加载层监听

  • 核心是处理的是会触发网络请求的一些资源的处理：img video audio link script 这些类型的资源

  • 核心原因是：因为资源的加载全局的 window.onerror 事件是无法捕获到的，所以需要通过监听资源加载事件来处理

    • 这些资源产生的异常是不会向上进行冒泡，此时处理这些资源的方式就是在事件捕获阶段进行处理，此时就依赖于 addEventListener 事件的捕获阶段

    • 以及对应的资源类型就这几种，所以说需要利用元素的 type 属性进行过滤单独进行处理实现吧

• websocket 监控

• network 监控

• performance 监控

• actionTracking 监控

调试测试

pnpm install

pnpm run start:server:dev

pnpm run start:server