Application Insights per pagine WebApplication Insights for web pages

Scoprire le prestazioni e l'utilizzo della pagina Web o dell'app.Find out about the performance and usage of your web page or app. Se si aggiungono Application Insights allo script di pagina, si ottengono i tempi di caricamento delle pagine e le chiamate AJAX, i conteggi e i dettagli delle eccezioni del browser e degli errori Ajax, nonché i conteggi degli utenti e delle sessioni.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. Tutti questi elementi possono essere segmentati per pagina, sistema operativo client e versione del browser, posizione geografica e altre dimensioni.All these can be segmented by page, client OS and browser version, geo location, and other dimensions. È possibile impostare avvisi relativi al numero di errori o rallentare il caricamento delle pagine.You can set alerts on failure counts or slow page loading. Inoltre, inserendo le chiamate di traccia nel codice JavaScript, è possibile rilevare come vengono usate le diverse funzionalità dell'applicazione della pagina Web.And by inserting trace calls in your JavaScript code, you can track how the different features of your web page application are used.

Application Insights è compatibile con tutte le pagine Web, con una minima aggiunta di codice JavaScript.Application Insights can be used with any web pages - you just add a short piece of JavaScript. Se il servizio Web è Java o ASP.NET, è possibile usare gli SDK sul lato server insieme all'SDK JavaScript sul lato client per ottenere una conoscenza end-to-end delle prestazioni dell'applicazione.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.

Aggiunta di JavaScript SDKAdding the Javascript SDK

  1. Per prima cosa è necessaria una risorsa Application Insights.First you need an Application Insights resource. Se non si dispone già di una risorsa e di una chiave di strumentazione, seguire le istruzioni per creare una nuova risorsa.If you don't already have a resource and instrumentation key, follow the create a new resource instructions.
  2. Copiare la chiave di strumentazione dalla risorsa in cui si vogliono inviare i dati di telemetria JavaScript.Copy the instrumentation key from the resource where you want your JavaScript telemetry to be sent.
  3. Aggiungere Application Insights JavaScript SDK all'app o alla pagina Web tramite una delle due opzioni seguenti:Add the Application Insights JavaScript SDK to your web page or app via one of the following two options:

Importante

È sufficiente usare uno dei metodi seguenti per aggiungere la Application Insights JavaScript SDK all'applicazione.You only need to use one of the methods below for adding the Application Insights JavaScript SDK to your application. Se si usa l'installazione basata su NPM, non usare l'installazione basata sul frammento.If you use the npm based setup, don't use the snippet based setup. Lo stesso vale per lo scenario inverso quando si usa l'approccio basato su frammenti di codice, non usare anche la configurazione basata su NPM.The same goes for the reverse scenario when using the snippet based approach, don't also use the npm based setup.

configurazione basata su 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

Configurazione basata su frammentiSnippet based setup

Se l'app non usa NPM, è possibile instrumentare direttamente le pagine Web con Application Insights incollando il frammento di codice nella parte superiore di ogni pagina.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. Preferibilmente, dovrebbe essere il primo script nella sezione <head>, in modo da poter monitorare eventuali problemi potenziali con tutte le dipendenze.Preferably, it should be the first script in your <head> section so that it can monitor any potential issues with all of your dependencies. Se si usa l'app Server blazer, aggiungere il frammento di codice nella parte superiore del file _Host.cshtml nella sezione <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>

Invio di dati di telemetria al portale di AzureSending telemetry to the Azure portal

