Application Insights voor webpagina's

Notitie

We blijven de levensvatbaarheid van OpenTelemetry voor browserscenario's evalueren. We raden de Application Insights JavaScript SDK aan voor de toekomst. Het is volledig compatibel met opentelemetrie gedistribueerde tracering.

Meer informatie over de prestaties en het gebruik van uw webpagina of app. Als u Application Insights aan uw paginascript toevoegt, krijgt u tijdsinstellingen voor het laden van pagina's en AJAX-aanroepen, aantallen en details van browseruitzonderingen en AJAX-fouten. U krijgt ook het aantal gebruikers en sessies. Al deze telemetrie kan 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. Door traceringsoproepen in uw JavaScript-code in te voegen, kunt u bijhouden hoe de verschillende functies van uw webpaginatoepassing worden gebruikt.

Application Insights kan worden gebruikt met elke webpagina door een kort stukje JavaScript toe te voegen. Node.js heeft een zelfstandige SDK. Als uw webservice Java of ASP.NET is, kunt u de SDK's aan de serverzijde gebruiken met de JavaScript SDK aan de clientzijde om end-to-end inzicht te krijgen in de prestaties van uw app.

De JavaScript-SDK toevoegen

  1. Eerst hebt u een Application Insights-resource nodig. Als u nog geen resource hebt en connection string, volgt u de instructies om een nieuwe resource te maken.
  2. Kopieer de connection string voor de resource waarnaar u de JavaScript-telemetrie wilt verzenden (uit stap 1). U voegt deze toe aan de connectionString instelling van de Application Insights JavaScript SDK.
  3. Voeg de Application Insights JavaScript SDK toe aan uw webpagina of app via een van de volgende twee opties:

Waarschuwing

@microsoft/applicationinsights-web-basic - AISKULight biedt geen ondersteuning voor het gebruik van verbindingsreeksen.

Gebruik slechts één methode om de JavaScript SDK toe te voegen aan uw toepassing. Als u de npm-installatie gebruikt, moet u het codefragment niet gebruiken en omgekeerd.

Notitie

De npm-installatie installeert de JavaScript SDK als een afhankelijkheid van uw project en schakelt IntelliSense in. Het codefragment haalt de SDK op tijdens runtime. Beide ondersteunen dezelfde functies. Ontwikkelaars die meer aangepaste gebeurtenissen en configuratie willen, kiezen over het algemeen voor de npm-installatie. Gebruikers die op zoek zijn naar een snelle inschakeling van out-of-the-box web analytics, kiezen voor het codefragment.

Installatie op basis van npm

Installeren via npm.

npm i --save @microsoft/applicationinsights-web

Notitie

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

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

const appInsights = new ApplicationInsights({ config: {
  connectionString: 'Copy connection string from Application Insights Resource Overview'
  /* ...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 npm gebruikt, kunt u uw webpagina's rechtstreeks instrumenteren met Application Insights door dit fragment boven aan elk van uw pagina's te plakken. Dit moet bij voorkeur het eerste script in uw <head> sectie zijn. Op die manier kan het potentiële problemen met al uw afhankelijkheden en optioneel eventuele JavaScript-fouten bewaken. Als u de Blazor Server-app gebruikt, voegt u het fragment boven aan het bestand _Host.cshtml toe in de <head> sectie.

Vanaf versie 2.5.5 bevat de paginaweergavegebeurtenis de nieuwe tag 'ai.internal.snippet' die de geïdentificeerde codeversie bevat. Deze functie helpt bij het bijhouden van welke versie van het codefragment uw toepassing gebruikt.

Het huidige codefragment dat volgt, is versie 5. De versie wordt in het codefragment gecodeerd als sv:"#". De huidige versie is ook beschikbaar op GitHub.

<script type="text/javascript">
!function(T,l,y){var S=T.location,k="script",D="connectionString",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"}(),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
    connectionString: "Copy connection string from Application Insights Resource Overview"
    /* ...Other Configuration Options... */
}});
</script>

Notitie

Voor de leesbaarheid en om mogelijke JavaScript-fouten te beperken, worden alle mogelijke configuratieopties vermeld op een nieuwe regel in de voorgaande codefragmenten. Als u de waarde van een regel met opmerkingen niet wilt wijzigen, kan deze worden verwijderd.

Fouten bij het laden van scripts rapporteren

