什么是前端的可观测性呢？ 其实可观测性并不是一个新鲜的概念，在过去公司的内部系统中可能分散着各个B端系统：有看性能的，有看 JS 错误数量的，有看埋点的，各自实现可能大不相同。而可观测性是把它们进行大一统，说白了也就是一个“全链路”的前端监控体系。

mindmap
  root((前端监控体系))
    性能监控
      页面加载
        FP/FCP/LCP
        TTI/FID
        CLS
      资源加载
        资源时间
        资源大小
        资源类型
      接口监控
        接口耗时
        成功率
        错误率
    行为监控
      PV/UV
      停留时长
      点击行为
      路由跳转
      用户轨迹
      曝光数据
    错误监控
      JS错误
        语法错误
        运行时错误
        Promise异常
      接口异常
        请求异常
        响应异常
      资源加载
        脚本加载
        样式加载
        图片加载
      跨域问题
      白屏问题

长什么样

case图来自 https://grafana.com/products/cloud/frontend-observability-for-real-user-monitoring/

image.png

image.png

image.png

概念理解

我们来仿古问今一下，像这样的全链路系统以前存在吗？事实是存在的。

https://github.com/dianping/cat

比如说许多国内公司会在服务端采用的 Cat 系统， 如果你在 Node.js 端侧有接入的话，倘若发生了服务端的 Js Error 报错，我们可以在后台的面板上看到一整个的请求调用链（不限于 Node.js 和后端的交互都能看到)，对于排查问题来说是非常方便。但是它对于我们在客户端发生的错误就无能为力了。因为客户端实际上不在微服务链路中。

当然需要注意的是 Cat 不是一个标准的全链路系统。

image.png

然后现在有一个叫**OpenTelemetry的组织，在制定可观测性的一系列标准**

image.png

对于前端来说，最需要关心的是这一部分：

Frontend

值得注意的是，**OpenTelemetry现在对浏览器端的支持现在还处于实验性阶段，并且日志相关的部分还处于开发之中。**

image.png

我们也可以在代码中看到，现在的检测只支持 fetch 请求, document load 和用户交互等事件。