Application Insights voor webpagina’s

Krijg inzicht in de prestaties en het gebruik van uw webpagina's of app. Als u Application Insights toevoegt aan uw paginascript, krijgt u timings van paginaladingen en AJAX-aanroepen, tellingen en details van browser-uitzonderingen en AJAX-fouten, evenals het aantal gebruikers en sessies. Al deze gegevens kunnen worden gesegmenteerd op pagina, clientbesturingssysteem en browserversie, geografische locatie en andere dimensies. U kunt waarschuwingen instellen voor foutaantallen of het langzaam laden van de pagina. En door het invoegen van trace-aanroepen in JavaScript-code, kunt u bijhouden hoe de verschillende functies van uw webpaginatoepassing worden gebruikt.

Application Insights kan met elke webpagina worden gebruikt. Het enige wat u hiervoor hoeft te doen, is een klein stukje JavaScript toevoegen. Als uw webservice Java of ASP.NETis, kunt u de SDK's aan de serverzijde gebruiken in combinatie met de JavaScript-SDK aan de clientzijde om een end-to-end-inzicht te krijgen in de prestaties van uw app.

De JavaScript-SDK toevoegen

Belangrijk

Verbindingsreeksen worden aanbevolen voor instrumentatiesleutels. Voor nieuwe Azure-regio's is het gebruik van verbindingsreeksen in plaats van instrumentatiesleutels vereist. Verbindingsreeks identificeert de resource waar u uw telemetriegegevens aan wilt koppelen. U kunt hiermee ook de eindpunten wijzigen die door uw resource worden gebruikt als bestemming voor uw telemetrie. U moet de gegevens kopiëren connection string toevoegen aan de code van uw toepassing of aan een omgevingsvariabele.

  1. Eerst hebt u een Application Insights-resource nodig. Als u nog geen resource en instrumentatiesleutel hebt, volgt u de instructies voor het maken van een nieuwe resource.
  2. Kopieer de instrumentatiesleutel (ook wel iKey genoemd) of connection string voor de resource waar u uw JavaScript-telemetrie naar wilt sturen (van stap 1.) U voegt deze toe aan de instrumentationKey instelling of van de Application Insights connectionString JavaScript SDK.
  3. Voeg de Application Insights JavaScript SDK toe aan uw webpagina of app via een van de volgende twee opties:

Belangrijk

Gebruik slechts één methode om de JavaScript-SDK toe te voegen aan uw toepassing. Als u de NPM-installatie gebruikt, moet u het fragment niet gebruiken en vice versa.

Notitie

NPM Setup installeert de JavaScript SDK als een afhankelijkheid van uw project, waardoor IntelliSense wordt ingeschakeld, terwijl het fragment de SDK tijdens runtime op haalt. Beide ondersteunen dezelfde functies. Ontwikkelaars die meer aangepaste gebeurtenissen en configuraties willen, kiezen doorgaans echter voor NPM Setup, terwijl gebruikers die op zoek zijn naar snelle inschakelen van out-of-the-box web analytics kiezen voor het fragment.

Installatie op basis van npm

Installeren via NPM.

npm i --save @microsoft/applicationinsights-web

Notitie

Typen zijn opgenomen in dit pakket, zodat u geen afzonderlijk typepakket hoeft te installeren.

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

Installatie op basis van fragmenten

Als uw app geen gebruik maakt van npm, kunt u uw webpagina's rechtstreeks instrumenteren met Application Insights door dit fragment boven aan elk van uw pagina's te plaatsen. Het moet bij voorkeur het eerste script in uw sectie zijn, zodat potentiële problemen met al uw afhankelijkheden en eventueel <head> JavaScript-fouten kunnen worden bewaakt. Als u Blazor Server-app gebruikt, voegt u het fragment boven aan het bestand _Host.cshtml toe in de sectie <head> .

Om bij te houden welke versie van het fragment uw toepassing gebruikt, bevat de gebeurtenis paginaweergave vanaf versie 2.5.5 een nieuwe tag ai.internal.snippet die de geïdentificeerde fragmentversie bevat.

Het huidige fragment (hieronder vermeld) is versie 5, de versie wordt in het codefragment gecodeerd als sv:"#" en de huidige versie is ook beschikbaar op GitHub.