Deze versie van het fragment detecteert en rapporteert fouten wanneer de SDK wordt geladen vanuit het CDN als een uitzondering in de Azure Monitor-portal (onder de browser uitzonderingen voor fouten >> ). De uitzondering biedt inzicht in fouten van dit type, zodat u weet dat uw toepassing geen telemetrie (of andere uitzonderingen) rapporteert zoals verwacht. Dit signaal is een belangrijke meting om te begrijpen dat u telemetrie verloren bent gegaan omdat de SDK niet is geladen of geïnitialiseerd, wat kan leiden tot:

  • Underreporting van hoe gebruikers uw site gebruiken of proberen te gebruiken.
  • Er ontbreekt telemetrie over hoe uw gebruikers uw site gebruiken.
  • Ontbrekende JavaScript-fouten die mogelijk het gebruik van uw site door uw gebruikers blokkeren.

Zie de pagina Problemen met SDK-laadfouten oplossen voor informatie over deze uitzondering.

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

Rapportage van SDK-laadfouten wordt niet ondersteund in Internet Explorer 8 of eerder. Dit gedrag vermindert de verkleinde grootte van het fragment door ervan uit te gaan dat de meeste omgevingen niet uitsluitend Internet Explorer 8 of minder zijn. Als u deze vereiste hebt en u deze uitzonderingen wilt ontvangen, moet u een poly-opvulling voor ophalen opnemen of uw eigen fragmentversie maken die gebruikmaakt XDomainRequest van in plaats van XMLHttpRequest. Gebruik de opgegeven broncode voor het codefragment als uitgangspunt.

Notitie

Als u een eerdere versie van het fragment gebruikt, werkt u bij naar de nieuwste versie, zodat u deze eerder niet-gerapporteerde problemen ontvangt.

Configuratieopties voor fragmenten

Alle configuratieopties zijn naar het einde van het script verplaatst. Met deze plaatsing voorkomt u dat er per ongeluk JavaScript-fouten worden weergegeven die er niet alleen voor zorgen dat de SDK niet kan worden geladen, maar ook dat de rapportage van de fout wordt uitgeschakeld.

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 worden weergegeven in deze tabel.

Naam Type Description
src tekenreeks [vereist] De volledige URL voor het laden van de SDK. Deze waarde wordt gebruikt voor het kenmerk 'src' van een dynamisch toegevoegde <script/> tag. U kunt de openbare CDN-locatie of uw eigen privé-gehoste locatie gebruiken.
naam tekenreeks [optioneel] De algemene naam voor de geïnitialiseerde SDK is standaard ingesteld op appInsights. Dit window.appInsights is een verwijzing naar het geïnitialiseerde exemplaar. Als u een naamwaarde opgeeft of een eerder exemplaar lijkt te zijn toegewezen (via de globale naam appInsightsSDK), wordt deze naamwaarde ook gedefinieerd in de globale naamruimte als window.appInsightsSDK=<name value>. De SDK-initialisatiecode gebruikt deze verwijzing om ervoor te zorgen dat het codefragment en de juiste proxymethoden worden geïnitialiseerd en bijgewerkt.
Ld getal in ms [optioneel] Definieert de laadvertraging die moet worden gewacht voordat de SDK wordt geladen. De standaardwaarde is 0 ms. Elke negatieve waarde voegt onmiddellijk een scripttag toe aan het <hoofdgebied> van de pagina. De gebeurtenis voor het laden van de pagina wordt vervolgens geblokkeerd totdat het script wordt geladen of mislukt.
useXhr Booleaanse waarde [optioneel] Deze instelling wordt alleen gebruikt voor het melden van SDK-laadfouten. Rapportage probeert eerst fetch() te gebruiken, indien beschikbaar, en valt vervolgens terug op XHR. Als u deze waarde instelt op true, wordt de ophaalcontrole overgeslagen. Het 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. Wanneer dit niet is gedefinieerd (de standaardinstelling), wordt er geen crossOrigin-kenmerk toegevoegd. Aanbevolen waarden zijn niet gedefinieerd (de standaardwaarde); ""; of 'anoniem'. Zie HTML-kenmerk: crossorigin documentatie voor alle geldige waarden.
configuratie object [vereist] De configuratie die tijdens de initialisatie is doorgegeven aan de Application Insights-SDK.

Installatie van verbindingsreeks

Notitie

Op 31 maart 2025 eindigt de ondersteuning voor opname van instrumentatiesleutels. Opname van instrumentatiesleutels blijft werken, maar we bieden geen updates of ondersteuning meer voor de functie. Stap over op verbindingsreeksen om te profiteren van nieuwe mogelijkheden.

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

De Application Insights JavaScript SDK verzamet standaard automatisch veel telemetrie-items die nuttig zijn bij het bepalen van de status van uw toepassing en de onderliggende gebruikerservaring.

