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.
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 ?.
En ce qui concerne les applications de navigateur, OpenTelemetry peut fournir des informations précieuses sur :
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.
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.
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.
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 :
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 balise qui est ajoutée au HTML.
Voici un exemple simplifié de la façon dont cela fonctionne dans la pratique :
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.
Cette connexion entre les traces client et serveur apporte plusieurs avantages :
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.
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 :
Web Vitals Metrics : mettez en surbrillance le suivi et affiche les métriques Web Vitals clés, notamment :
Tendances de performances : Highlight vous permet de suivre ces mesures au fil du temps, vous aidant ainsi à identifier :
Segmentation et filtrage : vous pouvez segmenter et filtrer ces métriques en fonction de divers facteurs tels que :
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.
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!
Barre oblique du tableau Excel divisée en deux
Solution à une signature invalide
La différence entre python et pycharm
Quelles sont les applications de l'Internet des objets ?
que signifie l'élan
La différence entre a++ et ++a
Le rôle du Serverlet en Java
Qu'est-ce qui est mis en évidence dans jquery
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