Per impostazione predefinita, Application Insights JavaScript SDK raccoglie un numero di elementi di telemetria utili per determinare l'integrità dell'applicazione e l'esperienza utente sottostante.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. Le aree includono:These include:

  • Eccezioni non rilevate nell'app, incluse informazioni suUncaught exceptions in your app, including information on
    • Analisi dello stackStack trace
    • Dettagli dell'eccezione e messaggio che accompagna l'erroreException details and message accompanying the error
    • Numero di colonna & riga di erroreLine & column number of error
    • URL in cui è stato generato un erroreURL where error was raised
  • Richieste di dipendenza di rete effettuate dall'app XHR e Fetch (fetch Collection è disabilitato per impostazione predefinita) richieste, include informazioni suNetwork Dependency Requests made by your app XHR and Fetch (fetch collection is disabled by default) requests, include information on
    • URL dell'origine di dipendenzaUrl of dependency source
    • Comando & metodo usato per richiedere la dipendenzaCommand & Method used to request the dependency
    • Durata della richiestaDuration of the request
    • Codice risultato e stato di esito positivo della richiestaResult code and success status of the request
    • ID (se presente) dell'utente che effettua la richiestaID (if any) of user making the request
    • Contesto di correlazione (se presente) in cui viene effettuata la richiestaCorrelation context (if any) where request is made
  • Informazioni utente (ad esempio, località, rete, IP)User information (for example, Location, network, IP)
  • Informazioni sul dispositivo (ad esempio browser, sistema operativo, versione, lingua, risoluzione, modello)Device information (for example, Browser, OS, version, language, resolution, model)
  • Informazioni sulla sessioneSession information

Inizializzatori di telemetriaTelemetry initializers

Gli inizializzatori di telemetria vengono usati per modificare il contenuto dei dati di telemetria raccolti prima di essere inviati dal browser dell'utente.Telemetry initializers are used to modify the contents of collected telemetry before being sent from the user's browser. Possono anche essere usati per impedire l'invio di alcuni dati di telemetria, restituendo false.They can also be used to prevent certain telemetry from being sent, by returning false. È possibile aggiungere più inizializzatori di telemetria all'istanza di Application Insights e vengono eseguiti in ordine di aggiunta.Multiple telemetry initializers can be added to your Application Insights instance, and they are executed in order of adding them.

L'argomento di input per addTelemetryInitializer è un callback che accetta un ITelemetryItem come argomento e restituisce un boolean o void.The input argument to addTelemetryInitializer is a callback that takes a ITelemetryItem as an argument and returns a boolean or void. Se viene restituito false, l'elemento di telemetria non viene inviato, in caso contrario procede al successivo inizializzatore di telemetria, se presente, o viene inviato all'endpoint della raccolta dei dati di telemetria.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.

Esempio di uso degli inizializzatori di telemetria: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

ConfigurazioneConfiguration

La maggior parte dei campi di configurazione è denominata in modo che sia possibile impostarla su false.Most configuration fields are named such that they can be defaulted to false. Tutti i campi sono facoltativi tranne instrumentationKey.All fields are optional except for instrumentationKey.