Deze telemetrie omvat:

  • Niet-onderschede uitzonderingen in uw app, waaronder informatie over:
    • Stack-tracering.
    • Uitzonderingsdetails en bericht bij de fout.
    • Lijn- en kolomnummer van de fout.
    • URL waar de fout is opgetreden.
  • Aanvragen voor netwerkafhankelijkheid die zijn gedaan door uw app XHR en ophalen (ophalen van verzameling is standaard uitgeschakeld) bevatten informatie over:
    • URL van afhankelijkheidsbron.
    • Opdracht en methode die worden gebruikt om de afhankelijkheid op te vragen.
    • Duur van de aanvraag.
    • Resultaatcode en geslaagde status van de aanvraag.
    • Id (indien aanwezig) van de gebruiker die de aanvraag indient.
    • Correlatiecontext (indien aanwezig) waar de aanvraag wordt gedaan.
  • Gebruikersgegevens (bijvoorbeeld locatie, netwerk, IP)
  • Apparaatgegevens (bijvoorbeeld browser, besturingssysteem, versie, taal, model)
  • Sessiegegevens

Telemetrie-initialisatiefuncties

Telemetrie-initialisatiefuncties worden gebruikt om de inhoud van verzamelde telemetrie te wijzigen voordat ze vanuit de browser van de gebruiker worden verzonden. Ze kunnen ook worden gebruikt om te voorkomen dat bepaalde telemetriegegevens worden verzonden door te retourneren false. Er kunnen meerdere telemetrie-initialisatiefuncties worden toegevoegd aan uw Application Insights-exemplaar. Ze worden uitgevoerd in de volgorde waarin ze worden toegevoegd.

Het invoerargument voor addTelemetryInitializer is een callback die een ITelemetryItem als argument gebruikt en of voidretourneertboolean. Als false wordt geretourneerd, wordt het telemetrie-item niet verzonden of gaat het naar de volgende telemetrie-initialisatiefunctie, indien van toepassing, of wordt het verzonden naar het eindpunt van de telemetrieverzameling.

Een voorbeeld van het gebruik van telemetrie-initialisatiefuncties:

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 hebben een naam, zodat ze standaard kunnen worden ingesteld op false. Alle velden zijn optioneel, met uitzondering van connectionString.

