Application Insights pour les pages webApplication Insights for web pages

Apprenez-en plus sur les performances et l’utilisation de votre page web ou de votre application.Find out about the performance and usage of your web page or app. Ajoutez Application Insights à votre script de page pour obtenir le minutage des chargements de page et des appels AJAX, le nombre d’exceptions du navigateur et d’échecs d’AJAX et leurs détails, ainsi que les nombres d’utilisateurs et de sessions.If you add Application Insights to your page script, you get timings of page loads and AJAX calls, counts, and details of browser exceptions and AJAX failures, as well as users and session counts. Toutes ces données peuvent être segmentées par page, par version de système d’exploitation ou de navigateur client, par emplacement géographique et en fonction d’autres aspects.All these can be segmented by page, client OS and browser version, geo location, and other dimensions. Vous pouvez définir des alertes en cas de dépassement d’un certain nombre d’échecs ou de ralentissement du chargement des pages.You can set alerts on failure counts or slow page loading. Et en insérant des suivis d’appel dans votre code JavaScript, vous pouvez suivre l’utilisation des différentes fonctionnalités de votre application de page web.And by inserting trace calls in your JavaScript code, you can track how the different features of your web page application are used.

Vous pouvez utiliser Application Insights avec toutes les pages web ; il vous suffit pour cela d’ajouter un court extrait de code JavaScript.Application Insights can be used with any web pages - you just add a short piece of JavaScript. Si votre service web est Java ou ASP.NET, vous pouvez utiliser les kits SDK côté serveur conjointement au kit SDK JavaScript côté client pour acquérir une compréhension de bout en bout des performances de votre application.If your web service is Java or ASP.NET, you can use the server-side SDKs in conjunction with the client-side JavaScript SDK to get an end-to-end understanding of your app's performance.

Ajout du SDK JavaScriptAdding the JavaScript SDK

  1. Tout d’abord, vous avez besoin d’une ressource Application Insights.First you need an Application Insights resource. Si vous ne disposez pas encore d’une ressource ni d’une clé d’instrumentation, suivez les instructions permettant de créer une ressource.If you don't already have a resource and instrumentation key, follow the create a new resource instructions.
  2. Copiez la clé d’instrumentation de la ressource à laquelle vous souhaitez envoyer vos données de télémétrie JavaScript.Copy the instrumentation key from the resource where you want your JavaScript telemetry to be sent.
  3. Ajoutez le kit SDK JavaScript Application Insights à votre page web ou à votre application via l’une des deux options suivantes :Add the Application Insights JavaScript SDK to your web page or app via one of the following two options:

Important

N’utilisez qu’une seule méthode pour ajouter le SDK JavaScript à votre application.Only use one method to add the JavaScript SDK to your application. Si vous utilisez l’installation NPM, n’utilisez pas l’extrait de code, et inversement.If you use the NPM Setup, don't use the Snippet and vice versa.

Notes

Le programme d’installation de NPM installe le SDK JavaScript en tant que dépendance à votre projet, en activant IntelliSense, tandis que l’extrait de code extrait le SDK au moment de l’exécution.NPM Setup installs the JavaScript SDK as a dependency to your project, enabling IntelliSense, whereas the Snippet fetches the SDK at runtime. Les deux prennent en charge les mêmes fonctionnalités.Both support the same features. Cependant, les développeurs qui souhaitent des événements et une configuration plus personnalisés choisissent généralement l’installation NPM, tandis que les utilisateurs recherchant une activation rapide de l’analytique web prête à l’emploi choisissent l’extrait de code.However, developers who desire more custom events and configuration generally opt for NPM Setup whereas users looking for quick enablement of out-of-the-box web analytics opt for the Snippet.

Configuration basée sur npmnpm based setup

import { ApplicationInsights } from '@microsoft/applicationinsights-web'

const appInsights = new ApplicationInsights({ config: {
  instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE'
  /* ...Other Configuration Options... */
} });
appInsights.loadAppInsights();
appInsights.trackPageView(); // Manually call trackPageView to establish the current user/session/pageview

Configuration basée sur un extraitSnippet based setup

