OpenCensus Web:前端性能监控与数据化运营的未来方案

作者：青现 方凳雅集出品

概述
谷歌推出了一个名为OpenCensus Web的OpenCensus扩展，它是一个用于收集网页应用程序性能和行为监控数据的库。该库侧重于在浏览器中执行的前端Web应用程序代码，允许它收集用户端性能数据。它仍处于alpha阶段，API可能会发生变化。

OpenCensus Web与三个应用程序组件交互，即前端Web服务器，Browser JS和OpenCensus Agent。OC Agent从前端Web服务器代理端点或直接从浏览器JS接收消息，并将它们传递到后端。

OpenCensus Web的目前主要的特性：

OC Web的跟踪跨越了初始加载阶段，包括服务器端HTML渲染、DOM加载事件和网络事件的详细注释
只要在DOM元素中完成单击并且未禁用，就会自动跟踪所有单击事件
OC Web通过对History API进行修补来跟踪页面不同部分之间的路由转换
它允许用户为其Web应用程序创建自定义跨度，以用于用户交互中涉及的任务或代码
据此可以看出，一方面OC将对那些性能压力较大的网站优化自己的加载性能有很大的帮助，例如优酷、爱奇艺等媒体驱动的网页。另一方面，这一技术的出现，也将为前端数据化运营提供了全新的数据采集方案。随着跟踪监控窗口的进一步扩大，用户的访问、操作和来源监控将更加精准。这将有助于网站实现Growth hacking。

具体介绍
OpenCensus Web是一种跟踪和监控用户行为，感知网页性能的工具。以现有的技术工程师通常难以做到远程诊断网页性能。唯一能做的就是PWA或者是尽可能的压缩你的代码。今天，Google正在开发的OpenCensus Web（OC Web）将帮助所有的前端开发者简单自动的获取客户端的性能和操作数据。

背景
OpenCensus项目提供了一组特定的语言检测库，可从后端应用程序中收集日志信息，并将其导出到跟踪和监视后端，如Prometheus，Zipkin，Jaeger，Stackdriver等。

OpenCensus Web库是OpenCensus的一个实现，专注于监控在浏览器中执行的前端Web应用程序代码。 OC Web作为收集用户端性能数据的手段，包括延迟和分布式跟踪，为开发人员提供诊断前端问题和监控整体应用程序运行状况的信息。

OpenCensus系列项目正在与OpenTracing与合并至OpenTelemetry。一旦OpenCensus Web准备就绪，它的功能将被迁移到OpenTelemetry JS中，尽管OC Web将在此期间继续作为alpha版本运行。

架构
OC Web与三个应用程序组件交互：
前端Web服务器（Frontend web server）：将初始HTML呈现给浏览器，包括OC Web库代码和配置。这通常会使用OpenCensus服务器端库（Go，Java等）进行检测。我们还建议您在服务器中创建一个接收端来接收OpenCensus代理的HTTP / JSON跟踪和代理。
浏览器代码（Browser JS）：在浏览器中运行的OC Web库代码。这会测量用户交互并收集浏览器数据，并通过HTTP / JSON将其写入OpenCensus代理。
OpenCensus代理（OpenCensus Agent）：从前端Web服务器代理端点或直接从浏览器JS接收跟踪信息，并将它们传输到后端（例如Stackdriver，Zipkin）。

特征
初始页面加载跟踪
可以使用OC Web捕获初始页面加载的痕迹，甚至可以捕获在浏览器加载OC Web库之前发生的事件！初始页面加载跟踪显示哪些资源可能导致网站性能不佳，并包含通常无法从分布式跟踪系统捕获的数据。

为了测量整个初始页面加载交互的时间，OC Web等待文档加载事件之后，通过浏览器的Navigation Timing和Resource Timing API来生成初始加载性能的时序。以下是OC Web的追踪示例，该时间线是从初始加载示例应用程序中捕获并导入到Zipkin中的。请注意“nav./”这个时间段是用户总体的加载体验时间。
此示例还包括用于客户端和服务器端测量初始HTML负载的“/”时间段。这些时间段通过服务器以W3C跟踪上下文格式发送回’window.traceparent'变量来拼接，因为浏览器不会为初始页面加载发送跟踪上下文头。服务器端加载的时间段包括了解析和渲染模板所花费的时间，这部分时间也应该计算在用户的加载时间中：

自动追踪点击事件
只要在DOM元素（例如按钮）中完成单击并且未禁用单击的元素，就会跟踪所有浏览器单击事件。 当用户单击元素时，将创建一个新区域来测量此交互并确定总时间。

为了命名这个根时间段，我们为开发人员提供了将属性data-ocweb-id添加到元素并为交互提供自定义名称的选项。 对于下一个示例，结果名称将为“Save edit user info”：

<button type="submit" data-ocweb-id="Save edit user info">

Save changes

</button>
这有助于您识别与特定元素相关的跟踪。 此外，当存在类似的交互时，这可以避免模糊。 如果您不添加此属性，OC Web将使用DOM元素ID，标记名称以及交互中涉及的事件。 例如，单击此按钮：

<button id="save_changes"> Save changes </button>
将生成一个名为“button#save_changes click”的时间段。

路由转换的自动跟踪
OC Web通过对History API进行猴补丁技术来跟踪页面不同部分之间的路由转换。 OC Web将使用“Navigation / path / to / page”模式命名这些交互。 从用户交互示例导出到Stackdriver的跟踪如以下屏幕截图，其中包括在路由转换完成之前的多个网络调用：

创建自己的自定义跨度
OC Web允许您使用自定义跨度来检测Web应用程序，以执行用户交互中涉及的任务或代码。 这是一段代码片段，展示了如何执行此操作：

import { tracing } from '@opencensus/web-instrumentation-zone';

function handleClick() {

// Start child span of the current root span on the current interaction.
// This must run in in code that the button is running.
const childSpan = tracing.tracer.startChildSpan({

name: 'name of your child span'

});
// Do some operation...
// Finish the child span at the end of it's operation
childSpan.end();
}
参考资料：

OpenCensus Web: Unlocking Full End-to-End Observability for Your Entire Stack
OpenTracing and OpenCensus merge into OpenTelemetry project; Google introduces OpenCensus Web
Monkey patching in JavaScript