监控 SDK 体系

监控 SDK 体系

// SDK 上报 => Java 存日志 => 日志存储 <= 读 Node 数据清洗 BFF => 中台 展示

• SDK 上报
• 服务端 数据收集
• 中台 展示

主要 3 部分，可以根据规模拓展，比如增加一个 BFF 层 来做数据清洗、转换，接入 报警服务等

大致思路是通过改写原生方法，上报数据，对接中台，达到协同的效果

收集

通过 url 来作为项目唯一标识，改良正则实现同 url 不同页面的匹配、使用者低成本接入

  const errorReport = (url, ...) => {}

window.onerror = (
  event: Event | string,
  source?: string,
  lineno?: number,
  colno?: number,
  error?: Error
) => {
  errorReport(...)
}

// promise
window.addEventListener('unhandledrejection', () => { errorReport(...) })

异常的监听方式

• window.onerror：用于捕获全局的 JS 异常，但无法捕获 Promise 异常

• window.addEventListener('unhandledrejection') 用于捕获 Promise 错误

• window.addEventListener('error')：能够捕获资源加载失败、图片加载失败等非 JS 异常

window.addEventListener('error', function (event) {
  if (event.target.tagName === 'IMG') {
    console.log('图片加载失败')
  } else if (event.target.tagName === 'SCRIPT') {
    console.log('脚本加载失败')
  }
})

上报数据类型

error 收集

1. 通过 window.addEventListener('error')监听 资源的异常

2. 可以重新 fetch、XMLHttpRequest 来实现 请求层面的异常监听

const oldFetch = window.fetch
window.fetch = function () {
  oldFetch().then((res) => {
    if (res.status === '错误') {
      errorReport(...)
    }
  }).catch(() => errorReport(...))
}

用户行为收集

监听浏览器事件、使用 MutationObserver API 监听 DOM 树更新， 监控用户行为可能会对性能产生负面影响，需要手动开启

性能收集

业务自定义、通用性能指标（FP LCP...）

通用信息

系统、网络、版本、页面...

Source Map 映射源码

打包工具生成 Source Map，插件自动上传，通过 source-map 库进行解析关联

实时告警

告警的工作主要在 Node.js 层完成

日志数据被 SDK 上报给 Java，数据归类后，写到 Druid 中。开发者在监控平台查询日志聚合时，请求 BFF，再由 Node.js 再请求 Druid 获取线上的聚合数据

1. 定时任务
2. Druid 获取数据
3. 判断情况 异常 pv 达到一定 阈值
4. 是否告警