Si votre application n’utilise pas npm, vous pouvez directement instrumenter vos pages web avec Application Insights en collant cet extrait de code en haut de chacune de vos pages.If your app does not use npm, you can directly instrument your webpages with Application Insights by pasting this snippet at the top of each your pages. De préférence, il doit s’agir du premier script dans votre section <head> pour qu’il puisse surveiller tous les problèmes potentiels liés à l’ensemble de vos dépendances.Preferably, it should be the first script in your <head> section so that it can monitor any potential issues with all of your dependencies. Si vous utilisez l’application Blazor Server App, ajoutez l’extrait de code en haut du fichier _Host.cshtml, dans la section <head>.If you are using Blazor Server App, add the snippet at the top of the file _Host.cshtml in the <head> section.

<script type="text/javascript">
var sdkInstance="appInsightsSDK";window[sdkInstance]="appInsights";var aiName=window[sdkInstance],aisdk=window[aiName]||function(e){function n(e){t[e]=function(){var n=arguments;t.queue.push(function(){t[e].apply(t,n)})}}var t={config:e};t.initialize=!0;var i=document,a=window;setTimeout(function(){var n=i.createElement("script");n.src=e.url||"https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js",i.getElementsByTagName("script")[0].parentNode.appendChild(n)});try{t.cookie=i.cookie}catch(e){}t.queue=[],t.version=2;for(var r=["Event","PageView","Exception","Trace","DependencyData","Metric","PageViewPerformance"];r.length;)n("track"+r.pop());n("startTrackPage"),n("stopTrackPage");var s="Track"+r[0];if(n("start"+s),n("stop"+s),n("addTelemetryInitializer"),n("setAuthenticatedUserContext"),n("clearAuthenticatedUserContext"),n("flush"),t.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4},!(!0===e.disableExceptionTracking||e.extensionConfig&&e.extensionConfig.ApplicationInsightsAnalytics&&!0===e.extensionConfig.ApplicationInsightsAnalytics.disableExceptionTracking)){n("_"+(r="onerror"));var o=a[r];a[r]=function(e,n,i,a,s){var c=o&&o(e,n,i,a,s);return!0!==c&&t["_"+r]({message:e,url:n,lineNumber:i,columnNumber:a,error:s}),c},e.autoExceptionInstrumented=!0}return t}(
{
  instrumentationKey:"INSTRUMENTATION_KEY"
}
);window[aiName]=aisdk,aisdk.queue&&0===aisdk.queue.length&&aisdk.trackPageView({});
</script>

Envoi de données de télémétrie au portail AzureSending telemetry to the Azure portal

Par défaut, le kit SDK JavaScript Application Insights recueille un certain nombre d’éléments de télémétrie qui sont utiles pour déterminer l’intégrité de votre application et l’expérience utilisateur sous-jacente.By default the Application Insights JavaScript SDK autocollects a number of telemetry items that are helpful in determining the health of your application and the underlying user experience. notamment :These include:

  • Exceptions non interceptées dans votre application, y compris des informations surUncaught exceptions in your app, including information on
    • Arborescence des appels de procédureStack trace
    • Détails de l’exception et message accompagnant l’erreurException details and message accompanying the error
    • Numéros de ligne et de colonne de l’erreurLine & column number of error
    • URL où l’erreur a été généréeURL where error was raised
  • Demandes de dépendance réseau effectuées par vos demandes XHR et Fetch d’application (la collection de recherches est désactivée par défaut), y compris des informations surNetwork Dependency Requests made by your app XHR and Fetch (fetch collection is disabled by default) requests, include information on
    • URL de la source de dépendanceUrl of dependency source
    • Commande et méthode utilisées pour demander la dépendanceCommand & Method used to request the dependency
    • Durée de la demandeDuration of the request
    • Code de résultat et état de réussite de la demandeResult code and success status of the request
    • ID (le cas échéant) de l’utilisateur qui effectue la demandeID (if any) of user making the request
    • Contexte de corrélation (le cas échéant) dans lequel la demande est effectuéeCorrelation context (if any) where request is made
  • Informations utilisateur (par exemple, emplacement, réseau, adresse IP)User information (for example, Location, network, IP)
  • Informations sur l’appareil (par exemple, navigateur, système d’exploitation, version, langue, résolution, modèle)Device information (for example, Browser, OS, version, language, resolution, model)
  • Informations de sessionSession information

Initialiseurs de télémétrieTelemetry initializers

