使用 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中文網其他相關文章！