使用 OpenTelemetry 监控浏览器应用程序

许多开发团队在服务器端利用 OpenTelemetry (OTeL) 从其应用程序收集日志、跟踪和指标等信号。然而，经常被忽视的是 OTeL 浏览器工具的强大功能。这种客户端可观察性数据可以提供有意义的见解，并通过连接客户端和服务器之间的跟踪来创建应用程序性能的全面视图。

什么是开放遥测？

OpenTelemetry 是一个工具、API 和 SDK 的集合，用于检测、生成、收集和导出遥测数据（指标、日志和跟踪）以进行分析，以便了解软件的性能和行为。

如果您有兴趣深入了解 OTeL，请查看我们最近的文章：什么是 OpenTelemetry 以及我为什么要关心？

浏览器应用程序中的 OpenTelemetry

当涉及到浏览器应用程序时，OpenTelemetry 可以提供以下方面的宝贵见解：

1. 文档加载性能
2. 用户互动
3. 网络请求（XMLHttpRequest 和 Fetch）

这些见解使开发人员能够识别瓶颈、跟踪用户交互并监控网络请求，而无需手动检测。上面提到的是通过利用 OTeL 的自动检测相对容易获得的数据，但您也可以添加手动检测来收集客户端应用程序中任何其他代码的跟踪。

突出显示和 OpenTelemetry

Highlight 的 JavaScript SDK 提供了从客户端应用程序收集 OpenTelemetry 数据的内置支持。这种集成允许您将 OpenTelemetry 跟踪无缝合并到您的 Web 应用程序中。

通过突出显示启用 OpenTelemetry

OTeL 数据收集仍处于测试阶段，因此您需要在初始化 SDK 时通过设置 enableOtelTracing 配置选项来显式启用它：

H.init({
  // ...
  enableOtelTracing: true
})

通过这个简单的配置，Highlight 通过利用自动检测并进行一些额外的处理，自动收集您需要的大部分 OpenTelemetry 数据，以使数据在 Highlight 中更有用。

连接客户端和服务器跟踪

OpenTelemetry 最强大的功能之一是能够跨不同服务和环境连接跟踪。 Highlight 的 SDK 通过上下文传播促进了这一点，允许您创建从浏览器中的用户交互一直到后端服务的端到端跟踪。

其工作原理如下：

1. 跟踪启动：当在浏览器中发起用户交互或网络请求时，SDK 会创建一个新的跨度或继续现有的跟踪。
2. 标头注入：对于传出 HTTP 请求（XHR 和 Fetch），SDK 会自动将跟踪上下文标头注入到请求中。这些标头通常包括：
   • traceparent：包含跟踪 ID、父跨度 ID 和跟踪标志。
   • Tracestate：携带特定于供应商的跟踪信息。
3. 服务器端接收：突出显示服务器端 SDK 提取这些标头并继续跟踪，将服务器端跨度链接到客户端跟踪。
4. 跟踪完成：当请求完成并返回到客户端时，完整的跟踪（包括客户端和服务器跨度）可以在Highlight的UI中可视化。

客户端和服务器跟踪之间的这种连接提供了端到端的可见性，并且是页面速度洞察和客户端/服务器错误关联所需的链接。

对于服务器端渲染，其中代码在 HTML 发送到浏览器之前在服务器上执行，跟踪上下文通过 传播。添加到 HTML 的标签。

客户端-服务器跟踪生命周期示例

这是一个实际运作方式的简化示例：

1. 用户单击您的 Web 应用程序中的按钮。
2. Highlight SDK 会为此用户交互创建一个跨度。
3. 此交互会触发对您后端的 API 调用。
4. SDK 自动将跟踪标头注入此 API 调用中。
5. 您的后端接收请求，提取跟踪上下文，并继续跟踪。
6. 后端处理请求并发送响应。
7. 客户端收到响应并完成跨度。

结果是显示请求的完整旅程的单个跟踪，从浏览器中的初始用户交互，通过后端服务，再返回到客户端。

好处

客户端和服务器跟踪之间的这种连接提供了几个好处：

• End-to-End Visibility: You can trace a user's action all the way through your system, making it easier to diagnose issues and understand performance bottlenecks.
• Performance Optimization: By seeing the complete picture, you can identify whether performance issues are occurring on the client-side, server-side, or in the network communication between them.
• Error Correlation: If an error occurs, you can see the full context of what led to that error, including any relevant client-side actions or server-side processing.

By leveraging Highlight's OpenTelemetry integration, you can gain these insights with minimal configuration, allowing you to focus on improving your application's performance and user experience.

Handling Server-Initiated Traces