Les initialiseurs de télémétrie permettent de modifier le contenu des données de télémétrie collectées avant leur envoi à partir du navigateur de l’utilisateur.Telemetry initializers are used to modify the contents of collected telemetry before being sent from the user's browser. Ils peuvent également être utilisés pour empêcher l’envoi de certaines données de télémétrie, en retournant false.They can also be used to prevent certain telemetry from being sent, by returning false. Plusieurs initialiseurs de télémétrie peuvent être ajoutés à votre instance d’Application Insights et ils seront exécutés dans l’ordre où ils sont ajoutés.Multiple telemetry initializers can be added to your Application Insights instance, and they are executed in order of adding them.

L’argument d’entrée pour addTelemetryInitializer est un rappel qui prend un ITelemetryItem comme argument et retourne un boolean ou un void.The input argument to addTelemetryInitializer is a callback that takes a ITelemetryItem as an argument and returns a boolean or void. Si false est retourné, l’élément de télémétrie n’est pas envoyé, sinon il passe à l’initialiseur de télémétrie suivant, le cas échéant, ou il est envoyé au point de terminaison de collecte de données de télémétrie.If returning false, the telemetry item is not sent, else it proceeds to the next telemetry initializer, if any, or is sent to the telemetry collection endpoint.

Voici un exemple d’utilisation des initialiseurs de télémétrie :An example of using telemetry initializers:

var telemetryInitializer = (envelope) => {
  envelope.data.someField = 'This item passed through my telemetry initializer';
};
appInsights.addTelemetryInitializer(telemetryInitializer);
appInsights.trackTrace({message: 'This message will use a telemetry initializer'});

appInsights.addTelemetryInitializer(() => false); // Nothing is sent after this is executed
appInsights.trackTrace({message: 'this message will not be sent'}); // Not sent

ConfigurationConfiguration

La plupart des champs de configuration sont nommés de façon à pouvoir avoir la valeur false par défaut.Most configuration fields are named such that they can be defaulted to false. Tous les champs sont facultatifs à l’exception de instrumentationKey.All fields are optional except for instrumentationKey.

