许多开发团队在服务器端利用 OpenTelemetry (OTeL) 从其应用程序收集日志、跟踪和指标等信号。然而,经常被忽视的是 OTeL 浏览器工具的强大功能。这种客户端可观察性数据可以提供有意义的见解,并通过连接客户端和服务器之间的跟踪来创建应用程序性能的全面视图。
OpenTelemetry 是一个工具、API 和 SDK 的集合,用于检测、生成、收集和导出遥测数据(指标、日志和跟踪)以进行分析,以便了解软件的性能和行为。
如果您有兴趣深入了解 OTeL,请查看我们最近的文章:什么是 OpenTelemetry 以及我为什么要关心?
当涉及到浏览器应用程序时,OpenTelemetry 可以提供以下方面的宝贵见解:
这些见解使开发人员能够识别瓶颈、跟踪用户交互并监控网络请求,而无需手动检测。上面提到的是通过利用 OTeL 的自动检测相对容易获得的数据,但您也可以添加手动检测来收集客户端应用程序中任何其他代码的跟踪。
Highlight 的 JavaScript SDK 提供了从客户端应用程序收集 OpenTelemetry 数据的内置支持。这种集成允许您将 OpenTelemetry 跟踪无缝合并到您的 Web 应用程序中。
OTeL 数据收集仍处于测试阶段,因此您需要在初始化 SDK 时通过设置 enableOtelTracing 配置选项来显式启用它:
H.init({ // ... enableOtelTracing: true })
通过这个简单的配置,Highlight 通过利用自动检测并进行一些额外的处理,自动收集您需要的大部分 OpenTelemetry 数据,以使数据在 Highlight 中更有用。
OpenTelemetry 最强大的功能之一是能够跨不同服务和环境连接跟踪。 Highlight 的 SDK 通过上下文传播促进了这一点,允许您创建从浏览器中的用户交互一直到后端服务的端到端跟踪。
其工作原理如下:
客户端和服务器跟踪之间的这种连接提供了端到端的可见性,并且是页面速度洞察和客户端/服务器错误关联所需的链接。
对于服务器端渲染,其中代码在 HTML 发送到浏览器之前在服务器上执行,跟踪上下文通过 传播。添加到 HTML 的标签。
这是一个实际运作方式的简化示例:
结果是显示请求的完整旅程的单个跟踪,从浏览器中的初始用户交互,通过后端服务,再返回到客户端。
客户端和服务器跟踪之间的这种连接提供了几个好处:
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.
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:
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.
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.
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.
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.
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:
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.
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.
资源计时仪表板:此仪表板概述了在网页上加载各种资源所需的时间。您可以看到:
Web Vitals 指标:突出显示跟踪并显示关键的 Web Vitals 指标,包括:
性能趋势:突出显示可让您随着时间的推移跟踪这些指标,帮助您识别:
细分和过滤:您可以根据各种因素细分和过滤这些指标,例如:
通过将详细的跟踪数据与这些高级性能指标相结合,您可以全面了解应用程序的性能。这使您能够快速识别问题、了解其根本原因并衡量优化工作的影响。
OpenTelemetry 提供了用于监控和优化浏览器应用程序的强大工具。通过利用 Highlight 的 OpenTelemetry 集成,开发人员可以通过最少的配置收集可操作的见解。
无论您是在处理客户端性能问题、服务器端瓶颈,还是跨多个服务的复杂用户旅程,OpenTelemetry 和 Highlight 都能为您提供交付卓越 Web 应用程序所需的可见性。
以上是使用 OpenTelemetry 监控浏览器应用程序的详细内容。更多信息请关注PHP中文网其他相关文章!