Surveillance des applications de navigateur avec OpenTelemetry

De nombreuses équipes de développement exploitent OpenTelemetry (OTeL) côté serveur pour collecter des signaux tels que des journaux, des traces et des métriques à partir de leurs applications. Cependant, ce qui est souvent négligé, c'est la puissance de l'instrumentation du navigateur d'OTeL. Ces données d'observabilité côté client peuvent fournir des informations significatives et créer une vue complète des performances d'une application en connectant les traces entre le client et le serveur.

Qu’est-ce qu’OpenTelemetry ?

OpenTelemetry est un ensemble d'outils, d'API et de SDK utilisés pour instrumenter, générer, collecter et exporter des données de télémétrie (métriques, journaux et traces) à des fins d'analyse afin de comprendre les performances et le comportement de votre logiciel.

Si vous souhaitez en savoir plus sur OTeL, consultez notre récent article : Qu'est-ce qu'OpenTelemetry et pourquoi devrais-je m'en soucier ?.

OpenTelemetry dans les applications de navigateur

En ce qui concerne les applications de navigateur, OpenTelemetry peut fournir des informations précieuses sur :

1. Performances de chargement des documents
2. Interactions utilisateur
3. Demandes réseau (XMLHttpRequest et Fetch)

Ces informations permettent aux développeurs d'identifier les goulots d'étranglement, de suivre les interactions des utilisateurs et de surveiller les requêtes réseau sans instrumentation manuelle. Ce qui est mentionné ci-dessus, ce sont des données que vous obtenez relativement facilement en tirant parti des instrumentations automatiques d'OTeL, mais vous pouvez également ajouter une instrumentation manuelle pour collecter des traces sur tout autre code dans vos applications côté client.

Highlight et OpenTelemetry

Le SDK JavaScript de Highlight offre une prise en charge intégrée pour la collecte de données OpenTelemetry à partir d'applications côté client. Cette intégration vous permet d'intégrer de manière transparente le traçage OpenTelemetry dans vos applications Web.

Activation d'OpenTelemetry avec Highlight

La collecte de données OTeL est toujours en version bêta, vous devez donc l'activer explicitement en définissant l'option de configuration activateOtelTracing lors de l'initialisation du SDK :

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

Avec cette configuration simple, Highlight collecte automatiquement la plupart des données OpenTelemetry dont vous aurez besoin en exploitant les instruments automatiques et en effectuant des traitements supplémentaires pour rendre les données plus utiles dans Highlight.

Connexion des traces client et serveur

L'une des fonctionnalités les plus puissantes d'OpenTelemetry est la possibilité de connecter des traces entre différents services et environnements. Les SDK de Highlight facilitent cela grâce à la propagation du contexte, vous permettant de créer des traces de bout en bout qui s'étendent des interactions des utilisateurs dans le navigateur jusqu'à vos services backend.

Voici comment cela fonctionne :

1. Initiation de trace : lorsqu'une interaction utilisateur ou une requête réseau est initiée dans le navigateur, le SDK crée une nouvelle étendue ou continue une trace existante.
2. Injection d'en-tête : pour les requêtes HTTP sortantes (XHR et Fetch), le SDK injecte automatiquement les en-têtes de contexte de trace dans la requête. Ces en-têtes incluent généralement :
   • traceparent : contient l'ID de trace, l'ID de span parent et les indicateurs de trace.
   • tracestate : contient des informations de trace spécifiques au fournisseur.
3. Réception côté serveur : les SDK côté serveur Highlight extraient ces en-têtes et poursuivent la trace, reliant les étendues côté serveur à la trace côté client.
4. Achèvement de la trace : au fur et à mesure que la demande se termine et revient au client, la trace complète, y compris les étendues client et serveur, peut être visualisée dans l'interface utilisateur de Highlight.

Cette connexion entre les traces client et serveur offre une visibilité de bout en bout et constitue le lien requis pour obtenir des informations sur la vitesse des pages et la corrélation des erreurs client/serveur.

Pour le rendu côté serveur où le code s'exécute sur le serveur avant que le HTML ne soit envoyé au navigateur, le contexte de trace est propagé via un <meta> balise qui est ajoutée au HTML.

Exemple de cycle de vie de trace client-serveur

Voici un exemple simplifié de la façon dont cela fonctionne dans la pratique :

1. Un utilisateur clique sur un bouton dans votre application Web.
2. Le SDK Highlight crée une période pour cette interaction utilisateur.
3. Cette interaction déclenche un appel API vers votre backend.
4. Le SDK injecte automatiquement les en-têtes de trace dans cet appel d'API.
5. Votre backend reçoit la requête, extrait le contexte de trace et continue la trace.
6. Le backend traite la demande et envoie une réponse.
7. Le client reçoit la réponse et termine le span.

Le résultat est une trace unique qui montre le parcours complet de la demande, depuis l'interaction initiale de l'utilisateur dans le navigateur, en passant par vos services backend et jusqu'au client.

Avantages

Cette connexion entre les traces client et serveur apporte plusieurs avantages :

• 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 <meta> 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 <meta> 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. Tableau de bord de synchronisation des ressources : ce tableau de bord donne un aperçu du temps nécessaire pour charger diverses ressources sur vos pages Web. Vous pouvez voir :

   • Temps de chargement des différents types de ressources (JS, CSS, images, etc.)
   • Temps consacré à la recherche DNS, à la connexion TCP, à la négociation TLS et bien plus encore pour chaque ressource
   • Visualisations permettant d'identifier les ressources à chargement lent ou les goulots d'étranglement dans le processus de chargement

2. Web Vitals Metrics : mettez en surbrillance le suivi et affiche les métriques Web Vitals clés, notamment :

   • Largest Contentful Paint (LCP) : mesure les performances de chargement
   • First Input Delay (FID) : mesure l'interactivité
   • Cumulative Layout Shift (CLS) : mesure la stabilité visuelle
   • First Contentful Paint (FCP) : mesure le temps écoulé entre la navigation et le moment où le navigateur restitue le premier morceau de contenu

3. Tendances de performances : Highlight vous permet de suivre ces mesures au fil du temps, vous aidant ainsi à identifier :

   • L'impact des modifications de code ou des déploiements sur les performances
   • Des dégradations progressives qui autrement pourraient passer inaperçues
   • Améliorations résultant des efforts d'optimisation

4. Segmentation et filtrage : vous pouvez segmenter et filtrer ces métriques en fonction de divers facteurs tels que :

   • Type d'appareil (mobile, ordinateur de bureau, tablette)
   • Navigateur
   • Localisation géographique
   • Attributs personnalisés que vous avez définis

En combinant les données de trace détaillées avec ces mesures de performances de haut niveau, vous pouvez obtenir une vue complète des performances de votre application. Cela vous permet d'identifier rapidement les problèmes, de comprendre leurs causes profondes et de mesurer l'impact de vos efforts d'optimisation.

Conclusion

OpenTelemetry propose des outils puissants pour surveiller et optimiser les applications de navigateur. En tirant parti de l'intégration OpenTelemetry de Highlight, les développeurs peuvent obtenir des informations exploitables avec une configuration minimale.

Que vous soyez confronté à des problèmes de performances côté client, à des goulots d'étranglement côté serveur ou à des parcours utilisateur complexes couvrant plusieurs services, OpenTelemetry et Highlight offrent la visibilité dont vous avez besoin pour fournir des applications Web exceptionnelles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!