可观测性是什么？

当我们顺利将一个前端应用发布上线后，它的生命历程才刚刚开始。

如何监测异常事件？如何跟踪接口请求？如何分析用户转化？

而可观测性就是通过日志、追踪、度量三个不同的视角，来综合评估一个应用上线后的整体状态。

首先是日志，

我们很容易想到 console.log，它的主要作用就是在本地打印一条信息，辅助开发者调试代码。

在可观测性系统中，本地日志通常需要上传到服务端，同时包含更多上下文，帮助开发者定位错误和分析特定事件的细节。

前端常说的监控和埋点就是通过日志手段来实现的。监控是针对异常信息的收集，而埋点则侧重用户行为的记录。

前端常见的异常包括代码运行异常，网络请求异常，用户输入异常，页面渲染异常等等。

而收集这些异常的方式主要是通过 try…catch

window.onerror 事件

或是框架提供的异常捕获方法（如 error boundary 组件）来完成。

埋点则是在代码特定位置插入上报代码，比如在页面加载完成后上报一次用户访问（PV）。

或是在某个组件出现在可见范围内，上报一次曝光，

或是在用户点击某个按钮后上报一次点击（Click）。

后续便可根据这些数据分析用户行为，发现产品链路中的优化点。

前端可以接入日志系统提供的 SDK，收集日志并上报到服务端。

Sentry 是一个强大的可观测性工具，它为许多语言和框架提供了 SDK，

既可以监控应用异常，又可以记录用户行为。

我们以它为例，来看看典型的前端日志系统实际是如何工作的。

这是一个在 Vue 3 项目中接入 Sentry SDK 的配置方法。

Sentry.init 背后会自动为我们监听 window.onerror 等事件，当代码中产生异常后自动完成上报，或手动上报特定异常。

随后，我们可以在日志后台看到关于异常的丰富信息。比如：

触发该异常的用户设备信息，该异常在每个时间段的产生数量，异常的堆栈，异常的设备分布比例等等。

通过这些信息，我们可以很快定位到错误的原因并且制定修复方案。

如果说日志记录的是单一事件，那么追踪则更关注端到端。

比如：一个请求从哪里发起，经过哪些系统，到哪里结束？用户完成保险投保动作，经历了哪些操作？

而追踪系统的主要任务就是记录一个完整的过程。

在典型的追踪系统中，生成和传递 Trace ID 是普遍的做法。

这是 Sentry 提供的追踪页面，可以通过这样一个 Trace ID，分析出用户在 Chrome 浏览器中发起的一个接口请求，经过了从前端到服务端的不同节点，同时提供了节点的调用耗时，上下文和参数信息等等。

另外，Sentry 提供的 Replays 功能也是追踪的一部分，它可以将用户的所有操作录制下来，而不必担心隐私泄露问题。

追踪对前端来说并一无是处，追踪除了能帮助开发者分析上下游系统间的问题外，也可以为业务合规提供数据依据，比如之前提到的投保流程录制就是为了满足业务合规要求，而这必须依赖前端才能做到。

如果说是日志和追踪是记录，那么度量就是给出定量指标，关注系统的整体状态。

同样以 Sentry 为例，它提供的 Performance 面板其实就是一种性能度量。

在这里我们可以看到每个页面的 LCP、FCP 等多个性能指标，包括它们的数据分布情况。

另外，页面访问量，曝光点击率，留存转化率这些指标，也是非常值得我们前端关注的。

这是微信小程序 We 分析平台的数据大盘，可以看到平台展示了小程序的访问量，留存，交易，行为等数据，而这些数据就是利用埋点日志完成度量的结果。

通过度量，我们可以从更高的维度观察应用的整体状态，为产品迭代提供数据依据。

最后，为了方便记忆，我们可以做个总结：日志是 “点”，追踪是 “线”，而度量是 “面”。

它们共同构成了一个完整的可观测性系统。

本期我们讨论了可观测性对于前端的价值，它并非遥不可及，而是必不可少的，相信你一定有不少收获。

到这里，我们的《现代前端开发必知》系列的正片就告一段落了。

由于这个系列视频涉及到的知识点非常多，因此我打算再出一个总结篇，带大家快速回顾一下我们介绍过的内容，并预告接下来打算做什么。

记得点个关注，我是小麦，我们下期再见。