OpenTelemetry によるブラウザ アプリケーションの監視

多くの開発チームは、サーバー側で OpenTelemetry (OTeL) を利用して、アプリケーションからログ、トレース、メトリクスなどの信号を収集します。ただし、見落とされがちなのは、OTeL のブラウザ インストルメンテーションの威力です。このクライアント側の可観測性データは、クライアントとサーバー間のトレースを接続することで、有意義な洞察を提供し、アプリケーションのパフォーマンスの包括的なビューを作成できます。

オープンテレメトリーとは何ですか?

OpenTelemetry は、ソフトウェアのパフォーマンスと動作を理解するために、分析用のテレメトリ データ (メトリクス、ログ、トレース) を計測、生成、収集、エクスポートするために使用されるツール、API、SDK のコレクションです。

OTeL についてさらに詳しく知りたい場合は、最新の記事「OpenTelemetry とは何か、なぜ気にする必要があるのか​​?」をご覧ください。

ブラウザ アプリケーションの OpenTelemetry

ブラウザ アプリに関しては、OpenTelemetry は以下に関する貴重な洞察を提供します。

1. ドキュメント読み込みパフォーマンス
2. ユーザーインタラクション
3. ネットワークリクエスト (XMLHttpRequest とフェッチ)

これらの洞察により、開発者はボトルネックを特定し、ユーザー操作を追跡し、手動で計測することなくネットワーク要求を監視することができます。上記は、OTeL の自動インストルメンテーションを活用することで比較的簡単に取得できるデータですが、手動インストルメンテーションを追加して、クライアント側アプリ内の他のコードのトレースを収集することもできます。

ハイライトと OpenTelemetry

Highlight の JavaScript SDK は、クライアント側アプリケーションから OpenTelemetry データを収集するためのサポートを組み込みで提供します。この統合により、OpenTelemetry トレースを Web アプリケーションにシームレスに組み込むことができます。

ハイライトを使用して OpenTelemetry を有効にする

OTeL データ収集はまだベータ版であるため、SDK の初期化時に、enableOtelTracing 構成オプションを設定して明示的に有効にする必要があります。

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

このシンプルな構成により、Highlight は自動インスツルメンテーションを活用し、Highlight でデータをさらに活用できるように追加処理を行うことで、必要な OpenTelemetry データのほとんどを自動的に収集します。

クライアントとサーバーのトレースの接続

OpenTelemetry の最も強力な機能の 1 つは、さまざまなサービスや環境にわたってトレースを接続できることです。 Highlight の SDK は、コンテキストの伝播を通じてこれを容易にし、ブラウザーでのユーザー操作からバックエンド サービスに至るまでのエンドツーエンドのトレースを作成できるようにします。

その仕組みは次のとおりです:

1. トレースの開始: ユーザー操作またはネットワーク リクエストがブラウザーで開始されると、SDK は新しいスパンを作成するか、既存のトレースを継続します。
2. ヘッダー挿入: 送信 HTTP リクエスト (XHR と Fetch の両方) の場合、SDK はトレース コンテキスト ヘッダーをリクエストに自動的に挿入します。これらのヘッダーには通常、次のものが含まれます。
   • traceparent: トレース ID、親スパン ID、およびトレース フラグが含まれます。
   • トレース状態: ベンダー固有のトレース情報を保持します。
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. リソース タイミング ダッシュボード: このダッシュボードには、Web ページ上のさまざまなリソースの読み込みにかかる時間の概要が表示されます。以下をご覧ください:

   • さまざまな種類のリソース (JS、CSS、画像など) の読み込み時間
   • 各リソースの DNS ルックアップ、TCP 接続、TLS ネゴシエーションなどに費やした時間
   • 読み込みが遅いリソースや読み込みプロセスのボトルネックを特定するのに役立つ視覚化

2. Web Vitals メトリクス: 次のような重要な Web Vitals メトリクスを追跡および表示します。

   • Largest Contentful Paint (LCP): 読み込みパフォーマンスを測定します
   • 初回入力遅延 (FID): インタラクティブ性を測定します
   • Cumulative Layout Shift (CLS): 視覚的な安定性を測定します
   • First Contentful Paint (FCP): ナビゲーションからブラウザがコンテンツの最初の部分をレンダリングするまでの時間を測定します

3. パフォーマンスの傾向: ハイライトを使用すると、これらの指標を長期的に追跡でき、以下を特定するのに役立ちます。

   • コードの変更またはデプロイメントがパフォーマンスに与える影響
   • 気付かれない可能性のある段階的な劣化
   • 最適化の取り組みによる改善

4. セグメント化とフィルタリング: 次のようなさまざまな要素に基づいて、これらのメトリクスをセグメント化およびフィルタリングできます。

   • デバイスの種類 (モバイル、デスクトップ、タブレット)
   • ブラウザ
   • 地理的位置
   • 定義したカスタム属性

詳細なトレース データとこれらの高レベルのパフォーマンス メトリックを組み合わせることで、アプリケーションのパフォーマンスを包括的に把握できます。これにより、問題を迅速に特定し、その根本原因を理解し、最適化の取り組みの影響を測定することができます。

結論

OpenTelemetry は、ブラウザ アプリケーションを監視および最適化するための強力なツールを提供します。 Highlight の OpenTelemetry 統合を活用することで、開発者は最小限の構成で実用的な洞察を収集できます。

クライアント側のパフォーマンスの問題、サーバー側のボトルネック、または複数のサービスにわたる複雑なユーザー ジャーニーに対処している場合でも、OpenTelemetry と Highlight は、優れた Web アプリケーションを提供するために必要な可視性を提供します。

以上がOpenTelemetry によるブラウザ アプリケーションの監視の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。