<script type="text/javascript">
!function(T,l,y){var S=T.location,k="script",D="instrumentationKey",C="ingestionendpoint",I="disableExceptionTracking",E="ai.device.",b="toLowerCase",w="crossOrigin",N="POST",e="appInsightsSDK",t=y.name||"appInsights";(y.name||T[e])&&(T[e]=t);var n=T[t]||function(d){var g=!1,f=!1,m={initialize:!0,queue:[],sv:"5",version:2,config:d};function v(e,t){var n={},a="Browser";return n[E+"id"]=a[b](),n[E+"type"]=a,n["ai.operation.name"]=S&&S.pathname||"_unknown_",n["ai.internal.sdkVersion"]="javascript:snippet_"+(m.sv||m.version),{time:function(){var e=new Date;function t(e){var t=""+e;return 1===t.length&&(t="0"+t),t}return e.getUTCFullYear()+"-"+t(1+e.getUTCMonth())+"-"+t(e.getUTCDate())+"T"+t(e.getUTCHours())+":"+t(e.getUTCMinutes())+":"+t(e.getUTCSeconds())+"."+((e.getUTCMilliseconds()/1e3).toFixed(3)+"").slice(2,5)+"Z"}(),iKey:e,name:"Microsoft.ApplicationInsights."+e.replace(/-/g,"")+"."+t,sampleRate:100,tags:n,data:{baseData:{ver:2}}}}var h=d.url||y.src;if(h){function a(e){var t,n,a,i,r,o,s,c,u,p,l;g=!0,m.queue=[],f||(f=!0,t=h,s=function(){var e={},t=d.connectionString;if(t)for(var n=t.split(";"),a=0;a<n.length;a++){var i=n[a].split("=");2===i.length&&(e[i[0][b]()]=i[1])}if(!e[C]){var r=e.endpointsuffix,o=r?e.location:null;e[C]="https://"+(o?o+".":"")+"dc."+(r||"services.visualstudio.com")}return e}(),c=s[D]||d[D]||"",u=s[C],p=u?u+"/v2/track":d.endpointUrl,(l=[]).push((n="SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)",a=t,i=p,(o=(r=v(c,"Exception")).data).baseType="ExceptionData",o.baseData.exceptions=[{typeName:"SDKLoadFailed",message:n.replace(/\./g,"-"),hasFullStack:!1,stack:n+"\nSnippet failed to load ["+a+"] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: "+(S&&S.pathname||"_unknown_")+"\nEndpoint: "+i,parsedStack:[]}],r)),l.push(function(e,t,n,a){var i=v(c,"Message"),r=i.data;r.baseType="MessageData";var o=r.baseData;return o.message='AI (Internal): 99 message:"'+("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) ("+n+")").replace(/\"/g,"")+'"',o.properties={endpoint:a},i}(0,0,t,p)),function(e,t){if(JSON){var n=T.fetch;if(n&&!y.useXhr)n(t,{method:N,body:JSON.stringify(e),mode:"cors"});else if(XMLHttpRequest){var a=new XMLHttpRequest;a.open(N,t),a.setRequestHeader("Content-type","application/json"),a.send(JSON.stringify(e))}}}(l,p))}function i(e,t){f||setTimeout(function(){!t&&m.core||a()},500)}var e=function(){var n=l.createElement(k);n.src=h;var e=y[w];return!e&&""!==e||"undefined"==n[w]||(n[w]=e),n.onload=i,n.onerror=a,n.onreadystatechange=function(e,t){"loaded"!==n.readyState&&"complete"!==n.readyState||i(0,t)},n}();y.ld<0?l.getElementsByTagName("head")[0].appendChild(e):setTimeout(function(){l.getElementsByTagName(k)[0].parentNode.appendChild(e)},y.ld||0)}try{m.cookie=l.cookie}catch(p){}function t(e){for(;e.length;)!function(t){m[t]=function(){var e=arguments;g||m.queue.push(function(){m[t].apply(m,e)})}}(e.pop())}var n="track",r="TrackPage",o="TrackEvent";t([n+"Event",n+"PageView",n+"Exception",n+"Trace",n+"DependencyData",n+"Metric",n+"PageViewPerformance","start"+r,"stop"+r,"start"+o,"stop"+o,"addTelemetryInitializer","setAuthenticatedUserContext","clearAuthenticatedUserContext","flush"]),m.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4};var s=(d.extensionConfig||{}).ApplicationInsightsAnalytics||{};if(!0!==d[I]&&!0!==s[I]){var c="onerror";t(["_"+c]);var u=T[c];T[c]=function(e,t,n,a,i){var r=u&&u(e,t,n,a,i);return!0!==r&&m["_"+c]({message:e,url:t,lineNumber:n,columnNumber:a,error:i}),r},d.autoExceptionInstrumented=!0}return m}(y.cfg);function a(){y.onInit&&y.onInit(n)}(T[t]=n).queue&&0===n.queue.length?(n.queue.push(a),n.trackPageView({})):a()}(window,document,{
src: "https://js.monitor.azure.com/scripts/b/ai.2.min.js", // The SDK URL Source
// name: "appInsights", // Global SDK Instance name defaults to "appInsights" when not supplied
// ld: 0, // Defines the load delay (in ms) before attempting to load the sdk. -1 = block page load and add to head. (default) = 0ms load after timeout,
// useXhr: 1, // Use XHR instead of fetch to report failures (if available),
crossOrigin: "anonymous", // When supplied this will add the provided value as the cross origin attribute on the script tag
// onInit: null, // Once the application insights instance has loaded and initialized this callback function will be called with 1 argument -- the sdk instance (DO NOT ADD anything to the sdk.queue -- As they won't get called)
cfg: { // Application Insights Configuration
    instrumentationKey: "YOUR_INSTRUMENTATION_KEY_GOES_HERE"
    /* ...Other Configuration Options... */
}});
</script>

Notitie

Voor de leesbaarheid en om mogelijke JavaScript-fouten te verminderen, worden alle mogelijke configuratieopties weergegeven op een nieuwe regel in bovenstaande codefragmenten. Als u de waarde van een commentaarregel niet wilt wijzigen, kan deze worden verwijderd.

Fouten bij laden van script rapporteren

Met deze versie van het fragment worden fouten gedetecteerd en gemeld bij het laden van de SDK vanuit de CDN als een uitzondering op de Azure Monitor-portal (onder de browser met uitzonderingen bij fouten), biedt deze uitzondering inzicht in fouten van dit type, zodat u zich ervan bewust bent dat uw toepassing geen > telemetrie (of andere uitzonderingen) rapporteert zoals > verwacht. Dit signaal is een belangrijke meting om te begrijpen dat u geen telemetrie meer hebt, omdat de SDK niet is geladen of initialiseren, wat kan leiden tot:

  • Onderrapportage van hoe gebruikers uw site gebruiken (of proberen te gebruiken);
  • Ontbrekende telemetrie over hoe uw eindgebruikers uw site gebruiken;
  • Ontbrekende JavaScript-fouten waardoor uw eindgebruikers uw site mogelijk niet kunnen gebruiken.

Zie de pagina voor het oplossen van problemen met de SDK-load voor meer informatie over deze uitzondering.

Als u deze fout rapporteert als een uitzondering op de portal, wordt de configuratieoptie van de Application Insights-configuratie niet gebruikt. Als deze fout optreedt, wordt deze dus altijd gerapporteerd door het codefragment, zelfs wanneer de ondersteuning disableExceptionTracking voor window.onerror is uitgeschakeld.

Rapportage van SDK-laadfouten wordt specifiek NIET ondersteund op IE 8 (of minder). Dit helpt bij het verkleinen van de geminificeerde grootte van het fragment door ervan uit te gaan dat de meeste omgevingen niet uitsluitend IE 8 of minder zijn. Als u deze vereiste hebt en u deze uitzonderingen wilt ontvangen, moet u een opvulling voor poly ophalen opnemen of een eigen fragmentversie maken die gebruikt in plaats van . Het wordt aanbevolen om de opgegeven code voor codefragmenten als uitgangspunt te XDomainRequest XMLHttpRequest gebruiken.

Notitie

Als u een eerdere versie van het fragment gebruikt, is het raadzaam om bij te werken naar de nieuwste versie, zodat u deze eerder niet-gemelde problemen ontvangt.

Configuratieopties voor fragmenten

Alle configuratieopties zijn nu verplaatst naar het einde van het script om te voorkomen dat er per ongeluk JavaScript-fouten worden gemaakt die er niet alleen voor zorgen dat de SDK niet kan worden geladen, maar ook de rapportage van de fout zou uitschakelen.

Elke configuratieoptie wordt hierboven weergegeven op een nieuwe regel. Als u de standaardwaarde van een item dat wordt vermeld als [optioneel] niet wilt overschrijven, kunt u die regel verwijderen om de resulterende grootte van de geretourneerde pagina te minimaliseren.

De beschikbare configuratieopties zijn

Naam Type Beschrijving
src tekenreeks [vereist] De volledige URL voor het laden van de SDK. Deze waarde wordt gebruikt voor het kenmerk 'src' van een dynamisch toegevoegd < > script/tag. U kunt de openbare CDN of uw eigen privé-gehoste locatie gebruiken.
naam tekenreeks [optioneel] De algemene naam voor de initialiseerde SDK is standaard ingesteld op appInsights . Dit window.appInsights is dus een verwijzing naar het initialiseerde exemplaar. Opmerking: als u een naamwaarde op geeft of als een eerder exemplaar lijkt te zijn toegewezen (via de algemene naam appInsightsSDK), wordt deze naamwaarde ook gedefinieerd in de algemene naamruimte als . Dit is vereist voor de SDK-initialisatiecode om ervoor te zorgen dat de SDK het juiste codefragment en de juiste proxymethoden initialiseert en bij window.appInsightsSDK=<name value> werkt.
Ld getal in ms [optioneel] Definieert de vertraging die moet worden gewacht voordat de SDK wordt geladen. De standaardwaarde is 0 ms en elke negatieve waarde voegt onmiddellijk een scripttag toe aan het hoofdgebied van de pagina, waardoor de gebeurtenis voor het laden van de pagina wordt geblokkeerd totdat het script wordt geladen < > (of mislukt).
useXhr Booleaanse booleaanse [optioneel] Deze instelling wordt alleen gebruikt voor het rapporteren van SDK-laadfouten. Bij rapportage wordt eerst geprobeerd fetch() te gebruiken, indien beschikbaar en vervolgens terug te vallen op XHR. Als u deze waarde instelt op true, wordt de controle voor ophalen overgeslagen. Gebruik van deze waarde is alleen vereist als uw toepassing wordt gebruikt in een omgeving waarin ophalen de foutgebeurtenissen niet kan verzenden.
crossOrigin tekenreeks [optioneel] Door deze instelling op te nemen, bevat de scripttag die is toegevoegd om de SDK te downloaden het kenmerk crossOrigin met deze tekenreekswaarde. Als dit niet is gedefinieerd (de standaardinstelling), wordt er geen crossOrigin-kenmerk toegevoegd. Aanbevolen waarden zijn niet gedefinieerd (de standaardinstelling); ""; of 'anoniem' (zie HTML-kenmerk: crossorigin documentatie voor alle geldige waarden)
configuratie object [vereist] De configuratie is tijdens de initialisatie doorgegeven Insights Application Insights SDK.

Verbindingsreeks instellen

Voor de installatie van NPM of codefragmenten kunt u ook uw exemplaar van Application Insights met behulp van een verbindingsreeks. Vervang het veld instrumentationKey door het connectionString veld .

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

const appInsights = new ApplicationInsights({ config: {
  connectionString: 'YOUR_CONNECTION_STRING_GOES_HERE'
  /* ...Other Configuration Options... */
} });
appInsights.loadAppInsights();
appInsights.trackPageView();

Telemetrie verzenden naar de Azure Portal

Standaard worden met application Insights JavaScript SDK een aantal telemetrie-items automatisch opgehaald die nuttig zijn bij het bepalen van de status van uw toepassing en de onderliggende gebruikerservaring. Deze omvatten:

  • Niet-geïnstalleerde uitzonderingen in uw app, met inbegrip van informatie over
    • Stack-trace
    • Details van de uitzondering en het bericht bij de fout
    • Aantal & regelkolom
    • URL waar fout is opgetreden
  • Aanvragen voor netwerkafhankelijkheid die worden gedaan door uw app XHR en Fetch (ophalen verzameling is standaard uitgeschakeld) en bevatten informatie over
    • URL van afhankelijkheidsbron
    • Opdrachtregelmethode & gebruikt om de afhankelijkheid aan te vragen
    • Duur van de aanvraag
    • Resultaatcode en successtatus van de aanvraag
    • Id (indien van u) van de gebruiker die de aanvraag indient
    • Correlatiecontext (indien van belang) waarin de aanvraag wordt gedaan
  • Gebruikersgegevens (bijvoorbeeld Locatie, netwerk, IP)
  • Apparaatgegevens (bijvoorbeeld browser, besturingssysteem, versie, taal, model)
  • Sessiegegevens

Initialisaties voor telemetrie

Initialisaties voor telemetrie worden gebruikt om de inhoud van de verzamelde telemetrie te wijzigen voordat deze wordt verzonden vanuit de browser van de gebruiker. Ze kunnen ook worden gebruikt om te voorkomen dat bepaalde telemetrie wordt verzonden door te false retourneren. Er kunnen meerdere telemetrie-initialisaties worden toegevoegd aan uw Application Insights-instantie en ze worden uitgevoerd om ze toe te voegen.

Het invoerargument voor is een callback die een als argument gebruikt addTelemetryInitializer en een of ITelemetryItem boolean retourneert. void Als wordt retourneert, wordt het telemetrie-item niet verzonden, anders wordt het doorgestuurd naar de volgende initialisatie voor telemetrie, indien van deze gegevens, of wordt het verzonden naar het eindpunt van de false telemetrieverzameling.

Een voorbeeld van het gebruik van telemetrie-initialisaties:

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

Configuratie

De meeste configuratievelden krijgen een naam, zodat ze standaard kunnen worden ingesteld op onwaar. Alle velden zijn optioneel, met uitzondering van instrumentationKey .

Naam Beschrijving Standaard
instrumentationKey Vereist
Instrumentatiesleutel die u hebt verkregen van de Azure Portal.
tekenreeks
null
accountId Een optionele account-id als uw app gebruikers in accounts groeperen. Geen spaties, komma's, puntkomma's, is gelijk aan of verticale balken tekenreeks
null
sessionRenewalMs Een sessie wordt geregistreerd als de gebruiker inactief is voor deze tijd in milliseconden. numeriek
1800000
(30 minuten)
sessionExpirationMs Een sessie wordt geregistreerd als deze is voortgezet voor deze hoeveelheid tijd in milliseconden. numeriek
86400000
(24 uur)
maxBatchSizeInBytes Maximale grootte van telemetriebatch. Als een batch deze limiet overschrijdt, wordt deze onmiddellijk verzonden en wordt er een nieuwe batch gestart numeriek
10.000
maxBatchInterval Hoe lang de batch-telemetrie moet duren voordat deze wordt verzonden (milliseconden) numeriek
15.000
uitzonderingstracking​uitschakelen Indien waar, worden uitzonderingen niet automatisch opgehaald. booleaans
onjuist
disableTelemetry Indien waar, wordt er geen telemetrie verzameld of verzonden. booleaans
onjuist
enableDebug Indien waar, worden interne gegevens voor debuggen als een uitzondering in plaats van vastgelegd, ongeacht de instellingen voor SDK-logboekregistratie. De standaardinstelling is onwaar.
Opmerking: Het inschakelen van deze instelling resulteert in een uitgevallen telemetrie wanneer er een interne fout optreedt. Dit kan handig zijn voor het snel identificeren van problemen met uw configuratie of gebruik van de SDK. Als u geen telemetrie wilt verliezen tijdens debuggen, kunt u overwegen of te consoleLoggingLevel gebruiken in plaats van telemetryLoggingLevel enableDebug .
booleaans
onjuist
loggingLevelConsole Registreert interne Application Insights fouten in de console.
0: uit,
1: Alleen kritieke fouten,
2: Alles (fouten & waarschuwingen)
numeriek
0
loggingLevelTelemetry Verzendt interne Application Insights fouten als telemetrie.
0: uit,
1: Alleen kritieke fouten,
2: Alles (fouten & waarschuwingen)
numeriek
1
diagnosticLogInterval (intern) Polling-interval (in ms) voor interne logboekregistratiewachtrij numeriek
10.000
samplingPercentage Percentage gebeurtenissen dat wordt verzonden. De standaardwaarde is 100, wat betekent dat alle gebeurtenissen worden verzonden. Stel deze in als u uw gegevenslimiet wilt behouden voor grootschalige toepassingen. numeriek
100
autoTrackPageVisitTime Indien waar, wordt in een paginaweergave de weergavetijd van de vorige instrumentatiepagina bijgespoord en verzonden als telemetrie en wordt er een nieuwe timer gestart voor de huidige paginaweergave. Het wordt verzonden als een aangepaste metrische gegevens met de naam in en wordt berekend via de functie PageVisitTime milliseconds Date now() (indien beschikbaar) en valt terug naar (nieuwe Datum()). getTime() als now() niet beschikbaar is (IE8 of minder). De standaardinstelling is onwaar. booleaans
onjuist
disableBlockaxTracking Indien waar, worden Ajax-aanroepen niet automatisch opgehaald. booleaans
onjuist
disableFetchTracking Indien waar, worden aanvragen voor ophalen niet automatisch opgehaald. booleaans
true
overridePageViewDuration Indien waar, wordt het standaardgedrag van trackPageView gewijzigd om het duurinterval voor het einde van de paginaweergave vast te stellen wanneer trackPageView wordt aangeroepen. Als false is en er geen aangepaste duur wordt opgegeven omPageView bij te houden, worden de prestaties van de paginaweergave berekend met behulp van de API voor navigatietijd. booleaans
maxCallsPerView Standaard 500: hiermee bepaalt u hoeveel Ajax-aanroepen per paginaweergave worden bewaakt. Stel in op -1 om alle (onbeperkte) Ajax-aanroepen op de pagina te controleren. numeriek
500
disableDataLossAnalysis Indien onwaar, worden interne buffers voor afzenders van telemetrie gecontroleerd bij het opstarten op items die nog niet zijn verzonden. booleaans
true
correlatieheaders​uitschakelen Indien onwaar, voegt de SDK twee headers (Request-Id en Request-Context) toe aan alle afhankelijkheidsaanvragen om deze te correleren met de bijbehorende aanvragen aan de serverzijde. booleaans
onjuist
correlationHeader​ExcludedDomains Correlatieheaders uitschakelen voor specifieke domeinen tekenreeks[]
Ongedefinieerde
correlationHeader​ExcludePatterns Correlatieheaders uitschakelen met behulp van reguliere expressies regex []
Ongedefinieerde
correlationHeader​Domains Correlatieheaders inschakelen voor specifieke domeinen tekenreeks[]
Ongedefinieerde
disableFlush​OnBeforeUnload Indien waar, wordt de methode flush niet aangeroepen wanneer de gebeurtenistriggers onBeforeUnload booleaans
onjuist
enableSessionStorageBuffer Indien waar, wordt de buffer met alle niet-nt telemetrie opgeslagen in sessieopslag. De buffer wordt hersteld bij het laden van pagina's booleaans
true
cookieCfg Standaardinstellingen voor ingeschakeld cookiegebruik zie ICookieCfgConfig settings for full defaults (ICookieCfgConfig-instellingen voor volledige standaardinstellingen). ICookieCfgConfig
(Sinds 2.6.0)
Ongedefinieerde
isCookieUseDisabled
disableCookiesUsage
Indien waar, worden met de SDK geen gegevens van cookies opgeslagen of gelezen. Houd er rekening mee dat hiermee de cookies voor gebruiker en sessie worden uitgeschakeld en dat de gebruiksblades en ervaringen onbruikbaar worden. isCookieUseDisable wordt afgeschaft in plaats van disableCookiesUsage, wanneer beide zijn opgegeven disableCookiesUsage heeft voorrang.
(Sinds v2.6.0) En als ook is gedefinieerd, heeft het voorrang op deze waarden, dan kan cookiegebruik na de initialisatie opnieuw worden ingeschakeld cookieCfg.enabled via core.getCookieMgr().setEnabled(true).
alias voor cookieCfg.enabled
onjuist
cookieDomain Aangepast cookiedomein. Dit is handig als u Toepassings- en Insights wilt delen tussen subdomeinen.
(Sinds v2.6.0) Als cookieCfg.domain is gedefinieerd, heeft deze prioriteit boven deze waarde.
alias voor cookieCfg.domain
null
cookiePath Aangepast cookiepad. Dit is handig als u Application Insights cookies achter een toepassingsgateway wilt delen.
Als cookieCfg.path is gedefinieerd, heeft deze prioriteit boven deze waarde.
alias voor cookieCfg.path
(Sinds 2.6.0)
null
isRetryDisabled Indien onwaar, opnieuw proberen op 206 (gedeeltelijk geslaagd), 408 (time-out), 429 (te veel aanvragen), 500 (interne serverfout), 503 (service niet beschikbaar) en 0 (offline, alleen indien gedetecteerd) booleaans
onjuist
isStorageUseDisabled Indien waar, worden met de SDK geen gegevens opgeslagen of gelezen uit lokale opslag en sessieopslag. booleaans
onjuist
isBeaconApiDisabled Indien onwaar, verzendt de SDK alle telemetrie met behulp van de Baken-API booleaans
true
onunloadDisableBeacon Wanneer het tabblad is gesloten, verzendt de SDK alle resterende telemetrie met behulp van de Baken-API booleaans
onjuist
sdkExtension Hiermee stelt u de naam van de SDK-extensie in. Alleen alfabetische tekens zijn toegestaan. De naam van de extensie wordt toegevoegd als voorvoegsel aan de tag ai.internal.sdkVersion (bijvoorbeeld 'ext_javascript:2.0.0'). tekenreeks
null
isBrowserLink​TrackingEnabled Indien waar, worden alle browserkoppelingsaanvragen door de SDK bijgespoord. booleaans
onjuist
appId AppId wordt gebruikt voor de correlatie tussen AJAX-afhankelijkheden aan de clientzijde met de aanvragen aan de serverzijde. Wanneer de Baken-API is ingeschakeld, kan deze niet automatisch worden gebruikt, maar kan deze handmatig worden ingesteld in de configuratie. tekenreeks
null
CorsCorrelation​inschakelen Indien waar, voegt de SDK twee headers (Request-Id en Request-Context) toe aan alle CORS-aanvragen om uitgaande AJAX-afhankelijkheden te correleren met de bijbehorende aanvragen aan de serverzijde. booleaans
onjuist
namePrefix Een optionele waarde die wordt gebruikt als naampostfix voor localStorage en cookienaam. tekenreeks
Ongedefinieerde
Automatisch​​inschakelen Routewijzigingen in toepassingen met één pagina (SPA) automatisch bijhouden. Indien waar, verzendt elke routewijziging een nieuwe Pageview naar Application Insights. Hashroutewijzigingen ( example.com/foo#bar ) worden ook vastgelegd als nieuwe paginaweergaven. booleaans
onjuist
enableRequest​HeaderTracking Als dit waar is, worden & Aanvraagheaders ophalen bijgespoord. booleaans
onjuist
enableResponse​HeaderTracking Indien waar, worden & antwoordheaders van de aanvraag opgehaald. booleaans
onjuist
distributedTracingMode Hiermee stelt u de gedistribueerde traceringsmodus. Als AI_AND_W3C modus of W3C-modus is ingesteld, worden W3C-trace contextheaders (traceparent/tracestate) gegenereerd en opgenomen in alle uitgaande aanvragen. AI_AND_W3C wordt geleverd voor back-compatibiliteit met alle verouderde application Insights-instrumentatieservices. Zie het voorbeeld hier. DistributedTracingModesof
numeriek
(Sinds v2.6.0) DistributedTracingModes.AI_AND_W3C
(v2.5.11 of eerder) DistributedTracingModes.AI
​AjaxErrorStatusText inschakelen Als dit waar is, moet u tekst van antwoordfoutgegevens opnemen in afhankelijkheidsgebeurtenis bij mislukte AJAX-aanvragen. booleaans
onjuist
​AjaxPerfTracking inschakelen Vlag om op te zoeken en aanvullende browservensters.prestatietijdsinstellingen in de ajax gerapporteerde metrische gegevens (XHR en ophalen) in te sluiten. booleaans
onjuist
maxFormataxPerf​LookupAttempts Het maximum aantal keren om te zoeken naar de tijdstippen voor window.performance (indien beschikbaar), dit is vereist omdat niet alle browsers de window.performance vullen voordat het einde van de XHR-aanvraag wordt gemeld en voor het ophalen van aanvragen wordt dit toegevoegd nadat de aanvraag is voltooid. numeriek
3
ajaxPerfLookupDelay De hoeveelheid tijd die moet worden gewacht voordat opnieuw wordt geprobeerd om de tijdstippen voor windows.performance voor een aanvraag te vinden, de tijd is in milliseconden en wordt rechtstreeks doorgegeven ajax aan setTimeout(). numeriek
25 ms
enableUnhandled​PromiseRejection​Tracking Indien waar, worden niet-verholpen promise-afwijzingen automatisch opgehaald en gerapporteerd als een JavaScript-fout. Wanneer disableExceptionTracking true is (geen uitzonderingen bijhouden), wordt de configuratiewaarde genegeerd en worden niet-afhandeling van onverhandelde promises niet gerapporteerd. booleaans
onjuist
Validatie​InstrumentationKey​uitschakelen Indien waar, wordt validatiecontrole van instrumentatiesleutels overgeslagen. booleaans
onjuist
enablePerfMgr Als deze functie is ingeschakeld (true), worden er lokale perfEvents gemaakt voor code die is instrumenteerd om perfEvents (via de doPerf()-helper te zenden. Dit kan worden gebruikt om prestatieproblemen binnen de SDK te identificeren op basis van uw gebruik of optioneel binnen uw eigen instrumentatiecode. Meer informatie is beschikbaar in de basisdocumentatie. Sinds v2.5.7 booleaans
onjuist
perfEvtsSendAll Wanneer enablePerfMgr is ingeschakeld en de IPerfManager een INotificationManager .perfEvent() start, bepaalt deze vlag of een gebeurtenis wordt geactiveerd (en naar alle listeners wordt verzonden) voor alle gebeurtenissen (true) of alleen voor bovenliggende gebeurtenissen (onwaar < > standaard).
Een bovenliggende IPerfEvent is een gebeurtenis waarbij er geen andere IPerfEvent wordt uitgevoerd op het moment dat deze gebeurtenis wordt gemaakt en de bovenliggende eigenschap niet null of niet-gedefinieerd is. Sinds v2.5.7
booleaans
onjuist
idLength Hiermee wordt de standaardlengte geïdentificeerd die wordt gebruikt voor het genereren van nieuwe willekeurige sessie- en gebruikers-id-waarden. De standaardwaarde is 22, de vorige standaardwaarde was 5 (v2.5.8 of minder). Als u de vorige maximale lengte wilt behouden, moet u deze waarde instellen op 5. numeriek
22

Vanaf versie 2.6.0 is cookiebeheer nu rechtstreeks beschikbaar vanuit het exemplaar en kan het na de initialisatie worden uitgeschakeld en opnieuw worden ingeschakeld.

Als deze functie is uitgeschakeld tijdens de initialisatie via de configuraties of , kunt u deze nu opnieuw inschakelen via de disableCookiesUsage cookieCfg.enabled functie ICookieMgr. setEnabled

Het cookiebeheer op basis van een exemplaar vervangt ook de vorige globale coreUtils-functies disableCookies() van setCookie(...) , en getCookie(...) deleteCookie(...) . En om te profiteren van de verbeteringen die ook zijn geïntroduceerd als onderdeel van versie 2.6.0, moet u de globale functies niet meer gebruiken.

ICookieMgrConfig

Cookieconfiguratie voor op instanties gebaseerd cookiebeheer toegevoegd in versie 2.6.0.

Naam Beschrijving Type en standaard
enabled Een Booleaanse booleaanse functie die aangeeft of het gebruik van cookies door de SDK is ingeschakeld door het huidige exemplaar. Indien onwaar, worden in het exemplaar van de SDK dat door deze configuratie is initialiseerd, geen gegevens van cookies opgeslagen of gelezen booleaans
true
domein Aangepast cookiedomein. Dit is handig als u Toepassings- en Insights wilt delen tussen subdomeinen. Als deze niet is opgegeven, wordt de waarde van de hoofdwaarde cookieDomain gebruikt. tekenreeks
null
leertraject Hiermee geeft u het pad op dat moet worden gebruikt voor de cookie, als dit niet is opgegeven, wordt er een waarde uit de hoofdwaarde cookiePath gebruikt. tekenreeks
/
getCookie Functie voor het ophalen van de benoemde cookiewaarde, indien niet opgegeven, wordt de interne cookieparsering/caching gebruikt. (name: string) => string
null
setCookie Functie om de benoemde cookie in te stellen met de opgegeven waarde, die alleen wordt aangeroepen bij het toevoegen of bijwerken van een cookie. (name: string, value: string) => void
null
delCookie Functie om de benoemde cookie met de opgegeven waarde te verwijderen, gescheiden van setCookie om te voorkomen dat de waarde moet worden geparseerd om te bepalen of de cookie wordt toegevoegd of verwijderd. Als dit niet is opgegeven, wordt de interne cookieparsering/caching gebruikt. (name: string, value: string) => void
null

Bijhouden van tijd op pagina inschakelen

Door in te stellen, wordt de tijd bij houden die autoTrackPageVisitTime: true een gebruiker op elke pagina doorgeeft. Op elke nieuwe PageView wordt de duur die de gebruiker op de vorige pagina heeft besteed, verzonden als een aangepaste metriek met de naam PageVisitTime . Deze aangepaste metrische gegevens kunnen in de Metrics Explorer als een 'metrische gegevens op basis van logboeken'.

Correlatie inschakelen

Correlatie genereert en verzendt gegevens die gedistribueerde tracering mogelijk maken en de toepassingskaart, end-to-end transactieweergaveen andere diagnostische hulpprogramma's aanst sturen.

In het volgende voorbeeld ziet u alle mogelijke configuraties die nodig zijn om correlatie mogelijk te maken, met onderstaande scenariospecifieke opmerkingen:

// excerpt of the config section of the JavaScript SDK snippet with correlation
// between client-side AJAX and server requests enabled.
cfg: { // Application Insights Configuration
    instrumentationKey: "YOUR_INSTRUMENTATION_KEY_GOES_HERE"
    disableFetchTracking: false,
    enableCorsCorrelation: true,
    enableRequestHeaderTracking: true,
    enableResponseHeaderTracking: true,
    correlationHeaderExcludedDomains: ['myapp.azurewebsites.net', '*.queue.core.windows.net']
    /* ...Other Configuration Options... */
}});
</script>

Als een van de servers van derden met wie de client communiceert, de headers en niet kan accepteren en u de configuratie ervan niet kunt bijwerken, moet u deze in een lijst met uitgesloten servers plaatsen via de Request-Id Request-Context correlationHeaderExcludeDomains configuratie-eigenschap. Deze eigenschap ondersteunt jokertekens.

De serverzijde moet verbindingen met die headers kunnen accepteren. Afhankelijk van de configuratie aan de serverzijde is het vaak nodig om de lijst aan de serverzijde uit te breiden door en Access-Control-Allow-Headers handmatig toe te Request-Id Request-Context voegen.

Access-Control-Allow-Headers: Request-Id , Request-Context , <your header>

Notitie

Als u OpenTelemtry of Application Insights SDK's gebruikt die in 2020 of hoger zijn uitgebracht, raden we u aan WC3 TraceContext te gebruiken. Zie hier configuratie-richtlijnen.

Toepassingen met één pagina

Deze SDK kan standaard geen op status gebaseerde route wijzigen die plaatsvindt in toepassingen met één pagina. Als u automatische tracering van routewijziging wilt inschakelen voor uw toepassing met één pagina, kunt u toevoegen enableAutoRouteTracking: true aan de configuratie van uw installatie.

Momenteel bieden we een afzonderlijke invoeg React invoeging,die u kunt initialiseren met deze SDK. Ook wordt het bijhouden van routewijzigingen voor u bereikt en worden andere React telemetrie verzameld.

Notitie

Gebruik enableAutoRouteTracking: true deze alleen als u de React gebruikt. Beide kunnen nieuwe PageViews verzenden wanneer de route wordt gewijzigd. Als beide zijn ingeschakeld, kunnen dubbele PageViews worden verzonden.

Extensies

Extensies
React
React Native
Angular
Klik op Analytics Auto-collection

Browser-/clientgegevens verkennen

Browser-/clientgegevens kunnen worden weergegeven door naar Metrische gegevens te gaan en afzonderlijke metrische gegevens toe te voegen waarin u geïnteresseerd bent:

Schermopname van de pagina Metrische gegevens in Application Insights met grafische weergaven van metrische gegevens voor een webtoepassing.

U kunt uw gegevens ook weergeven vanuit de JavaScript SDK via de browserervaring in de portal.

Selecteer Browser en kies vervolgens Fouten of Prestaties.

Schermopname van de browserpagina in Application Insights laat zien hoe browserfouten of browserprestaties kunnen worden toegevoegd aan de metrische gegevens die u voor uw webtoepassing kunt bekijken.

Prestaties

Schermopname van de pagina Prestaties in Application Insights met grafische weergaven van metrische gegevens van Operations voor een webtoepassing.

Afhankelijkheden

Schermopname van de pagina Prestaties in Application Insights met grafische weergaven van metrische afhankelijkheidsgegevens voor een webtoepassing.

Analyse

Als u een query wilt uitvoeren op de telemetrie die is verzameld door de JavaScript-SDK, selecteert u de knop Weergeven in logboeken (Analyse). Door een instructie van toe te voegen, ziet u alleen gegevens van de JavaScript-SDK en worden alle telemetriegegevens aan de serverzijde die zijn verzameld door andere where client_Type == "Browser" SDK's uitgesloten.

// 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

Ondersteuning voor bronkaart

De geminificeerde aanroeptack van uw uitzonderings-telemetrie kan in de Azure Portal. Alle bestaande integraties in het deelvenster Uitzonderingsdetails werken met de zojuist niet-geminificeerde callstack.

U kunt uw Application Insights-resource koppelen aan uw eigen Azure Blob Storage-container om aanroepstacks automatisch te demineren. Zie automatische ondersteuning voor bronkaart om aan de slag te gaan.

Slepen en neerzetten

  1. Selecteer een uitzonderings-telemetrie-item in Azure Portal om de end-to-end transactiedetails ervan weer te geven
  2. Bepaal welke bronkaarten overeenkomen met deze aanroepstack. De bronkaart moet overeenkomen met het bronbestand van een stackframe, maar met het achtervoegsel .map
  3. Sleep de bronkaarten naar de aanroepstack in de Azure Portal Een geanimeerde afbeelding waarin wordt getoond hoe u bronkaartbestanden uit een buildmap kunt slepen en neerzetten in het callstack-venster  in de Azure Portal.

Application Insights Web Basic

Voor een lichtgewicht ervaring kunt u in plaats daarvan de basisversie van Application Insights

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

Deze versie wordt geleverd met het minimale aantal functies en functionaliteiten en is afhankelijk van u om deze naar eigen goedheid op te bouwen. Er wordt bijvoorbeeld geen autocollection uitgevoerd (niet-beladen uitzonderingen, AJAX, enzovoort). De API's voor het verzenden van bepaalde telemetrietypen, zoals , enzovoort, zijn niet opgenomen in deze versie, dus u moet uw eigen trackTrace trackException wrapper leveren. De enige API die beschikbaar is, is track . Hier bevindt zich een voorbeeld.

Voorbeelden

Zie Application Insights JavaScript SDK Samplesvoor voorbeelden die kunnen worden uitgevoerd.

Upgraden van de oude versie van Application Insights

Belangrijke wijzigingen in de SDK V2-versie:

  • Voor betere API-handtekeningen zijn sommige API-aanroepen, zoals trackPageView en trackException, bijgewerkt. Uitvoeren in Internet Explorer 8 en eerdere versies van de browser wordt niet ondersteund.
  • De envelop met telemetriegegevens bevat veldnaam- en structuurwijzigingen vanwege gegevensschema-updates.
  • Verplaatst context.operation naar context.telemetryTrace . Sommige velden zijn ook gewijzigd ( operation.id --> telemetryTrace.traceID ).
    • Als u de huidige paginaweergave-id handmatig wilt vernieuwen (bijvoorbeeld in spa-apps), gebruikt u appInsights.properties.context.telemetryTrace.traceID = Microsoft.ApplicationInsights.Telemetry.Util.generateW3CId() .

      Notitie

      Als u de traceer-id uniek wilt houden, waarbij u eerder hebt Util.newId() gebruikt, gebruikt u nu Util.generateW3CId() . Uiteindelijk zijn beide de bewerkings-id.

Als u de huidige Application Insights PRODUCTION SDK (1.0.20) gebruikt en wilt zien of de nieuwe SDK in runtime werkt, werkt u de URL bij, afhankelijk van uw huidige SDK-laadscenario.

  • Downloaden via CDN scenario: werk het codefragment bij dat u momenteel gebruikt om naar de volgende URL te wijzen:

    "https://js.monitor.azure.com/scripts/b/ai.2.min.js"
    
  • npm-scenario: roep aan om het volledige ApplicationInsights-script te downloaden van downloadAndSetup CDN initialiseren met instrumentatiesleutel:

    appInsights.downloadAndSetup({
       instrumentationKey: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx",
       url: "https://js.monitor.azure.com/scripts/b/ai.2.min.jss"
       });
    

Test in de interne omgeving om te controleren of de bewakings-telemetrie naar verwachting werkt. Als alles werkt, werkt u uw API-handtekeningen op de juiste manier bij naar de SDK V2-versie en implementeert u deze in uw productieomgevingen.

SDK-prestaties/overhead

Met slechts 36 kB gezipped en slechts ongeveer 15 ms gebruikt om te initialiseren, voegt Application Insights een verwaarloosbare hoeveelheid laadtijd toe aan uw website. Met behulp van het fragment worden minimale onderdelen van de bibliotheek snel geladen. In de tussentijd wordt het volledige script op de achtergrond gedownload.

Terwijl het script wordt gedownload van de CDN, wordt alle tracering van uw pagina in de wachtrij geplaatst. Zodra het gedownloade script asynchroon is initialiseren, worden alle gebeurtenissen bijgeslagen die in de wachtrij zijn geplaatst. Als gevolg hiervan verliest u geen telemetrie tijdens de hele levenscyclus van uw pagina. Dit installatieproces biedt uw pagina een naadloos analysesysteem, onzichtbaar voor uw gebruikers.

Samenvatting:

  • npm-versie
  • gecomprimeerde gzip-grootte
  • Totale initialisatietijd van 15 ms
  • Geen tracering gemist tijdens levenscyclus van pagina

Browserondersteuning

Chrome Firefox IE Opera Safari
Meest recente ✔ Meest recente ✔ Firefox IE 9+ & Edge ✔
IE 8- Compatibel
Meest recente ✔ Meest recente ✔

Compatibiliteit met ES3/IE8

Als SDK zijn er talloze gebruikers die geen controle hebben over de browsers die hun klanten gebruiken. Daarom moeten we ervoor zorgen dat deze SDK blijft werken en de JS-uitvoering niet verbreekt wanneer deze wordt geladen door een oudere browser. Hoewel het ideaal is om IE8- en oudere generatiebrowsers (ES3) niet te ondersteunen, zijn er talloze grote klanten/gebruikers die pagina's nog steeds verplicht stellen om te 'werken' en zoals vermeld, kunnen ze al dan niet bepalen welke browser hun eindgebruikers willen gebruiken.

Dit betekent NIET dat we alleen de laagste algemene set functies ondersteunen, alleen dat we ES3-codecompatibiliteit moeten behouden en bij het toevoegen van nieuwe functies moeten ze worden toegevoegd op een manier die het parseren van ES3 JavaScript niet verbreekt en als een optionele functie wordt toegevoegd.

Zie GitHub voor meer informatie over IE8-ondersteuning

Opensource-SDK

De Application Insights JavaScript SDK is opensource om de broncode weer te geven of om bij te dragen aan het project. Ga naar de officiële GitHub opslagplaats.

Raadpleeg de opmerkingen bij de release voor de meest recente updates en oplossingen voor fouten.

Volgende stappen