Guide de lecture localisé
applicationinsights-web-tsObjectif, utilisation et source
Instrumentbrowser/webapplications avec le SDK JavaScript Application Insights (@microsoft/applicationinsights-webUtilisation pour la surveillance des utilisateurs réels (RUM) — pages vues, clics,AJAX/fetchCe document traite des dépendances, des exceptions, des événements personnalisés et des traces de l'agent GenAI côté navigateur corrélées aux traces OpenTelemetry côté serveur. Il aborde également le script de chargement du SDK et la configuration npm, les extensions de framework (React, React Native, Angular), Click Analytics, les initialiseurs de télémétrie et les conventions sémantiques OTel GenAI.agent/tool/modelspans émis par le navigateur.
Source récupérée:
- Dépôt source
- microsoft/skills
- SKILL.md
.github/plugins/azure-sdk-typescript/skills/applicationinsights-web-ts/SKILL.md- Étoiles du dépôt
- 3,157
- Mise à jour du dépôt
- 2026-10-31
- Catégories de capacités
- Services cloud
- Dernière collecte
Licence : MIT
Les extraits de flux de travail sont des outils de lecture et non des instructions exécutables de Codez. Aucune compétence tierce n'a été utilisée pour générer cette page.
Les passages relatifs à l'objectif et au flux de travail ci-dessous constituent le contenu original, organisé et traduit pour la lecture. Ils sont distincts de l'analyse éditoriale de Codez, qui est étiquetée séparément.
À quoi sert cette compétence ?
Instrumentbrowser/webapplications avec le SDK JavaScript Application Insights (@microsoft/applicationinsights-webUtilisation pour la surveillance des utilisateurs réels (RUM) — pages vues, clics,AJAX/fetchCe document traite des dépendances, des exceptions, des événements personnalisés et des traces de l'agent GenAI côté navigateur corrélées aux traces OpenTelemetry côté serveur. Il aborde également le script de chargement du SDK et la configuration npm, les extensions de framework (React, React Native, Angular), Click Analytics, les initialiseurs de télémétrie et les conventions sémantiques OTel GenAI.agent/tool/modelspans émis par le navigateur.
Comment fonctionne le flux de travail en amont
Démarrage rapide (npm)
AppelloadAppInsights()Une seule fois, et le plus tôt possible (avant les interactions utilisateur que vous souhaitez suivre).trackPageView()pour la charge initiale — lorsqueenableAutoRouteTrackingUne fois activé, les changements d'itinéraire suivants sont automatiques.
Démarrage rapide (script de chargement du SDK)
Recommandé lorsque vous souhaitez un SDK à mise à jour automatique et un pipeline de compilation sans processus. Collez ceci comme premier in : Loader-only API (queued until SDK loads): événement de suivi, trackPageView, trackException, pisteTrace, données de dépendance de suivi, trackMetric, performance de suivi des pages vues, page de suivi de début, page stopTrack, startTrackEvent, Événement stopTrack, ajouter l'initialiseur de télémétrie, définir le contexte de l'utilisateur authentifié, effacer le contexte de l'utilisateur authentifié, chasser.
Kit de développement logiciel (SDK) JavaScript Application Insights (Web) pour TypeScript
Surveillance des utilisateurs réels (RUM) pour les applications de navigateur avec@microsoft/applicationinsights-webCollecte automatiquement les pages vues,AJAX/fetchGestion des dépendances, des exceptions non gérées et (avec le plugin Click Analytics) des clics. Prise en charge des événements personnalisés, des métriques et des traces d'agent GenAI conformes aux conventions sémantiques d'OpenTelemetry GenAI et corrélées aux spans backend via W3Contexte de trace C. > Distinct deazure-monitor-opentelemetry-ts, qui est pourNode.jsapplications serveur. Cette compétence est destinée aux applications serveur.browser/webcode (et React Native).
Configuration requise
Installation
Les données de frappe sont incluses dans le colis ; elles ne sont pas fournies séparément.@types/...Installation requise.
npm i --save @microsoft/applicationinsights-web
# Optional plugins (install only what you use):
npm i --save @microsoft/applicationinsights-clickanalytics-js
npm i --save @microsoft/applicationinsights-react-js @microsoft/applicationinsights-react-native @microsoft/applicationinsights-angularplugin-jsLimites et contrôles de qualité
Pièges courants
Ne pas initialiser deux fois. Réimporter le module dans différents bundles génère des vues de page en double. Utilisez une seule exportation de module partagée. Initialisez-le avant la première interaction utilisateur pour éviter toute perte de données au début.clicks/exceptions.
passage en amont · L412 ↗Commencez par un essai sans danger
- Vérifiez l'hôte pris en charge et les instructions d'installation du dépôt. Conservez le répertoire Skill ainsi que ses scripts, ressources et documentation référencés ;SKILL.mdSeul, il peut omettre les dépendances.
- Indiquez à l'agent vos paramètres d'entrée réels, le résultat souhaité et les critères d'acceptation. La syntaxe d'appel et les outils disponibles dépendent du système hôte ; ce site ne propose pas de commande d'installation universelle.
- Testez le flux de travail source dans un projet temporaire ou sur une copie. Avant d'autoriser les opérations qui modifient des fichiers, des services distants ou des ressources facturables, examinez-les attentivement.
- Vérifiez la conformité du résultat avec les contrôles qualité sources et vos propres exigences. Un déclenchement réussi ou un nombre élevé d'étoiles dans le dépôt ne garantissent pas un résultat correct.
Pour en savoir plus, consultez la source.
- Kit de développement logiciel (SDK) JavaScript Application Insights (Web) pour TypeScript
- Avant la mise en œuvre
- Installation
- Chaîne de connexion
- Démarrage rapide (npm)
- Démarrage rapide (script de chargement du SDK)
- Initialiseurs de télémétrie (enrichissement et filtrage)
- Click Analytics
- Suivi d'itinéraire SPA
- Traçage distribué (en corrélation avec le backend)
- Traces d'agents GenAI (conventions sémantiques OTel)
- Clés d'attributs obligatoires (utilisez les noms OTel tels quels)
- Modèle : invoke_agent + imbriquétool/modelportées
- React (TypeScript)
- Performances — Éléments vitaux du Web
- Cookies et confidentialité
- Échantillonnage
- Hors ligne / Envoi sur déchargement
- Pièges courants
- Taille du paquet
- Meilleures pratiques
- Références
Compétences connexes
Traduction et étendue
Ce guide de lecture sélectionne des passages de l'amont épingléSKILL.mdCette traduction est assistée. Elle ne constitue pas un manuel complet et ne garantit pas une compatibilité testée. Veuillez lire le document original et les fichiers auxquels il fait référence avant utilisation.
Cette introduction fait référence à la version épinglée ci-dessous ; l’activité actuelle du dépôt et la durée de la collecte sont indiquées séparément.
- Source épinglée
- Lire l'original ↗
- Source récupérée
- Commit source
00d66a64919edca5bca2c673373444e36a4b5461- Source SHA-256
05ec3512a9d20bbc1e63aebc1e721ecfc26be2c0332e3e9affb6e6975e3f657d