Naam Beschrijving Standaard
connectionString Vereist
Verbindingsreeks die u hebt verkregen van de Azure Portal.
tekenreeks
null
accountId Een optionele account-id als uw app gebruikers in accounts groepeert. Geen spaties, komma's, puntkomma's, gelijktekens of verticale balken. tekenreeks
null
sessionRenewalMs Een sessie wordt geregistreerd als de gebruiker gedurende deze tijd in milliseconden inactief is. numeriek
1800000
(30 minuten)
sessionExpirationMs Een sessie wordt geregistreerd als deze gedurende deze tijd in milliseconden is voortgezet. 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 het duurt om telemetrie in batches te verzenden (milliseconden). numeriek
15.000
disableExceptionTracking Als dit waar is, worden uitzonderingen niet automatisch opgehaald. booleaans
onjuist
disableTelemetry Als dit waar is, wordt er geen telemetrie verzameld of verzonden. booleaans
onjuist
enableDebug Als dit waar is, worden interne foutopsporingsgegevens gegenereerd als een uitzondering in plaats van te worden geregistreerd, ongeacht de instellingen voor SDK-logboekregistratie. De standaardinstelling is onwaar.
Opmerking: Als u deze instelling inschakelt, wordt de telemetrie verwijderd wanneer er een interne fout optreedt. Deze instelling kan handig zijn voor het snel identificeren van problemen met uw configuratie of gebruik van de SDK. Als u geen telemetrie wilt verliezen tijdens het opsporen van fouten, kunt u overwegen of te gebruiken loggingLevelConsole in plaats van enableDebug.loggingLevelTelemetry
booleaans
onjuist
loggingLevelConsole Registreert interne Application Insights-fouten naar de console.
0: uit,
1: alleen kritieke fouten,
2: Alles (foutenwaarschuwingen & )
numeriek
0
loggingLevelTelemetry Verzendt interne Application Insights-fouten als telemetrie.
0: uit,
1: alleen kritieke fouten,
2: Alles (foutenwaarschuwingen & )
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 optie in als u uw gegevenslimiet voor grootschalige toepassingen wilt behouden. numeriek
100
autoTrackPageVisitTime Indien waar, wordt in een paginaweergave de weergavetijd van de vorige geïnstrueerde pagina bijgehouden en verzonden als telemetrie en wordt er een nieuwe timer gestart voor de huidige paginaweergave. Het wordt verzonden als een aangepaste metrische waarde met de naam PageVisitTime in milliseconds en wordt berekend via de functie Date now() (indien beschikbaar) en valt terug op (nieuwe Datum()). getTime() als now() niet beschikbaar is (Internet Explorer 8 of minder). De standaardinstelling is onwaar. booleaans
onjuist
disableAjaxTracking Als dit waar is, worden Ajax-oproepen niet automatisch opgehaald. booleaans
onjuist
disableFetchTracking Als aanvragen waar zijn, worden aanvragen niet automatisch opgehaald. booleaans
onjuist
overridePageViewDuration Als dit waar is, wordt het standaardgedrag van trackPageView gewijzigd om het interval voor de duur van het einde van de paginaweergave vast te leggen wanneer trackPageView wordt aangeroepen. Als false en er geen aangepaste duur is opgegeven voor trackPageView, worden de prestaties van de paginaweergave berekend met behulp van de API voor navigatietiming. booleaans
maxAjaxCallsPerView Standaard 500 bepaalt hoeveel Ajax-aanroepen per paginaweergave worden bewaakt. Stel in op -1 om alle (onbeperkte) Ajax-aanroepen op de pagina te bewaken. numeriek
500
disableDataLossAnalysis Als dit onwaar is, worden interne buffers voor telemetrie-afzenders bij het opstarten gecontroleerd op items die nog niet zijn verzonden. booleaans
true
disableCorrelationHeaders Indien onwaar, voegt de SDK twee headers (Request-Id en Request-Context) toe aan alle afhankelijkheidsaanvragen om deze te correleren met overeenkomende aanvragen aan de serverzijde. booleaans
onjuist
correlationHeaderExcludedDomains Schakel correlatieheaders uit voor specifieke domeinen. tekenreeks[]
Ongedefinieerde
correlationHeaderExcludePatterns Schakel correlatieheaders uit met behulp van reguliere expressies. regex[]
Ongedefinieerde
correlationHeaderDomains Schakel correlatieheaders in voor specifieke domeinen. tekenreeks[]
Ongedefinieerde
disableFlushOnBeforeUnload Als dit waar is, wordt de flush-methode niet aangeroepen wanneer onBeforeUnload de gebeurtenis wordt geactiveerd. booleaans
onjuist
enableSessionStorageBuffer Indien waar, wordt de buffer met alle niet-verzonden telemetrie opgeslagen in sessieopslag. De buffer wordt hersteld bij het laden van de pagina. booleaans
true
cookieCfg Cookiegebruik is standaard ingeschakeld. Zie ICookieCfgConfig-instellingen voor volledige standaardinstellingen. ICookieCfgConfig
(Sinds 2.6.0)
Ongedefinieerde
isCookieUseDisabled
disableCookiesUsage
Als dit waar is, slaat de SDK geen gegevens van cookies op of leest deze niet. Hiermee worden de gebruikers- en sessiecookies uitgeschakeld en worden de gebruiksvensters en -ervaringen nutteloos weergegeven. isCookieUseDisable is afgeschaft ten gunste van disableCookiesUsage. Wanneer beide zijn opgegeven, disableCookiesUsage heeft deze voorrang.
(Sinds v2.6.0) En als cookieCfg.enabled deze ook is gedefinieerd, heeft deze voorrang op deze waarden. Cookiegebruik kan na initialisatie opnieuw worden ingeschakeld via core.getCookieMgr().setEnabled(true).
Alias voor cookieCfg.enabled
onjuist
cookieDomain Aangepast cookiedomein. Deze optie is handig als u Application Insights-cookies wilt delen tussen subdomeinen.
(Sinds v2.6.0) Als cookieCfg.domain is gedefinieerd, heeft deze voorrang op deze waarde.
Alias voor cookieCfg.domain
null
cookiePath Aangepast cookiepad. Deze optie is handig als u Application Insights-cookies achter een toepassingsgateway wilt delen.
Als cookieCfg.path is gedefinieerd, heeft deze voorrang op deze waarde.
Alias voor cookieCfg.path
(Sinds 2.6.0)
null
isRetryDisabled Indien onwaar, probeert u het opnieuw 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 Als dit waar is, worden met de SDK geen gegevens opgeslagen of gelezen uit lokale opslag en sessieopslag. booleaans
onjuist
isBeaconApiDisabled Indien onwaar, verzendt de SDK alle telemetriegegevens met behulp van de Beacon-API. booleaans
true
onunloadDisableBeacon Wanneer het tabblad is gesloten, verzendt de SDK alle resterende telemetriegegevens met behulp van de Beacon-API. booleaans
onjuist
sdkExtension Hiermee stelt u de naam van de SDK-extensie in. Alleen alfabetische tekens zijn toegestaan. De extensienaam wordt toegevoegd als voorvoegsel aan de ai.internal.sdkVersion tag (bijvoorbeeld ext_javascript:2.0.0). tekenreeks
null
isBrowserLinkTrackingEnabled Als dit waar is, houdt de SDK alle aanvragen voor browserkoppelingen bij. booleaans
onjuist
appId AppId wordt gebruikt voor de correlatie tussen AJAX-afhankelijkheden die plaatsvinden aan de clientzijde met aanvragen aan de serverzijde. Wanneer de Beacon-API is ingeschakeld, kan deze niet automatisch worden gebruikt, maar kan deze handmatig worden ingesteld in de configuratie. tekenreeks
null
enableCorsCorrelation 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 naampost voor localStorage en cookienaam. tekenreeks
Ongedefinieerde
enableAutoRouteTracking Automatisch routewijzigingen bijhouden in toepassingen met één pagina. Als dit waar is, wordt bij elke routewijziging een nieuwe paginaweergave naar Application Insights verzonden. Hashroutewijzigingen (example.com/foo#bar) worden ook vastgelegd als nieuwe paginaweergaven. booleaans
onjuist
enableRequestHeaderTracking Indien waar, worden AJAX- en Fetch-aanvraagheaders bijgehouden. booleaans
onjuist
enableResponseHeaderTracking Als dit waar is, worden de antwoordheaders AJAX- en Fetch-aanvragen bijgehouden. booleaans
onjuist
distributedTracingMode Hiermee stelt u de gedistribueerde traceringsmodus in. Als AI_AND_W3C modus of W3C-modus is ingesteld, worden W3C-traceringscontextheaders (traceparent/tracestate) gegenereerd en opgenomen in alle uitgaande aanvragen. AI_AND_W3C wordt geboden voor achterwaartse compatibiliteit met alle verouderde, door Application Insights geïnstrueerde services. Zie voorbeelden op deze website. DistributedTracingModesOf
numeriek
(Sinds v2.6.0) DistributedTracingModes.AI_AND_W3C
(v2.5.11 of eerder) DistributedTracingModes.AI
enableAjaxErrorStatusText Als dit waar is, neemt u de tekst van de antwoordfout op in de afhankelijkheidsgebeurtenis van mislukte AJAX-aanvragen. booleaans
onjuist
enableAjaxPerfTracking Vlag om het opzoeken en opnemen van meer tijdsinstellingen voor browser window.performance in de gerapporteerde ajax metrische gegevens (XHR en ophalen) in te schakelen. booleaans
onjuist
maxAjaxPerfLookupAttempts Het maximum aantal keren dat naar de tijdsinstellingen voor window.performance moet worden gezocht, indien beschikbaar. Deze optie is soms vereist omdat niet alle browsers window.performance vullen voordat het einde van de XHR-aanvraag wordt gerapporteerd. Voor het ophalen van aanvragen wordt dit toegevoegd nadat deze is voltooid. numeriek
3
ajaxPerfLookupDelay De hoeveelheid tijd die moet worden gewacht voordat opnieuw wordt uitgevoerd om de tijdsinstellingen voor window.performance voor een ajax aanvraag te vinden. De tijd is in milliseconden en wordt rechtstreeks doorgegeven aan setTimeout(). numeriek
25 ms
enableUnhandledPromiseRejectionTracking Indien waar, worden onverwerkte afwijzingen van beloftes automatisch opgehaald en gerapporteerd als een JavaScript-fout. Wanneer disableExceptionTracking waar is (geen uitzonderingen bijhouden), wordt de configuratiewaarde genegeerd en worden onverwerkte afwijzingen van beloftes niet gerapporteerd. booleaans
onjuist
enablePerfMgr Als deze optie is ingeschakeld (true), worden hiermee lokale perfEvents gemaakt voor code die is geïnstrueerd om perfEvents te verzenden (via de helper doPerf(). Deze optie kan worden gebruikt om prestatieproblemen binnen de SDK te identificeren op basis van uw gebruik of optioneel binnen uw eigen geïnstrueerde code. Meer informatie vindt u in de basisdocumentatie. Sinds v2.5.7 booleaans
onjuist
perfEvtsSendAll Wanneer enablePerfMgr is ingeschakeld en de IPerfManager een INotificationManager.perfEvent() activeert, bepaalt deze vlag of een gebeurtenis wordt geactiveerd (en verzonden naar alle listeners) voor alle gebeurtenissen (true) of alleen voor bovenliggende gebeurtenissen (standaard> onwaar<).
Een bovenliggende IPerfEvent is een gebeurtenis waarbij er nog 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 De standaardlengte die wordt gebruikt voor het genereren van nieuwe waarden voor willekeurige sessies en gebruikers-id's. De standaardwaarde is 22. De vorige standaardwaarde was 5 (v2.5.8 of minder). Als u de vorige maximumlengte wilt behouden, moet u deze waarde instellen op 5. numeriek
22

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

Indien uitgeschakeld tijdens de initialisatie via de disableCookiesUsage configuraties of cookieCfg.enabled , kunt u nu opnieuw inschakelen via de functie ICookieMgrsetEnabled .

Het op exemplaren gebaseerde cookiebeheer vervangt ook de vorige globale CoreUtils-functies van disableCookies(), getCookie(...)setCookie(...)en deleteCookie(...). Als u wilt 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 exemplaar gebaseerd cookiebeheer toegevoegd in versie 2.6.0.

Naam Beschrijving Type en standaard
enabled Een booleaanse waarde die aangeeft of het gebruik van cookies door de SDK wordt ingeschakeld door het huidige exemplaar. Indien onwaar, slaat het exemplaar van de SDK die door deze configuratie is geïnitialiseerd, geen gegevens op of leest deze niet uit cookies. booleaans
true
domein Aangepast cookiedomein, wat handig is als u Application Insights-cookies wilt delen tussen subdomeinen. Als deze niet is opgegeven, wordt de waarde uit de hoofdwaarde cookieDomain gebruikt. tekenreeks
null
leertraject Hiermee geeft u het pad te gebruiken voor de cookie. Als deze niet wordt opgegeven, wordt een waarde uit de hoofdwaarde cookiePath gebruikt. tekenreeks
/
getCookie Functie om de benoemde cookiewaarde op te halen. Indien niet opgegeven, wordt de interne cookie parsing/caching gebruikt. (name: string) => string
null
setCookie Functie voor het instellen van de benoemde cookie met de opgegeven waarde. Alleen 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. Indien niet opgegeven, wordt de interne cookie parsing/caching gebruikt. (name: string, value: string) => void
null

Bijhouden van tijd op pagina inschakelen

Door in te stellen autoTrackPageVisitTime: true, wordt de tijd in milliseconden bijgehouden die een gebruiker op elke pagina besteedt. In elke nieuwe paginaweergave wordt de duur die de gebruiker op de vorige pagina heeft doorgebracht, verzonden als een aangepaste metrische waarde met de naam PageVisitTime. Deze aangepaste metrische waarde kan in de Metrics Explorer worden weergegeven als een op logboeken gebaseerd metrisch gegeven.

Gedistribueerde tracering inschakelen

Correlatie genereert en verzendt gegevens die gedistribueerde tracering mogelijk maken en de toepassingstoewijzing, end-to-end transactieweergave en andere diagnostische hulpprogramma's mogelijk maken.

In JavaScript is correlatie standaard uitgeschakeld om de telemetrie te minimaliseren die standaard wordt verzonden. In de volgende voorbeelden ziet u standaardconfiguratieopties voor het inschakelen van correlatie.

De volgende voorbeeldcode toont de configuraties die nodig zijn om correlatie in te schakelen.

// 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"
    connectionString: "Copy connection string from Application Insights Resource Overview"
    enableCorsCorrelation: true,
    enableRequestHeaderTracking: true,
    enableResponseHeaderTracking: true,
    correlationHeaderExcludedDomains: ['*.queue.core.windows.net']
    /* ...Other Configuration Options... */
}});
</script>

