Comme pour le développement back-end, l’observabilité devient de plus en plus cruciale dans le développement front-end, en particulier lorsqu’il s’agit de dépannage. Par exemple, imaginez une simple application de commerce électronique comprenant une application mobile, un serveur Web et une base de données. Si un utilisateur signale que l’application se bloque alors qu’il tente d’effectuer un achat, il peut être difficile de déterminer la cause première du problème. C’est là qu’OpenTelemetry entre en jeu.
Cet article explique comment les développeurs frontaux peuvent tirer parti d’OpenTelemetry pour améliorer l’observabilité et résoudre efficacement des problèmes comme celui-ci.
Pourquoi le dépannage frontal ?
Semblable au développement back-end, le dépannage est un aspect crucial du développement front-end. Par exemple, considérez une structure d’application de commerce électronique simple qui comprend une application mobile, un serveur Web et une base de données. Supposons qu’un utilisateur signale que l’application se bloque alors qu’il tente d’acheter un clavier mécanique à thème sombre.
Sans traçage frontal, nous n’aurions pas suffisamment d’informations sur le problème car il pourrait être causé par différents facteurs tels que le front-end ou le back-end, des problèmes de latence, etc. Nous pouvons essayer de collecter des journaux pour obtenir un aperçu, mais il est difficile de corréler les journaux côté client et côté serveur. Nous pourrions tenter de reproduire le problème à partir de l’application mobile, mais cela pourrait prendre du temps et être impossible si les conditions côté client ne sont pas disponibles.
Cependant, si le problème ne se reproduit pas, nous avons besoin de plus d’informations pour identifier le problème spécifique. C’est là que le traçage frontal est utile car, avec l’aide du traçage frontal, nous pouvons cesser de faire des hypothèses et gagner en clarté sur l’emplacement du problème.
Dépannage frontal avec suivi distribué
Les données de suivi sont organisées en étendues, qui représentent des opérations individuelles telles qu’une requête HTTP ou une requête de base de données. En affichant les étendues dans une structure arborescente, les développeurs peuvent obtenir une vue complète et en temps réel de leur système, y compris le problème spécifique qu’ils examinent. Cela leur permet d’approfondir leurs recherches et d’identifier la cause du problème, comme les goulots d’étranglement ou les problèmes de latence. Le traçage peut être un outil précieux pour identifier la cause première d’un problème.
L’exemple ci-dessous affiche trois composants simples : un front-end, un back-end et une base de données.
En cas de problème, la trace englobe les étendues de l’application frontale et du service principal. En examinant la trace, il est possible d’identifier les données qui ont été transmises entre les composants, permettant aux développeurs de suivre le chemin depuis le clic de l’utilisateur spécifique dans le front-end jusqu’à la requête DB.
Plutôt que de vous fier à des suppositions pour identifier le problème, avec le traçage, vous pouvez en avoir une représentation visuelle. Par exemple, vous pouvez déterminer si la demande a été envoyée à partir de l’appareil, si le back-end a répondu, si certains composants manquaient dans la réponse et d’autres facteurs qui ont pu empêcher l’application de répondre.
Supposons que nous ayons besoin de déterminer si un retard a causé un problème. Dans Helios, il existe une fonctionnalité qui affiche la durée de la durée. Voici à quoi ça ressemble :
Vous pouvez maintenant simplement analyser la trace pour identifier le goulot d’étranglement. De plus, chaque plage de la trace est horodatée, ce qui vous permet de voir exactement quand chaque action a eu lieu et s’il y a eu des retards dans le traitement de la demande.
Helios est livré avec un explorateur de portée qui a été créé explicitement à cette fin. L’explorateur permet de trier les intervalles en fonction de leur durée ou de leur horodatage :
La visualisation de la trace fournit des informations sur le temps pris par chaque opération, ce qui peut aider à identifier les domaines nécessitant une optimisation.
Une vue par défaut disponible dans Jaeger est également une méthode efficace pour explorer tous les goulots d’étranglement en affichant une répartition des traces.
Ajouter une instrumentation frontale à vos traces dans OpenTelemetery : cas d’utilisation avancés
Il est conseillé d’inclure une instrumentation frontale dans vos traces pour améliorer la capacité d’analyse des goulots d’étranglement. Alors que de nombreux SDK fournis par OpenTelemetry sont conçus pour les services back-end, il convient de noter qu’OpenTelemetry a également développé un SDK pour JavaScript. En outre, ils prévoient de publier davantage de bibliothèques clientes à l’avenir. Ci-dessous, nous verrons comment intégrer ces bibliothèques.
Agréger des traces
L’agrégation de plusieurs traces de différentes requêtes en une grande trace peut être utile pour analyser un flux dans son ensemble. Par exemple, imaginez un processus d’achat qui implique trois requêtes REST, telles que la validation de l’utilisateur, la facturation de l’utilisateur et la mise à jour de la base de données.
Pour voir ce flux comme une trace unique pour les trois requêtes, les développeurs peuvent créer une étendue personnalisée qui encapsule les trois dans un seul flux. Ceci peut être réalisé en utilisant un exemple de code comme celui ci-dessous.
const { createCustomSpan } = require('@heliosphere/web-sdk');
const purchaseFunction = () => { validateUser(user.id); chargeUser(user.cardToken); updateDB(user.id); };
createCustomSpan("purchase", {'id': purchase.id}, purchaseFunction);Désormais, la trace inclura tous les spans générés sous le validateUser, chargeUseret updateDB catégories. Cela nous permettra de voir l’ensemble du flux comme une seule trace plutôt que des traces distinctes pour chaque demande.
Ajout d’événements d’envergure
L’ajout d’informations sur des événements particuliers peut être bénéfique lors de l’investigation et de l’analyse des goulots d’étranglement frontaux. Avec OpenTelemetry, les développeurs peuvent utiliser une fonctionnalité appelée Span Event, qui leur permet d’inclure un rapport sur un événement et de l’associer à une plage spécifique.
Un événement d’étendue est un message sur une étendue qui décrit un événement spécifique sans durée et peut être identifié par un horodatage unique. Il peut être vu comme un journal de base et apparaît sous ce format :
const activeSpan = opentelemetry.trace.getActiveSpan(); activeSpan.addEvent('User clicked Purchase button);Les événements Span peuvent collecter diverses données, telles que les clics, les événements de périphérique, les événements de mise en réseau, etc.
Ajout de bagages
Baggage est une fonctionnalité utile fournie par OpenTelemetry qui permet d’ajouter des informations contextuelles aux traces. Ces informations peuvent être propagées sur toutes les étendues d’une trace et peuvent être utiles pour transférer des données utilisateur, telles que l’identification de l’utilisateur, les préférences et les jetons Stripe, entre autres.
Cette fonctionnalité peut bénéficier au développement front-end puisque les données utilisateurs sont un élément crucial dans ce domaine. Vous pouvez trouver plus d’informations sur les bagages ici.
Déploiement de l’instrumentation frontale
Le déploiement de l’instrumentation ajoutée à vos traces est simple, tout comme le déploiement de tout autre SDK OpenTelemetry. De plus, vous pouvez utiliser le SDK d’Helios pour visualiser et obtenir plus d’informations sans configurer votre propre infrastructure.
Pour ce faire, il vous suffit de visiter le site Web d’Helios, de vous inscrire et de suivre les étapes pour installer le SDK et ajouter l’extrait de code à votre application. Les instructions de déploiement du SDK frontal Helios sont présentées ci-dessous :
Où aller à partir de là : prochaines étapes pour les développeurs frontaux
L’activation de l’instrumentation frontale est un processus simple qui déverrouille une pléthore de nouvelles fonctionnalités de dépannage pour les développeurs full-stack et front-end. Il vous permet de cartographier une transaction, à partir d’un clic sur l’interface utilisateur et de mener à une requête de base de données spécifique ou à une tâche planifiée, fournissant des informations uniques pour l’identification des goulots d’étranglement et l’analyse des problèmes. OpenTelemetry et Helios prennent en charge l’instrumentation frontale, ce qui la rend encore plus accessible aux développeurs. Commencez à utiliser ces outils dès aujourd’hui pour améliorer votre workflow de développement.