Viele Entwicklungsteams nutzen OpenTelemetry (OTeL) auf der Serverseite, um Signale wie Protokolle, Traces und Metriken aus ihren Anwendungen zu sammeln. Was jedoch oft übersehen wird, ist die Leistungsfähigkeit der Browser-Instrumentierung von OTeL. Diese clientseitigen Observability-Daten können aussagekräftige Erkenntnisse liefern und einen umfassenden Überblick über die Leistung einer Anwendung schaffen, indem sie Traces zwischen Client und Server verbinden.
OpenTelemetry ist eine Sammlung von Tools, APIs und SDKs, die zum Instrumentieren, Generieren, Sammeln und Exportieren von Telemetriedaten (Metriken, Protokolle und Traces) zur Analyse verwendet werden, um die Leistung und das Verhalten Ihrer Software zu verstehen.
Wenn Sie an einem tieferen Einblick in OTeL interessiert sind, lesen Sie unseren aktuellen Artikel: Was ist OpenTelemetry und warum sollte es mich interessieren?.
Wenn es um Browser-Apps geht, kann OpenTelemetry wertvolle Einblicke in Folgendes liefern:
Diese Erkenntnisse ermöglichen es Entwicklern, Engpässe zu identifizieren, Benutzerinteraktionen zu verfolgen und Netzwerkanforderungen ohne manuelle Instrumentierung zu überwachen. Bei den oben erwähnten Daten handelt es sich um Daten, die Sie relativ einfach erhalten, indem Sie die automatische Instrumentierung von OTeL nutzen. Sie können aber auch manuelle Instrumentierung hinzufügen, um Spuren für jeden anderen Code in Ihren clientseitigen Apps zu sammeln.
Das JavaScript SDK von Highlight bietet integrierte Unterstützung für die Erfassung von OpenTelemetry-Daten aus clientseitigen Anwendungen. Durch diese Integration können Sie OpenTelemetry-Tracing nahtlos in Ihre Webanwendungen integrieren.
Die OTeL-Datenerfassung befindet sich noch in der Betaphase, daher müssen Sie sie explizit aktivieren, indem Sie bei der Initialisierung des SDK die Konfigurationsoption „enableOtelTracing“ festlegen:
H.init({
// ...
enableOtelTracing: true
})
Mit dieser einfachen Konfiguration sammelt Highlight automatisch die meisten OpenTelemetry-Daten, die Sie benötigen, indem es die automatischen Instrumentierungen nutzt und einige zusätzliche Verarbeitungen durchführt, um die Daten in Highlight nützlicher zu machen.
Eine der leistungsstärksten Funktionen von OpenTelemetry ist die Möglichkeit, Traces über verschiedene Dienste und Umgebungen hinweg zu verbinden. Die SDKs von Highlight erleichtern dies durch Kontextweitergabe und ermöglichen Ihnen die Erstellung von End-to-End-Traces, die von Benutzerinteraktionen im Browser bis hin zu Ihren Backend-Diensten reichen.
So funktioniert es:
Diese Verbindung zwischen Client- und Server-Traces sorgt für eine durchgängige Sichtbarkeit und ist die erforderliche Verbindung für Einblicke in die Seitengeschwindigkeit und Client-/Server-Fehlerkorrelation.
Für serverseitiges Rendering, bei dem Code auf dem Server ausgeführt wird, bevor HTML an den Browser gesendet wird, wird der Trace-Kontext über ein weitergegeben. Tag, der dem HTML hinzugefügt wird.
Hier ist ein vereinfachtes Beispiel, wie das in der Praxis funktioniert:
Das Ergebnis ist eine einzelne Ablaufverfolgung, die den gesamten Verlauf der Anfrage zeigt, von der ersten Benutzerinteraktion im Browser über Ihre Backend-Dienste bis zurück zum Client.
Diese Verbindung zwischen Client- und Server-Traces bietet mehrere Vorteile:
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.
Ressourcen-Timing-Dashboard: Dieses Dashboard bietet einen Überblick darüber, wie lange es dauert, verschiedene Ressourcen auf Ihren Webseiten zu laden. Sie können sehen:
Web Vitals-Metriken: Markieren Sie wichtige Web Vitals-Metriken und zeigen Sie sie an, darunter:
Leistungstrends: Mit Highlight können Sie diese Kennzahlen im Zeitverlauf verfolgen und so Folgendes identifizieren:
Segmentierung und Filterung: Sie können diese Metriken basierend auf verschiedenen Faktoren segmentieren und filtern, wie zum Beispiel:
Durch die Kombination der detaillierten Trace-Daten mit diesen allgemeinen Leistungsmetriken erhalten Sie einen umfassenden Überblick über die Leistung Ihrer Anwendung. Dadurch können Sie Probleme schnell identifizieren, ihre Grundursachen verstehen und die Auswirkungen Ihrer Optimierungsbemühungen messen.
OpenTelemetry bietet leistungsstarke Tools zur Überwachung und Optimierung von Browseranwendungen. Durch die Nutzung der OpenTelemetry-Integration von Highlight können Entwickler mit minimaler Konfiguration umsetzbare Erkenntnisse gewinnen.
Ganz gleich, ob Sie mit clientseitigen Leistungsproblemen, serverseitigen Engpässen oder komplexen Benutzerreisen über mehrere Dienste zu kämpfen haben, OpenTelemetry und Highlight bieten die Transparenz, die Sie für die Bereitstellung außergewöhnlicher Webanwendungen benötigen.
Das obige ist der detaillierte Inhalt vonÜberwachung von Browseranwendungen mit OpenTelemetry. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