Notitie

Er zijn twee gedistribueerde traceringsmodi/-protocollen: AI (klassiek) en W3C TraceContext (nieuw). In versie 2.6.0 en hoger zijn beide standaard ingeschakeld. Voor oudere versies moeten gebruikers zich expliciet aanmelden voor de W3C-modus.

Routetracking

Standaard verwerkt deze SDK geen op statussen gebaseerde route die plaatsvindt in toepassingen met één pagina. Als u het automatisch bijhouden van routewijziging wilt inschakelen voor uw toepassing met één pagina, kunt u toevoegen enableAutoRouteTracking: true aan uw configuratieconfiguratie.

Toepassingen met één pagina

Voor toepassingen met één pagina raadpleegt u de documentatie voor invoegtoepassingen voor specifieke richtlijnen voor invoegtoepassingen.

Invoegtoepassingen
React
React Native
Angular
Klik op Analyse automatisch verzamelen

Geavanceerde correlatie

Wanneer een pagina voor het eerst wordt geladen en de SDK niet volledig is geïnitialiseerd, kan de bewerkings-id voor de eerste aanvraag niet worden gegenereerd. Als gevolg hiervan is gedistribueerde tracering onvolledig totdat de SDK volledig is geïnitialiseerd. U kunt dit probleem oplossen door dynamisch JavaScript op te nemen op de geretourneerde HTML-pagina. De SDK gebruikt een callback-functie tijdens de initialisatie om de bewerkings-id met terugwerkende kracht op te halen uit de serverside en de clientside ermee te vullen.