NameName DefaultDefault DescriptionDescription
instrumentationKeyinstrumentationKey nullnull ObligatoireRequired
Clé d’instrumentation que vous avez obtenue à partir du portail Azure.Instrumentation key that you obtained from the Azure portal.
accountIdaccountId nullnull ID de compte facultatif, si votre application regroupe les utilisateurs dans des comptes.An optional account ID, if your app groups users into accounts. Aucun espace, virgule, point-virgule, signe d’égalité ni barre verticaleNo spaces, commas, semicolons, equals, or vertical bars
sessionRenewalMssessionRenewalMs 18000001800000 Une session est consignée si l’utilisateur est inactif pendant ce laps de temps en millisecondes.A session is logged if the user is inactive for this amount of time in milliseconds. La valeur par défaut est 30 minutesDefault is 30 minutes
sessionExpirationMssessionExpirationMs 8640000086400000 Une session est consignée si elle s’est poursuivie pendant ce laps de temps en millisecondes.A session is logged if it has continued for this amount of time in milliseconds. La valeur par défaut est 24 heuresDefault is 24 hours
maxBatchSizeInBytesmaxBatchSizeInBytes 1000010000 Taille maximale du lot de données de télémétrie.Max size of telemetry batch. Si un lot dépasse cette limite, il est immédiatement envoyé et un nouveau lot est démarréIf a batch exceeds this limit, it is immediately sent and a new batch is started
maxBatchIntervalmaxBatchInterval 1500015000 Durée de mise en lot des données de télémétrie avant l’envoi (en millisecondes)How long to batch telemetry for before sending (milliseconds)
disableExceptionTrackingdisableExceptionTracking falsefalse Si la valeur est true, les exceptions ne sont pas collectées automatiquement.If true, exceptions are no autocollected. La valeur par défaut est false.Default is false.
disableTelemetrydisableTelemetry falsefalse Si la valeur est true, les données de télémétrie ne sont pas collectées ni envoyées.If true, telemetry is not collected or sent. La valeur par défaut est false.Default is false.
enableDebugenableDebug falsefalse Si la valeur est true, les données de débogage internes sont levées en tant qu’exception au lieu d’être consignées, quels que soient les paramètres de journalisation du kit SDK.If true, internal debugging data is thrown as an exception instead of being logged, regardless of SDK logging settings. La valeur par défaut est false.Default is false.
Remarque : L’activation de ce paramètre entraîne la suppression de données de télémétrie chaque fois qu’une erreur interne se produit.Note: Enabling this setting will result in dropped telemetry whenever an internal error occurs. Cela peut être utile pour identifier rapidement les problèmes liés à votre configuration ou utilisation du kit SDK.This can be useful for quickly identifying issues with your configuration or usage of the SDK. Pour ne pas perdre de données de télémétrie pendant le débogage, utilisez consoleLoggingLevel ou telemetryLoggingLevel à la place de enableDebug.If you do not want to lose telemetry while debugging, consider using consoleLoggingLevel or telemetryLoggingLevel instead of enableDebug.
loggingLevelConsoleloggingLevelConsole 00 Consigne les erreurs internes d’Application Insights dans la console.Logs internal Application Insights errors to console.
0 : désactivé,0: off,
1 : Erreurs critiques uniquement,1: Critical errors only,
2 : Tout (erreurs et avertissements)2: Everything (errors & warnings)
loggingLevelTelemetryloggingLevelTelemetry 11 Envoie les erreurs internes d’Application Insights en tant que données de télémétrie.Sends internal Application Insights errors as telemetry.
0 : désactivé,0: off,
1 : Erreurs critiques uniquement,1: Critical errors only,
2 : Tout (erreurs et avertissements)2: Everything (errors & warnings)
diagnosticLogIntervaldiagnosticLogInterval 1000010000 (interne) Intervalle d’interrogation (en ms) pour la file d’attente de journalisation interne(internal) Polling interval (in ms) for internal logging queue
samplingPercentagesamplingPercentage 100100 Pourcentage d’événements qui seront envoyés.Percentage of events that will be sent. La valeur par défaut est 100, ce qui signifie que tous les événements sont envoyés.Default is 100, meaning all events are sent. Définissez cette option si vous souhaitez conserver votre plafond de données pour les applications à grande échelle.Set this if you wish to preserve your data cap for large-scale applications.
autoTrackPageVisitTimeautoTrackPageVisitTime falsefalse Si la valeur est true, sur une consultation de page, la durée d’affichage de la page instrumentée précédente fait l’objet d’un suivi et est envoyée en tant que données de télémétrie, et un nouveau minuteur est démarré pour la consultation de page en cours.If true, on a pageview, the previous instrumented page's view time is tracked and sent as telemetry and a new timer is started for the current pageview. La valeur par défaut est false.Default is false.
disableAjaxTrackingdisableAjaxTracking falsefalse Si la valeur est true, les appels Ajax ne sont pas collectés automatiquement.If true, Ajax calls are not autocollected. La valeur par défaut est false.Default is false.
disableFetchTrackingdisableFetchTracking truetrue Si la valeur est true, les demandes Fetch ne sont pas collectées automatiquement.If true, Fetch requests are not autocollected. La valeur par défaut est trueDefault is true
overridePageViewDurationoverridePageViewDuration falsefalse Si la valeur est true, le comportement par défaut de trackPageView est modifié pour enregistrer la fin de l’intervalle de durée de consultation de page lorsque trackPageView est appelé.If true, default behavior of trackPageView is changed to record end of page view duration interval when trackPageView is called. Si la valeur est false et qu’aucune durée personnalisée n’est fournie à trackPageView, les performances d’affichage de la page sont calculées à l’aide de l’API de minutage de la navigation.If false and no custom duration is provided to trackPageView, the page view performance is calculated using the navigation timing API. La valeur par défaut est false.Default is false.
maxAjaxCallsPerViewmaxAjaxCallsPerView 500500 Valeur par défaut 500 - contrôle le nombre d’appels Ajax qui seront supervisés par affichage de page.Default 500 - controls how many Ajax calls will be monitored per page view. Affectez la valeur -1 pour superviser tous les appels Ajax (illimités) dans la page.Set to -1 to monitor all (unlimited) Ajax calls on the page.
disableDataLossAnalysisdisableDataLossAnalysis truetrue Si la valeur est false, les mémoires tampons d’expéditeur de données de télémétrie internes sont vérifiées au démarrage à la recherche d’éléments qui n’ont pas encore été envoyés.If false, internal telemetry sender buffers will be checked at startup for items not yet sent.
disableCorrelationHeadersdisableCorrelationHeaders falsefalse Si la valeur est false, le kit SDK ajoute deux en-têtes ('Request-Id' et 'Request-Context') à toutes les demandes de dépendance pour les mettre en corrélation avec les demandes correspondantes côté serveur.If false, the SDK will add two headers ('Request-Id' and 'Request-Context') to all dependency requests to correlate them with corresponding requests on the server side. La valeur par défaut est false.Default is false.
correlationHeaderExcludedDomainscorrelationHeaderExcludedDomains Désactiver les en-têtes de corrélation pour des domaines spécifiquesDisable correlation headers for specific domains
correlationHeaderDomainscorrelationHeaderDomains Activer les en-têtes de corrélation pour des domaines spécifiquesEnable correlation headers for specific domains
disableFlushOnBeforeUnloaddisableFlushOnBeforeUnload falsefalse La valeur par défaut est false.Default false. Si la valeur est true, la méthode Flush n’est pas appelée lorsque l’événement onBeforeUnload est déclenchéIf true, flush method will not be called when onBeforeUnload event triggers
enableSessionStorageBufferenableSessionStorageBuffer truetrue La valeur par défaut est true.Default true. Si la valeur est true, la mémoire tampon contenant toutes les données de télémétrie non envoyées est stockée dans le stockage de session.If true, the buffer with all unsent telemetry is stored in session storage. La mémoire tampon est restaurée lors du chargement de la pageThe buffer is restored on page load
isCookieUseDisabledisCookieUseDisabled falsefalse La valeur par défaut est false.Default false. Si la valeur est true, le kit SDK ne stocke pas ou ne lit pas les données des cookies.If true, the SDK will not store or read any data from cookies.
cookieDomaincookieDomain nullnull Domaine de cookie personnalisé.Custom cookie domain. Cela est utile si vous souhaitez partager des cookies Application Insights entre les sous-domaines.This is helpful if you want to share Application Insights cookies across subdomains.
isRetryDisabledisRetryDisabled falsefalse La valeur par défaut est false.Default false. Si la valeur est false, réessayez avec 206 (succès partiel), 408 (délai d’expiration), 429 (trop de requêtes), 500 (erreur de serveur interne), 503 (service non disponible) et 0 (hors connexion, uniquement si détecté)If false, retry on 206 (partial success), 408 (timeout), 429 (too many requests), 500 (internal server error), 503 (service unavailable), and 0 (offline, only if detected)
isStorageUseDisabledisStorageUseDisabled falsefalse Si la valeur est true, le kit SDK ne stocke pas ou ne lit pas les données à partir du stockage local et de session.If true, the SDK will not store or read any data from local and session storage. La valeur par défaut est false.Default is false.
isBeaconApiDisabledisBeaconApiDisabled truetrue Si la valeur est false, le kit SDK envoie toutes les données de télémétrie à l’aide de l’API BeaconIf false, the SDK will send all telemetry using the Beacon API
onunloadDisableBeacononunloadDisableBeacon falsefalse La valeur par défaut est false.Default false. Quand l’onglet est fermé, le SDK envoie toutes les données de télémétrie restantes à l’aide de l’API Beacon.when tab is closed, the SDK will send all remaining telemetry using the Beacon API
sdkExtensionsdkExtension nullnull Définit le nom de l’extension du kit SDK.Sets the sdk extension name. Seuls les caractères alphabétiques sont autorisés.Only alphabetic characters are allowed. Le nom de l’extension est ajouté comme préfixe à la balise 'ai.internal.sdkVersion' (par exemple, 'ext_javascript:2.0.0').The extension name is added as a prefix to the 'ai.internal.sdkVersion' tag (for example, 'ext_javascript:2.0.0'). La valeur par défaut est Null.Default is null.
isBrowserLinkTrackingEnabledisBrowserLinkTrackingEnabled falsefalse La valeur par défaut est false.Default is false. Si la valeur est true, le kit SDK effectue le suivi de toutes les demandes de lien de navigateur.If true, the SDK will track all Browser Link requests.
appIdappId nullnull AppId est utilisé pour la corrélation entre les dépendances AJAX qui se produisent côté client avec les demandes côté serveur.AppId is used for the correlation between AJAX dependencies happening on the client-side with the server-side requests. Lorsque l’API Beacon est activée, elle ne peut pas être utilisée automatiquement, mais peut être définie manuellement dans la configuration.When Beacon API is enabled, it cannot be used automatically, but can be set manually in the configuration. La valeur par défaut est NullDefault is null
enableCorsCorrelationenableCorsCorrelation falsefalse Si la valeur est true, le kit SDK ajoute deux en-têtes ('Request-Id' et 'Request-Context') à toutes les demandes CORS pour mettre en corrélation les dépendances AJAX sortantes avec les demandes correspondantes côté serveur.If true, the SDK will add two headers ('Request-Id' and 'Request-Context') to all CORS requests to correlate outgoing AJAX dependencies with corresponding requests on the server side. La valeur par défaut est falseDefault is false
namePrefixnamePrefix non définiundefined Valeur facultative qui sera utilisée comme suffixe de nom pour localStorage et le nom du cookie.An optional value that will be used as name postfix for localStorage and cookie name.
enableAutoRouteTrackingenableAutoRouteTracking falsefalse Effectuer le suivi automatique des modifications de route dans les applications monopages (SPA).Automatically track route changes in Single Page Applications (SPA). Si la valeur est true, chaque modification de route envoie un nouveau Pageview à Application Insights.If true, each route change will send a new Pageview to Application Insights. Les modifications des routes de hachage (example.com/foo#bar) sont également enregistrées en tant que nouveaux affichages de page.Hash route changes (example.com/foo#bar) are also recorded as new page views.
enableRequestHeaderTrackingenableRequestHeaderTracking falsefalse Si la valeur est true, les en-têtes de requête d’extraction AJAX & Fetch sont suivis, la valeur par défaut est false.If true, AJAX & Fetch request headers is tracked, default is false.
enableResponseHeaderTrackingenableResponseHeaderTracking falsefalse Si la valeur est true, les en-têtes de réponse de requête d’extraction AJAX & Fetch sont suivis, la valeur par défaut est false.If true, AJAX & Fetch request's response headers is tracked, default is false.
distributedTracingModedistributedTracingMode DistributedTracingModes.AI Définit le mode de traçage distribué.Sets the distributed tracing mode. Si le mode AI_AND_W3C ou le mode W3C sont définis, les en-têtes de contexte de trace W3C (traceparent/tracestate) sont générés et inclus dans toutes les demandes sortantes.If AI_AND_W3C mode or W3C mode is set, W3C trace context headers (traceparent/tracestate) will be generated and included in all outgoing requests. AI_AND_W3C est fourni à des fins de compatibilité descendante avec tous les services instrumentés Application Insights hérités.AI_AND_W3C is provided for back-compatibility with any legacy Application Insights instrumented services.

Applications monopagesSingle Page Applications

Par défaut, ce kit SDK ne gère pas les modifications de route basées sur l’état qui se produisent dans les applications monopages.By default, this SDK will not handle state-based route changing that occurs in single page applications. Pour activer le suivi automatique des modifications de route pour votre application monopage, vous pouvez ajouter enableAutoRouteTracking: true à la configuration de votre installation.To enable automatic route change tracking for your single page application, you can add enableAutoRouteTracking: true to your setup configuration.

Actuellement, nous proposons un plug-in React distinct que vous pouvez initialiser avec ce kit SDK.Currently, we offer a separate React plugin which you can initialize with this SDK. Il effectue également le suivi des modifications de route pour vous, ainsi que la collecte d’autres données de télémétrie spécifiques à React.It will also accomplish route change tracking for you, as well as collect other React specific telemetry.

Extensions ReactReact extensions

ExtensionsExtensions
ReactReact
React NativeReact Native

Explorer les données côté navigateur/clientExplore browser/client-side data

Vous pouvez afficher les données côté navigateur/client en accédant à Métriques et en ajoutant les métriques individuelles qui vous intéressent :Browser/client-side data can be viewed by going to Metrics and adding individual metrics you are interested in:

Vous pouvez également afficher vos données à partir du kit SDK JavaScript via l’expérience du navigateur dans le portail.You can also view your data from the JavaScript SDK via the Browser experience in the portal.

Sélectionnez Navigateur, puis choisissez Échecs ou Performances.Select Browser and then choose Failures or Performance.

PerformancesPerformance

Les dépendancesDependencies

AnalyticsAnalytics

Pour interroger vos données de télémétrie collectées par le kit SDK JavaScript, sélectionnez le bouton Voir dans les journaux (analytique) .To query your telemetry collected by the JavaScript SDK, select the View in Logs (Analytics) button. En ajoutant une instruction where égale à client_Type == "Browser", vous verrez uniquement les données du kit SDK JavaScript et toutes les données de télémétrie côté serveur collectées par d’autres kits SDK seront exclues.By adding a where statement of client_Type == "Browser", you will only see data from the JavaScript SDK and any server-side telemetry collected by other SDKs will be excluded.

// average pageView duration by name
let timeGrain=5m;
let dataset=pageViews
// additional filters can be applied here
| where timestamp > ago(1d)
| where client_Type == "Browser" ;
// calculate average pageView duration for all pageViews
dataset
| summarize avg(duration) by bin(timestamp, timeGrain)
| extend pageView='Overall'
// render result in a chart
| render timechart

Prise en charge du mappage de sourceSource Map Support

La pile d’appels minimisée de vos données de télémétrie d’exception peut être déminimisée dans le portail Azure.The minified callstack of your exception telemetry can be unminified in the Azure portal. Toutes les intégrations existantes dans le panneau Détails des exceptions fonctionnent avec la pile d’appels nouvellement déminimisée.All existing integrations on the Exception Details panel will work with the newly unminified callstack. La déminimisation du mappage de source par glisser-déplacer prend en charge tous les kits SDK JS existants et futurs (+Node.JS). Vous n’avez donc pas besoin de mettre à niveau votre version du SDK.Drag and drop source map unminifying supports all existing and future JS SDKs (+Node.JS), so you do not need to upgrade your SDK version. Pour afficher votre pile d’appels déminimisée,To view your unminified callstack,

  1. Sélectionnez un élément Télémétrie des exceptions dans le portail Azure pour afficher ses « détails de transaction de bout en bout ».Select an Exception Telemetry item in the Azure portal to view its "End-to-end transaction details"
  2. Identifiez les mappages de source qui correspondent à cette pile d’appels.Identify which source maps correspond to this call stack. Le mappage de source doit correspondre au fichier source d’un frame de pile, mais avec le suffixe .mapThe source map must match a stack frame's source file, but suffixed with .map
  3. Glissez-déplacez les mappages de source sur la pile des appels dans le portail Azure Drag and drop the source maps onto the call stack in the Azure portal

Version web de base d’Application InsightsApplication Insights Web Basic

Pour bénéficier d’une gestion allégée, vous pouvez installer à la place la version de base d’Application InsightsFor a lightweight experience, you can instead install the basic version of Application Insights

npm i --save @microsoft/applicationinsights-web-basic

Cette version fournit un strict minimum de fonctionnalités et vous laisse la compléter à votre guise.This version comes with the bare minimum number of features and functionalities and relies on you to build it up as you see fit. Par exemple, elle n’effectue pas de collecte automatique (exceptions non interceptées, AJAX, etc.).For example, it performs no autocollection (uncaught exceptions, AJAX, etc.). Les API permettant d’envoyer certains types de données de télémétrie, comme trackTrace, trackException, etc., ne sont pas incluses dans cette version et vous devrez fournir votre propre wrapper.The APIs to send certain telemetry types, like trackTrace, trackException, etc., are not included in this version, so you will need to provide your own wrapper. La seule API disponible est track.The only API that is available is track. Vous trouverez un exemple ici.A sample is located here.

ExemplesExamples

Pour obtenir des exemples exécutables, consultez Exemples du SDK JavaScript Application InsightsFor runnable examples, see Application Insights JavaScript SDK Samples

Mise à niveau de l’ancienne version d’Application InsightsUpgrading from the old Version of Application Insights

Dernières modifications dans la version V2 du kit SDK :Breaking changes in the SDK V2 version:

  • Pour permettre de meilleures signatures d’API, certains appels d’API, tels que trackPageView et trackException, ont été mis à jour.To allow for better API signatures, some of the API calls such as trackPageView, trackException have been updated. L’exécution dans IE8 ou des versions antérieures du navigateur n’est pas prise en charge.Running in IE8 or lower versions of the browser is not supported.
  • L’enveloppe de télémétrie présente des modifications de structure et de nom des champs en raison de mises à jour du schéma de données.Telemetry envelope has field name and structure changes due to data schema updates.
  • context.operation a été déplacé vers context.telemetryTrace.Moved context.operation to context.telemetryTrace. Certains champs ont également été modifiés (operation.id --> telemetryTrace.traceID)Some fields were also changed (operation.id --> telemetryTrace.traceID)
    • Pour actualiser manuellement l’ID de consultation de page actuel (par exemple, dans les applications SPA), faites-le avec appInsights.properties.context.telemetryTrace.traceID = Util.newId()If you want to manually refresh the current pageview ID (for example, in SPA apps) this can be done with appInsights.properties.context.telemetryTrace.traceID = Util.newId()

Si vous utilisez le kit SDK de PRODUCTION d’Application Insights actuel (1.0.20) et que vous souhaitez voir si le nouveau kit SDK fonctionne dans le runtime, mettez à jour l’URL en fonction de votre scénario de chargement de kit SDK actuel.If you're using the current application insights PRODUCTION SDK (1.0.20) and want to see if the new SDK works in runtime, update the URL depending on your current SDK loading scenario.

  • Scénario de téléchargement via CDN : Mettez à jour l’extrait de code que vous utilisez actuellement pour pointer vers l’URL suivante :Download via CDN scenario: Update the code snippet that you currently use to point to the following URL:

    "https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js"
    
  • Scénario npm : Appelez downloadAndSetup pour télécharger le script ApplicationInsights complet à partir de CDN et l’initialiser avec la clé d’instrumentation :npm scenario: Call downloadAndSetup to download the full ApplicationInsights script from CDN and initialize it with instrumentation key:

    appInsights.downloadAndSetup({
       instrumentationKey: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx",
       url: "https://az416426.vo.msecnd.net/scripts/b/ai.2.min.js"
       });
    

Effectuez un test dans l’environnement interne pour vérifier que la télémétrie de surveillance fonctionne comme prévu.Test in internal environment to verify monitoring telemetry is working as expected. Si tout fonctionne, mettez à jour vos signatures d’API conformément à la version V2 du kit SDK et procédez au déploiement dans vos environnements de production.If all works, update your API signatures appropriately to SDK V2 version and deploy in your production environments.

Surcharge/performances du kit SDKSDK performance/overhead

Avec seulement 25 Ko compressés avec gzip et en mettant seulement ~15 ms pour s’initialiser, Application Insights ajoute un temps de chargement négligeable à votre site web.At just 25 KB gzipped, and taking only ~15 ms to initialize, Application Insights adds a negligible amount of loadtime to your website. Avec cet extrait de code, les composants minimaux de la bibliothèque sont rapidement chargés.By using the snippet, minimal components of the library are quickly loaded. En attendant, le script complet est téléchargé en arrière-plan.In the meantime, the full script is downloaded in the background.

Pendant le téléchargement du script à partir de CDN, tout le suivi de votre page est mis en file d’attente.While the script is downloading from the CDN, all tracking of your page is queued. Une fois que le script téléchargé a fini de s’initialiser de manière asynchrone, tous les événements qui ont été mis en file d’attente font l’objet d’un suivi.Once the downloaded script finishes asynchronously initializing, all events that were queued are tracked. Par conséquent, vous ne perdrez aucune donnée de télémétrie au cours du cycle de vie complet de votre page.As a result, you will not lose any telemetry during the entire life cycle of your page. Ce processus de configuration fournit à votre page un système d’analyse transparent, invisible à vos utilisateurs.This setup process provides your page with a seamless analytics system, invisible to your users.

Résumé :Summary:

  • 25 Ko compressés avec gzip25 KB gzipped
  • Durée d’initialisation globale de 15 ms15 ms overall initialization time
  • Aucun suivi manqué pendant le cycle de vie de la pageZero tracking missed during life cycle of page

Prise en charge des navigateursBrowser support

Chrome Firefox IE Opera Safari
Chrome version la plus récente ✔Chrome Latest ✔ Firefox version la plus récente ✔Firefox Latest ✔ IE 9+ et Edge ✔IE 9+ & Edge ✔ Opera version la plus récente ✔Opera Latest ✔ Safari version la plus récente ✔Safari Latest ✔

Kit de développement logiciel (SDK) open sourceOpen-source SDK

Le kit SDK JavaScript Application Insights est proposé en open source. Pour afficher le code source ou contribuer au projet, visitez le dépôt GitHub officiel.The Application Insights JavaScript SDK is open-source to view the source code or to contribute to the project visit the official GitHub repository.

Étapes suivantesNext steps