nameName PredefinitoDefault DescriptionDescription
instrumentationKeyinstrumentationKey Nullnull ObbligatorioRequired
Chiave di strumentazione ottenuta dal portale di Azure.Instrumentation key that you obtained from the Azure portal.
accountIdaccountId Nullnull ID account facoltativo, se l'app raggruppa gli utenti in account.An optional account ID, if your app groups users into accounts. Spazi, virgole, punti e virgola, uguali o barre verticaliNo spaces, commas, semicolons, equals, or vertical bars
sessionRenewalMssessionRenewalMs 1,8 milioni1800000 Una sessione viene registrata se l'utente è inattivo per questo periodo di tempo in millisecondi.A session is logged if the user is inactive for this amount of time in milliseconds. Il valore predefinito è 30 minutiDefault is 30 minutes
sessionExpirationMssessionExpirationMs 86,4 milioni86400000 Una sessione viene registrata se continua per questo periodo di tempo in millisecondi.A session is logged if it has continued for this amount of time in milliseconds. Il valore predefinito è 24 oreDefault is 24 hours
maxBatchSizeInBytesmaxBatchSizeInBytes 1000010000 Dimensioni massime del batch di telemetria.Max size of telemetry batch. Se un batch supera questo limite, viene immediatamente inviato e viene avviato un nuovo batchIf a batch exceeds this limit, it is immediately sent and a new batch is started
maxBatchIntervalmaxBatchInterval 1500015000 Durata della telemetria batch per prima dell'invio (millisecondi)How long to batch telemetry for before sending (milliseconds)
disableExceptionTrackingdisableExceptionTracking falsefalse Se true, le eccezioni non sono autocollected.If true, exceptions are no autocollected. Il valore predefinito è false.Default is false.
disableTelemetrydisableTelemetry falsefalse Se true, i dati di telemetria non vengono raccolti o inviati.If true, telemetry is not collected or sent. Il valore predefinito è false.Default is false.
enableDebugenableDebug falsefalse Se true, i dati di debug interni vengono generati come eccezione anziché essere registrati, indipendentemente dalle impostazioni di registrazione dell'SDK.If true, internal debugging data is thrown as an exception instead of being logged, regardless of SDK logging settings. Il valore predefinito è false.Default is false.
Nota: Se si abilita questa impostazione, la telemetria verrà eliminata ogni volta che si verifica un errore interno.Note: Enabling this setting will result in dropped telemetry whenever an internal error occurs. Questo può essere utile per identificare rapidamente i problemi con la configurazione o l'utilizzo dell'SDK.This can be useful for quickly identifying issues with your configuration or usage of the SDK. Se non si vogliono perdere i dati di telemetria durante il debug, provare a usare consoleLoggingLevel o telemetryLoggingLevel invece di enableDebug.If you do not want to lose telemetry while debugging, consider using consoleLoggingLevel or telemetryLoggingLevel instead of enableDebug.
loggingLevelConsoleloggingLevelConsole 00 Registra gli errori interni di Application Insights alla console.Logs internal Application Insights errors to console.
0: disattivato,0: off,
1: solo errori critici,1: Critical errors only,
2: tutto (errori & avvisi)2: Everything (errors & warnings)
loggingLevelTelemetryloggingLevelTelemetry 11 Invia errori interni di Application Insights come dati di telemetria.Sends internal Application Insights errors as telemetry.
0: disattivato,0: off,
1: solo errori critici,1: Critical errors only,
2: tutto (errori & avvisi)2: Everything (errors & warnings)
diagnosticLogIntervaldiagnosticLogInterval 1000010000 interno Intervallo di polling (in MS) per la coda di registrazione interna(internal) Polling interval (in ms) for internal logging queue
samplingPercentagesamplingPercentage 100100 Percentuale di eventi che verranno inviati.Percentage of events that will be sent. Il valore predefinito è 100, ovvero tutti gli eventi vengono inviati.Default is 100, meaning all events are sent. Impostare questa impostazione se si desidera mantenere il limite di dati per le applicazioni su larga scala.Set this if you wish to preserve your data cap for large-scale applications.
autoTrackPageVisitTimeautoTrackPageVisitTime falsefalse Se true, in una pagina di visualizzazione, il tempo di visualizzazione della pagina instrumentata precedente viene rilevato e inviato come dati di telemetria e viene avviato un nuovo timer per la visualizzazione corrente.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. Il valore predefinito è false.Default is false.
disableAjaxTrackingdisableAjaxTracking falsefalse Se il valore è true, le chiamate AJAX non vengono raccolte.If true, Ajax calls are not autocollected. Il valore predefinito è false.Default is false.
disableFetchTrackingdisableFetchTracking truetrue Se il valore è true, le richieste di recupero non vengono raccolte.If true, Fetch requests are not autocollected. Il valore predefinito è trueDefault is true
overridePageViewDurationoverridePageViewDuration falsefalse Se true, il comportamento predefinito di trackPageView viene modificato per registrare la fine dell'intervallo di durata della visualizzazione pagina quando viene chiamato trackPageView.If true, default behavior of trackPageView is changed to record end of page view duration interval when trackPageView is called. Se false e non viene fornita alcuna durata personalizzata a trackPageView, le prestazioni della visualizzazione pagina vengono calcolate usando l'API di intervallo di navigazione.If false and no custom duration is provided to trackPageView, the page view performance is calculated using the navigation timing API. Il valore predefinito è false.Default is false.
maxAjaxCallsPerViewmaxAjaxCallsPerView 500500 Default 500-controlla il numero di chiamate AJAX che verranno monitorate per ogni visualizzazione pagina.Default 500 - controls how many Ajax calls will be monitored per page view. Impostare su-1 per monitorare tutte le chiamate AJAX (illimitate) nella pagina.Set to -1 to monitor all (unlimited) Ajax calls on the page.
disableDataLossAnalysisdisableDataLossAnalysis truetrue Se false, i buffer dei mittenti di telemetria interni verranno controllati all'avvio per gli elementi non ancora inviati.If false, internal telemetry sender buffers will be checked at startup for items not yet sent.
disableCorrelationHeadersdisableCorrelationHeaders falsefalse Se false, l'SDK aggiungerà due intestazioni (' Request-ID ' è request-context ') a tutte le richieste di dipendenza per metterle in correlazione con richieste corrispondenti sul lato server.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. Il valore predefinito è false.Default is false.
correlationHeaderExcludedDomainscorrelationHeaderExcludedDomains Disabilitare le intestazioni di correlazione per domini specificiDisable correlation headers for specific domains
correlationHeaderDomainscorrelationHeaderDomains Abilitare le intestazioni di correlazione per domini specificiEnable correlation headers for specific domains
disableFlushOnBeforeUnloaddisableFlushOnBeforeUnload falsefalse Valore predefinito false.Default false. Se true, il metodo Flush non verrà chiamato quando viene attivato l'evento onBeforeUnloadIf true, flush method will not be called when onBeforeUnload event triggers
enableSessionStorageBufferenableSessionStorageBuffer truetrue Valore predefinito true.Default true. Se true, il buffer con tutti i dati di telemetria non inviati viene archiviato nell'archiviazione della sessione.If true, the buffer with all unsent telemetry is stored in session storage. Il buffer viene ripristinato al caricamento della paginaThe buffer is restored on page load
isCookieUseDisabledisCookieUseDisabled falsefalse Valore predefinito false.Default false. Se true, l'SDK non archivia né legge i dati dai cookie.If true, the SDK will not store or read any data from cookies.
cookieDomaincookieDomain Nullnull Dominio cookie personalizzato.Custom cookie domain. Questa operazione è utile se si desidera condividere Application Insights cookie tra sottodomini.This is helpful if you want to share Application Insights cookies across subdomains.
isRetryDisabledisRetryDisabled falsefalse Valore predefinito false.Default false. Se false, riprovare su 206 (operazione parzialmente riuscita), 408 (timeout), 429 (troppe richieste), 500 (errore interno del server), 503 (servizio non disponibile) e 0 (offline, solo se rilevato)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 Se true, l'SDK non archivia né legge i dati dall'archiviazione locale e della sessione.If true, the SDK will not store or read any data from local and session storage. Il valore predefinito è false.Default is false.
isBeaconApiDisabledisBeaconApiDisabled truetrue Se false, l'SDK invierà tutti i dati di telemetria usando l' API BeaconIf false, the SDK will send all telemetry using the Beacon API
onunloadDisableBeacononunloadDisableBeacon falsefalse Valore predefinito false.Default false. Quando la scheda è chiusa, l'SDK invierà tutti i dati di telemetria rimanenti usando l' API Beaconwhen tab is closed, the SDK will send all remaining telemetry using the Beacon API
sdkExtensionsdkExtension Nullnull Imposta il nome dell'estensione SDK.Sets the sdk extension name. Sono consentiti solo caratteri alfabetici.Only alphabetic characters are allowed. Il nome dell'estensione viene aggiunto come prefisso al tag ' ai. Internal. sdkVersion ' (ad esempio,' 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'). Il valore predefinito è Null.Default is null.
isBrowserLinkTrackingEnabledisBrowserLinkTrackingEnabled falsefalse Il valore predefinito è false.Default is false. Se true, l'SDK tiene traccia di tutte le richieste di browser link .If true, the SDK will track all Browser Link requests.
appIdappId Nullnull AppId viene utilizzato per la correlazione tra le dipendenze AJAX che si verificano sul lato client con le richieste lato server.AppId is used for the correlation between AJAX dependencies happening on the client-side with the server-side requests. Quando l'API Beacon è abilitata, non può essere usata automaticamente, ma può essere impostata manualmente nella configurazione.When Beacon API is enabled, it cannot be used automatically, but can be set manually in the configuration. Il valore predefinito è nullDefault is null
enableCorsCorrelationenableCorsCorrelation falsefalse Se true, l'SDK aggiungerà due intestazioni (' Request-ID ' è request-context ') a tutte le richieste CORS per correlare le dipendenze AJAX in uscita con le richieste corrispondenti sul lato server.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. Il valore predefinito è falseDefault is false
namePrefixnamePrefix non definitoundefined Valore facoltativo che verrà usato come nome suffisso per localStorage e il nome del cookie.An optional value that will be used as name postfix for localStorage and cookie name.
enableAutoRouteTrackingenableAutoRouteTracking falsefalse Rilevare automaticamente le modifiche del route nelle applicazioni a pagina singola (SPA).Automatically track route changes in Single Page Applications (SPA). Se true, ogni modifica della route invierà una nuova visualizzazione a Application Insights.If true, each route change will send a new Pageview to Application Insights. Anche le modifiche della route hash (example.com/foo#bar) vengono registrate come nuove visualizzazioni di pagina.Hash route changes (example.com/foo#bar) are also recorded as new page views.
enableRequestHeaderTrackingenableRequestHeaderTracking falsefalse Se true, vengono rilevate le intestazioni della richiesta di recupero & AJAX, il valore predefinito è false.If true, AJAX & Fetch request headers is tracked, default is false.
enableResponseHeaderTrackingenableResponseHeaderTracking falsefalse Se true, vengono rilevate le intestazioni di risposta della richiesta di recupero & AJAX, il valore predefinito è false.If true, AJAX & Fetch request's response headers is tracked, default is false.
distributedTracingModedistributedTracingMode DistributedTracingModes.AI Imposta la modalità di traccia distribuita.Sets the distributed tracing mode. Se è impostata la modalità AI_AND_W3C o W3C, le intestazioni del contesto di traccia W3C (traceparent/tracestate) verranno generate e incluse in tutte le richieste in uscita.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 viene fornito per la compatibilità con le versioni precedenti di tutti i servizi Application Insights instrumentati.AI_AND_W3C is provided for back-compatibility with any legacy Application Insights instrumented services.

Applicazioni a pagina singolaSingle Page Applications

Per impostazione predefinita, questo SDK non gestirà la modifica della Route basata sullo stato che si verifica nelle applicazioni a pagina singola.By default, this SDK will not handle state-based route changing that occurs in single page applications. Per abilitare il rilevamento automatico delle modifiche della route per l'applicazione a pagina singola, è possibile aggiungere enableAutoRouteTracking: true alla configurazione di installazione.To enable automatic route change tracking for your single page application, you can add enableAutoRouteTracking: true to your setup configuration.

Attualmente si offre un plug-in React separato che è possibile inizializzare con questo SDK.Currently, we offer a separate React plugin which you can initialize with this SDK. Verrà anche eseguito il rilevamento delle modifiche delle route, oltre a raccogliere altri dati di telemetria specifici di React.It will also accomplish route change tracking for you, as well as collect other React specific telemetry.

Estensioni ReactReact extensions

EstensioniExtensions
ReactReact
React NativeReact Native

Esplorare i dati sul lato client e sul browserExplore browser/client-side data

Per visualizzare i dati del browser/lato client, passare a metriche e aggiungere singole metriche a cui si è interessati:Browser/client-side data can be viewed by going to Metrics and adding individual metrics you are interested in:

È anche possibile visualizzare i dati da JavaScript SDK tramite l'esperienza del browser nel portale.You can also view your data from the JavaScript SDK via the Browser experience in the portal.

Selezionare browser , quindi scegliere errori o prestazioni.Select Browser and then choose Failures or Performance.

PerformancePerformance

DipendenzeDependencies

AnalyticsAnalytics

Per eseguire una query sui dati di telemetria raccolti da JavaScript SDK, selezionare il pulsante Visualizza nei log (Analytics) .To query your telemetry collected by the JavaScript SDK, select the View in Logs (Analytics) button. Con l'aggiunta di un where dichiarazione di client_Type == "Browser", verranno visualizzati solo i dati di JavaScript SDK e tutti i dati di telemetria sul lato server raccolti da altri SDK verranno esclusi.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

Supporto della mappa di origineSource Map Support

Il minimizzati stack dei dati di telemetria delle eccezioni può essere unminified nel portale di Azure.The minified callstack of your exception telemetry can be unminified in the Azure portal. Tutte le integrazioni esistenti nel pannello Dettagli eccezione funzioneranno con il nuovo unminified stack.All existing integrations on the Exception Details panel will work with the newly unminified callstack. Il trascinamento della selezione della mappa di origine unminifying supporta tutti gli SDK JS esistenti e futuri (+ node. JS), pertanto non è necessario aggiornare la versione dell'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. Per visualizzare il stack unminified,To view your unminified callstack,

  1. Selezionare un elemento di telemetria delle eccezioni nel portale di Azure per visualizzare i relativi dettagli della transazione end-to-end.Select an Exception Telemetry item in the Azure portal to view its "End-to-end transaction details"
  2. Identificare i mapping di origine corrispondenti a questo stack di chiamate.Identify which source maps correspond to this call stack. La mappa di origine deve corrispondere al file di origine di un stack frame, ma con suffisso .mapThe source map must match a stack frame's source file, but suffixed with .map
  3. Trascinare e rilasciare i mapping di origine nello stack di chiamate nel portale di Azure Drag and drop the source maps onto the call stack in the Azure portal

Application Insights Web BasicApplication Insights Web Basic

Per un'esperienza semplificata, è invece possibile installare la versione di base di Application InsightsFor a lightweight experience, you can instead install the basic version of Application Insights

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

Questa versione include il numero minimo di caratteristiche e funzionalità e si basa su di esso per compilarlo nel modo appropriato.This version comes with the bare minimum number of features and functionalities and relies on you to build it up as you see fit. Ad esempio, non esegue alcuna raccolta (eccezioni non rilevate, AJAX e così via).For example, it performs no autocollection (uncaught exceptions, AJAX, etc.). Le API per inviare determinati tipi di dati di telemetria, ad esempio trackTrace, trackExceptione così via, non sono incluse in questa versione, quindi è necessario fornire il proprio 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. L'unica API disponibile è track.The only API that is available is track. Un esempio è disponibile qui.A sample is located here.

esempiExamples

Per esempi eseguibili, vedere esempi di Application Insights JavaScript SDKFor runnable examples, see Application Insights Javascript SDK Samples

Aggiornamento dalla versione precedente di Application InsightsUpgrading from the old Version of Application Insights

Modifiche di rilievo nella versione SDK v2:Breaking changes in the SDK V2 version:

  • Per consentire una migliore firma API, alcune delle chiamate API, ad esempio trackPageView, trackexception sono state aggiornate.To allow for better API signatures, some of the API calls such as trackPageView, trackException have been updated. L'esecuzione in IE8 o versioni precedenti del browser non è supportata.Running in IE8 or lower versions of the browser is not supported.
  • La busta di telemetria presenta modifiche al nome del campo e alla struttura a causa degli aggiornamenti dello schema dati.Telemetry envelope has field name and structure changes due to data schema updates.
  • Spostamento context.operation context.telemetryTrace.Moved context.operation to context.telemetryTrace. Sono stati modificati anche alcuni campi (operation.id --> telemetryTrace.traceID)Some fields were also changed (operation.id --> telemetryTrace.traceID)
    • Se si vuole aggiornare manualmente l'ID di visualizzazione corrente (ad esempio, nelle app SPA), questa operazione può essere eseguita con 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()

Se si usa l'SDK di produzione di Application Insights (1.0.20) corrente e si vuole verificare se il nuovo SDK funziona in fase di esecuzione, aggiornare l'URL a seconda dello scenario di caricamento dell'SDK corrente.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.

  • Scaricare tramite lo scenario della rete CDN: aggiornare il frammento di codice attualmente usato per puntare all'URL seguente: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"
    
  • scenario NPM: chiamare downloadAndSetup per scaricare lo script ApplicationInsights completo dalla rete CDN e inizializzarlo con la chiave di strumentazione: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"
       });
    