Hier volgt een voorbeeld van het maken van een dynamisch JavaScript met behulp van Razor.

<script>
!function(T,l,y){<removed snippet code>,{
    src: "https://js.monitor.azure.com/scripts/b/ai.2.min.js", // The SDK URL Source
    onInit: function(appInsights) {
        var serverId = "@this.Context.GetRequestTelemetry().Context.Operation.Id";
        appInsights.context.telemetryTrace.parentID = serverId;
    },
    cfg: { // Application Insights Configuration
        instrumentationKey: "YOUR_INSTRUMENTATION_KEY_GOES_HERE"
    }});
</script>

Waarschuwing

De toepassings-UX is nog niet geoptimaliseerd om deze geavanceerde scenario's voor gedistribueerde tracering van de eerste hop weer te geven. De gegevens zijn beschikbaar in de aanvraagtabel voor query's en diagnostische gegevens.

Extensies

Extensies
React
React Native
Angular
Klik op Analyse automatisch verzamelen

Gegevens aan de browser/clientzijde verkennen

Gegevens aan de browser-/clientzijde 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 bekijken vanuit de JavaScript SDK via de browserervaring in de portal.

Selecteer Browser en selecteer vervolgens Fouten of Prestaties.

Schermopname van de pagina Browser in Application Insights waarin wordt getoond hoe u browserfouten of browserprestaties toevoegt aan de metrische gegevens die u voor uw webtoepassing kunt weergeven.

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 gegevens over afhankelijkheid 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). Als u een where instructie van client_Type == "Browser"toevoegt, ziet u alleen gegevens van de JavaScript-SDK. Alle telemetriegegevens aan de serverzijde die door andere SDK's worden verzameld, worden 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 brontoewijzing

