多くの開発チームは、サーバー側で OpenTelemetry (OTeL) を利用して、アプリケーションからログ、トレース、メトリクスなどの信号を収集します。ただし、見落とされがちなのは、OTeL のブラウザ インストルメンテーションの威力です。このクライアント側の可観測性データは、クライアントとサーバー間のトレースを接続することで、有意義な洞察を提供し、アプリケーションのパフォーマンスの包括的なビューを作成できます。
OpenTelemetry は、ソフトウェアのパフォーマンスと動作を理解するために、分析用のテレメトリ データ (メトリクス、ログ、トレース) を計測、生成、収集、エクスポートするために使用されるツール、API、SDK のコレクションです。
OTeL についてさらに詳しく知りたい場合は、最新の記事「OpenTelemetry とは何か、なぜ気にする必要があるのか?」をご覧ください。
ブラウザ アプリに関しては、OpenTelemetry は以下に関する貴重な洞察を提供します。
これらの洞察により、開発者はボトルネックを特定し、ユーザー操作を追跡し、手動で計測することなくネットワーク要求を監視することができます。上記は、OTeL の自動インストルメンテーションを活用することで比較的簡単に取得できるデータですが、手動インストルメンテーションを追加して、クライアント側アプリ内の他のコードのトレースを収集することもできます。
Highlight の JavaScript SDK は、クライアント側アプリケーションから OpenTelemetry データを収集するためのサポートを組み込みで提供します。この統合により、OpenTelemetry トレースを Web アプリケーションにシームレスに組み込むことができます。
OTeL データ収集はまだベータ版であるため、SDK の初期化時に、enableOtelTracing 構成オプションを設定して明示的に有効にする必要があります。
1 2 3 4 |
|
このシンプルな構成により、Highlight は自動インスツルメンテーションを活用し、Highlight でデータをさらに活用できるように追加処理を行うことで、必要な OpenTelemetry データのほとんどを自動的に収集します。
OpenTelemetry の最も強力な機能の 1 つは、さまざまなサービスや環境にわたってトレースを接続できることです。 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:
1 2 3 4 |
|
Note that the Highlight server SDKs often have helpers to create this tag. Here's an example using the Highlight Ruby SDK
1 |
|
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 ページ上のさまざまなリソースの読み込みにかかる時間の概要が表示されます。以下をご覧ください:
Web Vitals メトリクス: 次のような重要な Web Vitals メトリクスを追跡および表示します。
パフォーマンスの傾向: ハイライトを使用すると、これらの指標を長期的に追跡でき、以下を特定するのに役立ちます。
セグメント化とフィルタリング: 次のようなさまざまな要素に基づいて、これらのメトリクスをセグメント化およびフィルタリングできます。
詳細なトレース データとこれらの高レベルのパフォーマンス メトリックを組み合わせることで、アプリケーションのパフォーマンスを包括的に把握できます。これにより、問題を迅速に特定し、その根本原因を理解し、最適化の取り組みの影響を測定することができます。
OpenTelemetry は、ブラウザ アプリケーションを監視および最適化するための強力なツールを提供します。 Highlight の OpenTelemetry 統合を活用することで、開発者は最小限の構成で実用的な洞察を収集できます。
クライアント側のパフォーマンスの問題、サーバー側のボトルネック、または複数のサービスにわたる複雑なユーザー ジャーニーに対処している場合でも、OpenTelemetry と Highlight は、優れた Web アプリケーションを提供するために必要な可視性を提供します。
以上がOpenTelemetry によるブラウザ アプリケーションの監視の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。