When a request for a page is made by fetching a new URL in the browser we don't have the JS SDK initialized in the browser until the server returns the HTML and renders the page, then fetches all the JS assets to render the app. In this case you pass the trace ID from the server to the client in a tag to handoff the trace initiated on the server to the client.

Here is an example of what the meta tag looks like in the browser:

<meta
  name="traceparent"
  content="00-ab42124a3c573678d4d8b21ba52df3bf-d21f7bc17caa5aba-01"
>

Note that the Highlight server SDKs often have helpers to create this tag. Here's an example using the Highlight Ruby SDK

<%= highlight_traceparent_meta %>

The browser OTeL instrumentation gathers timing information from window.performance.timing and creates spans for all the different timing events in the browser. This instrumentation parses the tag and associates all the spans it creates with trace data from the tag. This is illustrated in the screenshot of the flame graph below.

Here's how to parse what's going on in this flame graph:

1. The documentLoad span shows the full timing from submitting the URL in the browser to be loaded to having all the assets loaded and the page being fully interactive. The timing data for this span is gathered from window.performance.timing since we can't actually initiate a span before the JS loads.
2. The PagesController#home is the first span created on the server. You can trace the server code execution required to render the HTML that will be returned to the browser. When the HTML is returned to the browser the documentFetch span finishes.
3. After the HTML is loaded int he browser you can see the requests for the page's resources (all the JS and CSS files), these are the resourceFetch spans.

These resource timings provide a full picture of your app's load time, making it clear where the opportunities are to improve performance and provide a better UX.

Leveraging OpenTelemetry Data in Highlight

Collecting OpenTelemetry data is one thing, but gleaning actionable insights is another. You need some way of visualizing the data (like the flame graph shown above) in order to get actionable insights. Highlight exposes this data a few ways.

Viewing Traces in Highlight

When you open Highlight's UI, you'll find a dedicated section for traces. Here, you can see a list of all the traces collected from your application, including those that span from the browser to your backend services.

1. Trace List: This view provides an overview of all traces, typically sorted by timestamp. You can filter and search for specific traces based on various criteria such as duration, error status, or custom attributes.

2. Trace Detail View: Clicking on a specific trace opens a detailed view, showing the full journey of a request or user interaction. This view includes:

   • A flame graph visualization of the trace, showing the hierarchy and timing of spans.
   • Detailed information about each span, including start time, duration, and any custom attributes or events.
   • For spans representing network requests, you can see details like HTTP method, status code, and headers.

3. Cross-Service Tracing: For traces that span from the browser to your backend services, you'll see a seamless view of the entire request lifecycle. This makes it easy to identify whether performance issues are occurring on the client-side, server-side, or in the network communication between them.

Analyzing Resource Timings and Web Vitals

Highlight's metrics product provides powerful tools for analyzing resource timings and Web Vitals, which are crucial for understanding and optimizing your application's performance.

1. 资源计时仪表板：此仪表板概述了在网页上加载各种资源所需的时间。您可以看到：

   • 不同类型资源（JS、CSS、图像等）的加载时间
   • 每种资源花费在 DNS 查找、TCP 连接、TLS 协商等方面的时间
   • 可视化有助于识别加载过程中加载缓慢的资源或瓶颈

2. Web Vitals 指标：突出显示跟踪并显示关键的 Web Vitals 指标，包括：

   • 最大内容绘制 (LCP)：衡量加载性能
   • 首次输入延迟 (FID)：测量交互性
   • 累积布局偏移 (CLS)：测量视觉稳定性
   • 首次内容绘制 (FCP)：测量从导航到浏览器呈现第一位内容的时间

3. 性能趋势：突出显示可让您随着时间的推移跟踪这些指标，帮助您识别：

   • 代码更改或部署对性能的影响
   • 可能会被忽视的逐渐退化
   • 优化工作带来的改进

4. 细分和过滤：您可以根据各种因素细分和过滤这些指标，例如：

   • 设备类型（移动设备、桌面设备、平板电脑）
   • 浏览器
   • 地理位置
   • 您定义的自定义属性

通过将详细的跟踪数据与这些高级性能指标相结合，您可以全面了解应用程序的性能。这使您能够快速识别问题、了解其根本原因并衡量优化工作的影响。

结论

OpenTelemetry 提供了用于监控和优化浏览器应用程序的强大工具。通过利用 Highlight 的 OpenTelemetry 集成，开发人员可以通过最少的配置收集可操作的见解。

无论您是在处理客户端性能问题、服务器端瓶颈，还是跨多个服务的复杂用户旅程，OpenTelemetry 和 Highlight 都能为您提供交付卓越 Web 应用程序所需的可见性。

以上是使用 OpenTelemetry 监控浏览器应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！