De verkleinde callstack van uw uitzonderingstelemetrie kan worden verkleind in de Azure Portal. Alle bestaande integraties in het deelvenster Uitzonderingsdetails werken met de zojuist niet-verkleinde aanroepstack.

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

Slepen en neerzetten

  1. Selecteer een uitzonderingstelemetrie-item in de Azure Portal om de 'end-to-end transactiedetails' weer te geven.

  2. Bepaal welke brontoewijzingen overeenkomen met deze aanroepstack. De brontoewijzing moet overeenkomen met het bronbestand van een stackframe, maar moet het achtervoegsel hebben met .map.

  3. Sleep de brontoewijzingen naar de aanroepstack in de Azure Portal.

    Een geanimeerde afbeelding die laat zien hoe u brontoewijzingsbestanden van een buildmap naar het venster Aanroepstack in de Azure Portal.

Application Insights web basic

Voor een lichte ervaring kunt u in plaats daarvan de basisversie van Application Insights installeren:

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 wens op te bouwen. Het voert bijvoorbeeld geen autocollection uit, zoals onopvallende uitzonderingen en AJAX. De API's voor het verzenden van bepaalde telemetrietypen, zoals trackTrace en trackException, zijn niet opgenomen in deze versie. Daarom moet u uw eigen wrapper opgeven. De enige API die beschikbaar is, is track. Hier vindt u een voorbeeld .

Voorbeelden

Zie Application Insights JavaScript SDK-voorbeelden voor uitvoerbare voorbeelden.

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. Uitvoering in Internet Explorer 8 en eerdere versies van de browser wordt niet ondersteund.

  • De telemetrieenvelop heeft veldnamen en -structuurwijzigingen als gevolg van updates van het gegevensschema.

  • 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 toepassingen met één pagina, gebruikt appInsights.properties.context.telemetryTrace.traceID = Microsoft.ApplicationInsights.Telemetry.Util.generateW3CId()u .

    Notitie

    Als u de tracerings-id uniek wilt houden, waar u eerder hebt gebruikt Util.newId(), gebruikt Util.generateW3CId()u nu . 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 scenario voor het laden van de SDK.

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

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

    appInsights.downloadAndSetup({
       connectionString: "Copy connection string from Application Insights Resource Overview",
       url: "https://js.monitor.azure.com/scripts/b/ai.2.min.jss"
       });
    

Test in een interne omgeving om te controleren of de bewakingstelemetrie werkt zoals verwacht. Als alles werkt, werkt u uw API-handtekeningen op de juiste manier bij naar SDK v2 en implementeert u deze in uw productieomgevingen.

SDK-prestaties/overhead