Eseguire il test in un ambiente interno per verificare che la telemetria del monitoraggio funzioni come previsto.Test in internal environment to verify monitoring telemetry is working as expected. Se tutto funziona, aggiornare le firme dell'API in modo appropriato alla versione SDK v2 e distribuirle negli ambienti di produzione.If all works, update your API signatures appropriately to SDK V2 version and deploy in your production environments.

Prestazioni/overhead SDKSDK performance/overhead

A soli 25 KB gzippato e impiegando solo ~ 15 ms per l'inizializzazione, Application Insights aggiunge una quantità trascurabile di LoadTime al sito Web.At just 25 KB gzipped, and taking only ~15 ms to initialize, Application Insights adds a negligible amount of loadtime to your website. Usando il frammento di codice, vengono caricati rapidamente i componenti minimi della libreria.By using the snippet, minimal components of the library are quickly loaded. Nel frattempo, lo script completo viene scaricato in background.In the meantime, the full script is downloaded in the background.

Durante il download dello script dalla rete CDN, tutte le tracce della pagina vengono accodate.While the script is downloading from the CDN, all tracking of your page is queued. Al termine dell'inizializzazione asincrona dello script scaricato, verranno rilevati tutti gli eventi accodati.Once the downloaded script finishes asynchronously initializing, all events that were queued are tracked. Di conseguenza, non si perderanno i dati di telemetria durante l'intero ciclo di vita della pagina.As a result, you will not lose any telemetry during the entire life cycle of your page. Questo processo di installazione fornisce alla pagina un sistema di analisi trasparente, invisibile agli utenti.This setup process provides your page with a seamless analytics system, invisible to your users.

Riepilogo:Summary:

  • gzippato di 25 KB25 KB gzipped
  • tempo totale di inizializzazione di 15 ms15 ms overall initialization time
  • Nessun rilevamento perso durante il ciclo di vita della paginaZero tracking missed during life cycle of page

Supporto browserBrowser support

Chrome Firefox IE Opera Safari
✔ Più recenti di ChromeChrome Latest ✔ ✔ Più recenti di FirefoxFirefox Latest ✔ Internet Explorer 9 + & Edge ✔IE 9+ & Edge ✔ Opera più recente ✔Opera Latest ✔ Safari più recenti ✔Safari Latest ✔

SDK open sourceOpen-source SDK

Il Application Insights JavaScript SDK è open source per visualizzare il codice sorgente o per contribuire al progetto visitare il repository GitHub ufficiale.The Application Insights JavaScript SDK is open-source to view the source code or to contribute to the project visit the official GitHub repository.

Passaggi successiviNext steps