Met slechts 36 kB gzipped en het duurt slechts ~15 ms om te initialiseren, voegt Application Insights een verwaarloosbare hoeveelheid laadtijd toe aan uw website. Minimale onderdelen van de bibliotheek worden snel geladen wanneer u dit fragment gebruikt. Ondertussen wordt het volledige script op de achtergrond gedownload.

Terwijl het script wordt gedownload van het CDN, wordt alle tracering van uw pagina in de wachtrij geplaatst. Nadat het gedownloade script asynchroon is geïnitieerd, worden alle gebeurtenissen in de wachtrij bijgehouden. Als gevolg hiervan verliest u geen telemetrie tijdens de hele levenscyclus van uw pagina. Dit installatieproces biedt uw pagina een naadloos analysesysteem dat onzichtbaar is voor uw gebruikers.

Samenvatting:

  • npm-versie
  • Gecomprimeerde gzip-grootte
  • 15 ms algemene initialisatietijd
  • Er is geen tracering gemist tijdens de levenscyclus van de pagina

Browserondersteuning

Chrome Firefox Ie Opera Safari
Chrome Latest ✔ Firefox Latest ✔ IE 9+ & Microsoft Edge ✔
IE 8- compatibel
Nieuwste ✔ opera Nieuwste ✔ safari

Compatibiliteit met ES3/Internet Explorer 8

We moeten ervoor zorgen dat deze SDK blijft 'werken' en de JavaScript-uitvoering niet onderbreekt wanneer deze wordt geladen door een oudere browser. Het zou ideaal zijn om oudere browsers niet te ondersteunen, maar veel grote klanten kunnen niet bepalen welke browser hun gebruikers gebruiken.

Deze instructie betekent niet dat we alleen de laagste algemene set functies ondersteunen. We moeten compatibiliteit met ES3-code behouden. Nieuwe functies moeten worden toegevoegd op een manier die het parseren van ES3 JavaScript niet zou onderbreken en als een optionele functie worden toegevoegd.

Zie GitHub voor meer informatie over ondersteuning voor Internet Explorer 8.

Opensource-SDK

De Application Insights JavaScript SDK is open source. Raadpleeg de officiële GitHub-opslagplaats om de broncode weer te geven of om bij te dragen aan het project.

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

Problemen oplossen

Deze sectie helpt u bij het oplossen van veelvoorkomende problemen.

Ik krijg het foutbericht Kan Request-Context correlatieheader niet ophalen, omdat deze mogelijk niet is opgenomen in het antwoord of niet toegankelijk is

De correlationHeaderExcludedDomains configuratie-eigenschap is een uitsluitingslijst waarmee correlatieheaders voor specifieke domeinen worden uitgeschakeld. Deze optie is handig wanneer het opnemen van deze headers ertoe zou leiden dat de aanvraag mislukt of niet wordt verzonden vanwege de configuratie van de server van derden. Deze eigenschap ondersteunt jokertekens. Een voorbeeld is *.queue.core.windows.net, zoals te zien is in het voorgaande codevoorbeeld. Het toevoegen van het toepassingsdomein aan deze eigenschap moet worden vermeden, omdat hierdoor de SDK de vereiste gedistribueerde tracering Request-Id, Request-Contexten traceparent headers niet als onderdeel van de aanvraag kan opnemen.

Ik weet niet hoe ik mijn serverconfiguratie van derden moet bijwerken

De serverzijde moet verbindingen met die headers kunnen accepteren. Afhankelijk van de Access-Control-Allow-Headers configuratie aan de serverzijde is het vaak nodig om de lijst aan de serverzijde uit te breiden door handmatig , Request-Contexten traceparent (W3C gedistribueerde header) toe te voegenRequest-Id.

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

Ik ontvang dubbele telemetriegegevens van de Application Insights JavaScript SDK

Als de SDK recursief correlatie rapporteert, schakelt u de configuratie-instelling van excludeRequestFromAutoTrackingPatterns in om de dubbele gegevens uit te sluiten. Dit scenario kan optreden wanneer u verbindingsreeksen gebruikt. De syntaxis voor de configuratie-instelling is excludeRequestFromAutoTrackingPatterns: [<endpointUrl>].

Connectiviteit testen tussen uw toepassingshost en de opnameservice

Application Insights SDK's en agents verzenden telemetrie om opgenomen te worden als REST-aanroepen naar onze opname-eindpunten. U kunt de connectiviteit van uw webserver of toepassingshostcomputer met de opnameservice-eindpunten testen met behulp van onbewerkte REST-clients van PowerShell of curl-opdrachten. Zie Problemen met ontbrekende toepassingstelemetrie in Azure Monitor Application Insights oplossen.

Volgende stappen