Application Insights för webbsidor

  • Artikel
  • 22 minuter för att läsa

Visa prestanda och användning för webbsidor eller appar. Om du lägger Application Insights i sidskriptet visas tider för sidinläsare och AJAX-anrop, antal och information om webbläsarundantag och AJAX-fel, samt antal användare och sessioner. Allt detta kan visas efter sida, klientoperativsystem- och webbläsarversion, geografisk plats och andra dimensioner. Du kan ställa in varningar för antal fel eller långsam sidinläsning. Och genom att infoga spårning av anrop i JavaScript-kod kan du spåra hur olika funktioner i ditt webbsideprogram används.

Application Insights kan användas med alla webbsidor – du lägger bara till ett stycke JavaScript-kod. Om din webbtjänst är Java eller ASP.NETkan du använda SDK:erna på serversidan tillsammans med JavaScript SDK för klientsidan för att få en förståelse för appens prestanda.

Lägga till JavaScript SDK

Viktigt

Anslutningssträngar rekommenderas framför instrumentationsnycklar. Nya Azure-regioner kräver användning av anslutningssträngar i stället för instrumentationsnycklar. Anslutningssträngen identifierar den resurs som du vill associera dina telemetridata med. Du kan också ändra de slutpunkter som din resurs ska använda som mål för din telemetri. Du måste kopiera anslutningssträngen och lägga till den i programmets kod eller i en miljövariabel.

  1. Först behöver du en Application Insights resurs. Om du inte redan har en resurs- och instrumenteringsnyckel följer du anvisningarna för att skapa en ny resurs.
  2. Kopiera instrumenteringsnyckeln (kallas även "iKey") eller anslutningssträngen för resursen där du vill att din JavaScript-telemetri ska skickas (från steg 1.) Du lägger till den i instrumentationKey connectionString eller-inställningen för Application Insights JavaScript SDK.
  3. Lägg till Application Insights JavaScript SDK till din webbsida eller app via något av följande två alternativ:

Viktigt

Använd bara en metod för att lägga till JavaScript SDK i ditt program. Om du använder NPM-installationen ska du inte använda kodfragmentet och vice versa.

Anteckning

NPM-installationen installerar JavaScript SDK som ett beroende till ditt projekt och aktiverar IntelliSense, medan kodfragmentet hämtar SDK vid körning. Båda har stöd för samma funktioner. Utvecklare som vill ha fler anpassade händelser och konfigurationer väljer dock vanligtvis NPM-installation, medan användare som vill ha snabb start av webbanalys väljer kodfragmentet.

npm-baserad installation

Installera via NPM.

npm i --save @microsoft/applicationinsights-web

Anteckning

Skrivningar ingår i det här paketet, så du behöver inte installera ett separat skrivpaket.

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

Kodfragmentbaserad konfiguration

Om din app inte använder npm kan du instrumentera dina webbsidor direkt med Application Insights genom att klistra in det här kodfragmentet överst på varje sidor. Det bör helst vara det första skriptet i avsnittet så att det kan övervaka eventuella problem med alla dina beroenden och eventuella <head> JavaScript-fel. Om du använder Blazor Server App lägger du till kodfragmentet överst i _Host.cshtml filen i <head> avsnittet .

Från och med version 2.5.5 innehåller sidvisningshändelsen den nya taggen "ai.internal.snippet" som innehåller den identifierade kodfragmentversionen.

Det aktuella kodfragmentet (anges nedan) är version "5", versionen är kodad i kodfragmentet som sv:"#" och den aktuella versionen är också tillgänglig på 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>

Anteckning

För läsbarhet och för att minska möjliga JavaScript-fel visas alla möjliga konfigurationsalternativ på en ny rad i kodfragmentkoden ovan. Om du inte vill ändra värdet för en kommenterad rad kan du ta bort det.

Inläsningsfel för rapporteringsskript

Den här versionen av kodfragmentet identifierar och rapporterar fel vid inläsning av SDK från CDN som ett undantag till Azure Monitor-portalen (i undantagswebbläsaren för fel) ger det här undantaget insyn i fel av den här typen så att du är medveten om att programmet inte rapporterar telemetri (eller andra undantag) som > > förväntat. Den här signalen är ett viktigt mått för att förstå att du har förlorat telemetri eftersom SDK:n inte har läses in eller initierats, vilket kan leda till:

  • Underrapportering av hur användare använder (eller försöker använda) din webbplats;
  • Telemetri om hur slutanvändarna använder webbplatsen saknas.
  • JavaScript-fel som kan hindra slutanvändarna från att använda webbplatsen saknas.

Mer information om det här undantaget finns på felsökningssidan för SDK-inläsningsfel.

Rapportering av det här felet som ett undantag till portalen använder inte konfigurationsalternativet från Application Insights-konfigurationen och om det här felet inträffar rapporteras det därför alltid av kodfragmentet, även om disableExceptionTracking window.onerror-stödet är inaktiverat.

Rapportering av SDK-inläsningsfel stöds specifikt INTE på IE 8 (eller mindre). Detta hjälper till att minska den minifierade storleken på kodfragmentet genom att anta att de flesta miljöer inte uteslutande är IE 8 eller mindre. Om du har det här kravet och vill ta emot dessa undantag måste du antingen inkludera en hämtnings polyfyllning eller skapa en egen kodfragmentversion som använder i stället för . Vi rekommenderar att du använder den tillhandahållna källkoden för kodfragmentet som XDomainRequest XMLHttpRequest utgångspunkt.

Anteckning

Om du använder en tidigare version av kodfragmentet rekommenderar vi starkt att du uppdaterar till den senaste versionen så att du får dessa tidigare orapporterade problem.

Konfigurationsalternativ för kodfragment

Alla konfigurationsalternativ har nu flyttats mot slutet av skriptet för att undvika att oavsiktligt införa JavaScript-fel som inte bara skulle leda till att SDK inte kan läsas in, utan även inaktivera rapportering av felet.

Varje konfigurationsalternativ visas ovan på en ny rad. Om du inte vill åsidosätta standardvärdet för ett objekt som anges som [valfritt] kan du ta bort den raden för att minimera den resulterande storleken på den returnerade sidan.

De tillgängliga konfigurationsalternativen är

Namn Typ Description
src sträng [krävs] Den fullständiga URL:en för varifrån SDK ska läsas in. Det här värdet används för attributet "src" för ett dynamiskt tillagt < > skript/tagg. Du kan använda den offentliga CDN-platsen eller en egen privat värd.
name sträng [valfritt] Det globala namnet för den initierade SDK:n, som appInsights standard. Så window.appInsights blir en referens till den initierade instansen. Obs! Om du anger ett namnvärde eller om en tidigare instans verkar tilldelas (via det globala namnet appInsightsSDK) definieras även det här namnvärdet i det globala namnområdet som . Detta krävs av SDK-initieringskoden för att säkerställa att det initierar och uppdaterar rätt stomme och proxymetoder för window.appInsightsSDK=<name value> kodfragment.
Ld tal i ms [valfritt] Definierar inläsningsfördröjningen innan sdk:n läses in. Standardvärdet är 0 ms och ett negativt värde lägger omedelbart till en skripttagg till sidans huvudregion, som sedan blockerar sidinläsningshändelsen tills skriptet har lästs in < > (eller misslyckas).
useXhr booleskt [valfritt] Den här inställningen används endast för rapportering av SDK-inläsningsfel. Rapportering försöker först använda fetch() om det är tillgängligt och sedan återställning till XHR. Om värdet är true kringgås bara hämtningskontrollen. Du behöver bara använda det här värdet om programmet används i en miljö där hämtningen inte kan skicka felhändelserna.
crossOrigin sträng [valfritt] Genom att inkludera den här inställningen innehåller skripttaggen som läggs till för att ladda ned SDK:n attributet crossOrigin med det här strängvärdet. När det inte har definierats (standard) läggs inget crossOrigin-attribut till. Rekommenderade värden har inte definierats (standard). ""; eller "anonym" (alla giltiga värden finns i HTML-attribut: crossorigin dokumentation)
Cfg objekt [krävs] Konfigurationen skickades till Application Insights SDK under initieringen.

Konfiguration av anslutningssträng

För konfigurationen av NPM eller kodfragmentet kan du också konfigurera din instans av Application Insights med hjälp av en anslutningssträng. Ersätt bara instrumentationKey fältet med fältet connectionString .

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

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

Skicka telemetri till Azure Portal

Som standard Application Insights JavaScript SDK automatiskt ett antal telemetriobjekt som är användbara för att fastställa hälsotillståndet för ditt program och den underliggande användarupplevelsen. Dessa omfattar:

  • Undantag utan fel i din app, inklusive information om
    • Stackspårning
    • Undantagsinformation och meddelande som medföljer felet
    • Rad & kolumnnummer för fel
    • URL där felet uppstod
  • Begäranden om nätverksberoende som görs av din app XHR och Fetch-begäranden (hämtningssamling är inaktiverad som standard), innehåller information om
    • URL för beroendekälla
    • Kommando & metod som används för att begära beroendet
    • Varaktighet för begäran
    • Resultatkod och status för lyckad begäran
    • ID (om det finns någon) för användaren som gör begäran
    • Korrelationskontext (om sådan finns) där begäran görs
  • Användarinformation (till exempel plats, nätverk, IP)
  • Enhetsinformation (till exempel webbläsare, operativsystem, version, språk, modell)
  • Sessionsinformation

Telemetriinitierare

Telemetriinitierare används för att ändra innehållet i insamlade telemetri innan de skickas från användarens webbläsare. De kan också användas för att förhindra att viss telemetri skickas genom att returnera false . Flera telemetriinitierare kan läggas till Application Insights instansen och de körs för att lägga till dem.

Indataargumentet addTelemetryInitializer till är ett återanrop som tar ITelemetryItem ett som argument och returnerar en boolean eller void . Om du returnerar skickas inte telemetriobjektet, annars fortsätter det till nästa telemetriinitiering, om det finns någon, eller skickas till false telemetrisamlingens slutpunkt.

Ett exempel på hur du använder telemetriinitierare:

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

Konfiguration

De flesta konfigurationsfält namnges så att de kan vara falska som standard. Alla fält är valfria förutom instrumentationKey .

Name Beskrivning Standardvärde
instrumentationKey Obligatoriskt
Instrumenteringsnyckel som du fick från Azure Portal.		 sträng
null
accountId Ett valfritt konto-ID om din app grupperar användare till konton. Inga blanksteg, kommatecken, semikolon, lika med eller lodräta staplar sträng
null
sessionRenewalMs En session loggas om användaren är inaktiv under den här tidsperioden i millisekunder. numeric
1800000
(30 minuter)
sessionExpirationMs En session loggas om den har fortsatt under den här tidsperioden i millisekunder. numeric
86400000
(24 timmar)
maxBatchSizeInBytes Maximal storlek för telemetribatch. Om en batch överskrider den här gränsen skickas den omedelbart och en ny batch startas numeric
10000
maxBatchInterval Hur lång tid batchtelemetri ska skickas innan den skickas (millisekunder) numeric
15 000
inaktivera​ExceptionTracking Om sant används inte undantag automatiskt. boolean
falskt
disableTelemetry Om det är sant samlas inte telemetri in eller skickas. boolean
falskt
enableDebug Om sant, visas interna felsökningsdata som ett undantag i stället för att loggas, oavsett SDK-loggningsinställningar. Standardvärdet är false.
Obs! Om du aktiverar den här inställningen tas telemetrin bort när ett internt fel inträffar. Detta kan vara användbart för att snabbt identifiera problem med din konfiguration eller användning av SDK. Om du inte vill förlora telemetri vid felsökning kan du överväga att använda consoleLoggingLevel eller i stället för telemetryLoggingLevel enableDebug .		 boolean
falskt
loggingLevelConsole Loggar interna Application Insights till konsolen.
0: av,
1: Endast kritiska fel,
2: Allt (fel & varningar)		 numeric
0
loggingLevelTelemetry Skickar interna Application Insights-fel som telemetri.
0: av,
1: Endast kritiska fel,
2: Allt (fel & varningar)		 numeric
1
diagnosticLogInterval (internt) Avsökningsintervall (i ms) för intern loggningskö numeric
10000
samplingPercentage Procentandel händelser som skickas. Standardvärdet är 100, vilket innebär att alla händelser skickas. Ange detta om du vill bevara datataket för storskaliga program. numeric
100
autoTrackPageVisitTime Om det är sant spåras och skickas visningstiden för den föregående instrumenterade sidan i en sidvy som telemetri och en ny timer startas för den aktuella sidvyn. Det skickas som ett anpassat mått med namnet i och beräknas via funktionen PageVisitTime milliseconds Date now() (om tillgängligt) och faller tillbaka till (nytt Date()). getTime() om now() är otillgängligt (IE8 eller mindre). Standardvärdet är false. boolean
falskt
disableAjaxTracking Om sant används inte Ajax-anrop automatiskt. boolean
falskt
disableFetchTracking Om det är sant hämtas inte begäranden automatiskt. boolean
true
overridePageViewDuration Om sant ändras standardbeteendet för trackPageView till att registrera varaktighetsintervallet för sidvisningen när trackPageView anropas. Om false och ingen anpassad varaktighet anges för trackPageView beräknas sidvisningsprestandan med hjälp av API:et för tidsinställning för navigering. boolean
maxAjaxCallsPerView Standard 500 – styr hur många Ajax-anrop som ska övervakas per sidvy. Ange till -1 för att övervaka alla (obegränsade) Ajax-anrop på sidan. numeric
500
disableDataLossAnalysis Om det är falskt kontrolleras interna telemetriavsändarbuffertar vid start för objekt som ännu inte har skickats. boolean
true
inaktivera​CorrelationHeaders Om det är falskt lägger SDK:n till två huvuden (Request-Id och Request-Context) till alla beroendebegäranden för att korrelera dem med motsvarande begäranden på serversidan. boolean
falskt
correlationHeader​ExcludedDomains Inaktivera korrelationsrubriker för specifika domäner string[]
Odefinierad
correlationHeader​ExcludePatterns Inaktivera korrelationsrubriker med reguljära uttryck regex[]
Odefinierad
correlationHeader​Domains Aktivera korrelationsrubriker för specifika domäner string[]
Odefinierad
disableFlush​OnBeforeUnload Om sant anropas inte flush-metoden när onBeforeUnload-händelseutlösare boolean
falskt
enableSessionStorageBuffer Om det är sant lagras bufferten med all oavsiktlig telemetri i sessionslagringen. Bufferten återställs vid sidinläsning boolean
true
cookieCfg Standardinställningen för cookieanvändning aktiverad finns i Inställningar för ICookieCfgConfig för fullständiga standardinställningar. ICookieCfgConfig
(Sedan 2.6.0)
Odefinierad
isCookieUseDisabled
disableCookiesUsage		 Om det är sant kommer SDK inte att lagra eller läsa några data från cookies. Observera att detta inaktiverar cookies för användare och sessioner och gör användningsbladen och upplevelserna oanvändbara. isCookieUseDisable är inaktuell till förmån för disableCookiesUsage, när båda anges disableCookiesUsage har företräde.
(Sedan v2.6.0) Och om också har definierats har det företräde framför dessa värden, cookieanvändningen kan återaktiveras efter initieringen cookieCfg.enabled via core.getCookieMgr().setEnabled(true).		 alias för cookieCfg.enabled
falskt
cookieDomain Anpassad cookiedomän. Detta är användbart om du vill dela Application Insights cookies mellan underdomäner.
(Sedan v2.6.0) Om cookieCfg.domain har definierats har det företräde framför det här värdet.		 alias för cookieCfg.domain
null
cookiePath Anpassad cookiesökväg. Det här är användbart om du vill dela Application Insights cookies bakom en programgateway.
Om cookieCfg.path har definierats har det företräde framför det här värdet.		 alias för cookieCfg.path
(Sedan 2.6.0)
null
isRetryDisabled Om det är falskt försöker du igen på 206 (partiellt lyckat), 408 (tidsgräns), 429 (för många begäranden), 500 (internt serverfel), 503 (tjänsten är inte tillgänglig) och 0 (offline, endast om det upptäcks) boolean
falskt
isStorageUseDisabled Om det är sant lagrar eller läser SDK inte några data från lokal lagring och sessionslagring. boolean
falskt
isBeaconApiDisabled Om det är falskt skickar SDK all telemetri med hjälp av Beacon-API:et boolean
true
onunloadDisableBeacon När fliken är stängd skickar SDK all återstående telemetri med hjälp av Beacon-API:et boolean
falskt
sdkExtension Anger sdk-tilläggets namn. Endast alfabetiska tecken tillåts. Tilläggsnamnet läggs till som ett prefix till taggen "ai.internal.sdkVersion" (till exempel "ext_javascript:2.0.0"). sträng
null
isBrowserLink​TrackingEnabled Om det är sant spårar SDK alla webbläsarlänksbegäranden. boolean
falskt
appId AppId används för korrelationen mellan AJAX-beroenden som sker på klientsidan med begäranden på serversidan. När Beacon-API:et är aktiverat kan det inte användas automatiskt, men det kan anges manuellt i konfigurationen. sträng
null
aktivera​CorsCorrelation Om sant lägger SDK:n till två huvuden (Request-Id och Request-Context) i alla CORS-begäranden för att korrelera utgående AJAX-beroenden med motsvarande begäranden på serversidan. boolean
falskt
namePrefix Ett valfritt värde som ska användas som namn på postfix för localStorage och cookienamn. sträng
Odefinierad
aktivera​AutoRoute​spårning Spåra automatiskt flödesändringar i ensidesprogram (SPA). Om sant, skickar varje vägändring en ny sidvy till Application Insights. Hash-vägändringar ( example.com/foo#bar ) registreras också som nya sidvisningar. boolean
falskt
enableRequest​HeaderTracking Om sant spåras AJAX & Fetch-begärandehuvuden. boolean
falskt
enableResponse​HeaderTracking Om sant spåras AJAX & Fetch-begärans svarshuvuden. boolean
falskt
distributedTracingMode Anger läget för distribuerad spårning. Om AI_AND_W3C läge eller W3C-läge har angetts genereras W3C-spårningskontextrubriker (traceparent/tracestate) som ingår i alla utgående begäranden. AI_AND_W3C tillhandahålls för bakåtkompatibilitet med äldre Application Insights instrumenterade tjänster. Se exemplet här. DistributedTracingModeseller
numeric
(Sedan v2.6.0) DistributedTracingModes.AI_AND_W3C
(v2.5.11 eller tidigare) DistributedTracingModes.AI
aktivera​AjaxErrorStatusText Om sant, inkludera svarsfeldatatext i beroendehändelsen vid misslyckade AJAX-begäranden. boolean
falskt
aktivera​AjaxPerfTracking Flagga för att aktivera upp- och inklusive ytterligare tidsinställningar för webbläsarfönster.prestanda i rapporterade ajax mått (XHR och hämtning). boolean
falskt
maxAjaxPerf​LookupAttempts Det maximala antalet gånger som du ska söka efter window.performance timings (om tillgängligt), detta krävs eftersom inte alla webbläsare fyller i window.performance innan de rapporterar slutet av XHR-begäran och för hämtningsbegäranden som läggs till när den har slutförts. numeric
3
ajaxPerfLookupDelay Väntetiden innan du försöker hitta tidsinställningar för window.performance för en begäran, tiden anges i millisekunder och skickas direkt till ajax setTimeout(). numeric
25 ms
enableUnhandled​PromiseRejection​Tracking Om det är sant kommer ohanterade avvisningar av löftet att automatiskt samlas in och rapporteras som ett JavaScript-fel. När disableExceptionTracking är sant (spåra inte undantag) ignoreras konfigurationsvärdet och ohanterade avvisningar av löftet rapporteras inte. boolean
falskt
disable​InstrumentationKey​Validation Om sant kringgås valideringskontrollen av instrumenteringsnyckeln. boolean
falskt
enablePerfMgr När det här är aktiverat (sant) skapas lokala perfEvents för kod som har instrumenterats för att generera perfEvents (via doPerf()-hjälpen). Detta kan användas för att identifiera prestandaproblem i SDK baserat på din användning eller eventuellt i din egen instrumenterade kod. Mer information finns i den grundläggande dokumentationen. Sedan v2.5.7 boolean
falskt
perfEvtsSendAll När enablePerfMgr är aktiverat och IPerfManager aktiverar en INotificationManager.perfEvent() avgör den här flaggan om en händelse aktiveras (och skickas till alla lyssnare) för alla händelser (sant) eller endast för "överordnade" händelser (falskt < > standardvärde).
En överordnad IPerfEvent är en händelse där ingen annan IPerfEvent fortfarande körs när den här händelsen skapas och dess överordnade egenskap inte är null eller odefinierad. Sedan v2.5.7		 boolean
falskt
idLength Anger standardlängden som används för att generera nya slumpmässiga sessions- och användar-ID-värden. Standardvärdet är 22, det tidigare standardvärdet är 5 (v2.5.8 eller mindre) om du behöver behålla den tidigare maxlängden bör du ange värdet till 5. numeric
22

Från version 2.6.0 är cookiehantering nu tillgängligt direkt från instansen och kan inaktiveras och återaktiveras efter initieringen.

Om den inaktiveras under initieringen via konfigurationerna eller kan du nu disableCookiesUsage cookieCfg.enabled återaktivera via funktionen ICookieMgr. setEnabled

Den instansbaserade cookiehanteringen ersätter även de tidigare globala CoreUtils-funktionerna disableCookies() , setCookie(...) och getCookie(...) deleteCookie(...) . Och för att dra nytta av de trädskakningsförbättringar som också introducerades som en del av version 2.6.0 bör du inte längre använda de globala funktionerna.

ICookieMgrConfig

Cookie-konfiguration för instansbaserad cookiehantering som lagts till i version 2.6.0.

Name Beskrivning Typ och standard
enabled Ett booleskt tecken som anger om SDK:ns användning av cookies är aktiverad av den aktuella instansen. Om det är falskt lagrar eller läser inte den SDK-instans som initieras av den här konfigurationen några data från cookies boolean
true
domän Anpassad cookiedomän. Detta är användbart om du vill dela program Insights cookies mellan underdomäner. Om inget värde anges används värdet från cookieDomain rotvärdet. sträng
null
path Anger sökvägen som ska användas för cookien. Om den inte anges används något värde från cookiePath rotvärdet. sträng
/
getCookie Funktion för att hämta det namngivna cookievärdet. Om det inte anges används intern cookieparsning/cachelagring. (name: string) => string
null
setCookie Funktion för att ange den namngivna cookien med det angivna värdet, anropas endast när du lägger till eller uppdaterar en cookie. (name: string, value: string) => void
null
delCookie Funktion för att ta bort den namngivna cookien med det angivna värdet, avgränsat från setCookie för att undvika behovet av att parsa värdet för att avgöra om cookien läggs till eller tas bort. Om inget anges används intern cookieparsning/cachelagring. (name: string, value: string) => void
null

Aktivera time-on-page-spårning

Genom att autoTrackPageVisitTime: true ange spåras den tid som en användare tillbringar på varje sida. På varje ny PageView skickas varaktigheten som användaren spenderade på föregående sida som ett anpassat mått med namnet PageVisitTime . Det här anpassade måttet kan visas i Metrics Explorer som ett "loggbaserat mått".

Aktivera korrelation

Korrelation genererar och skickar data som möjliggör distribuerad spårning och driver programkartan, transaktionsvyn från slutet till slut ochandra diagnostiska verktyg.

I följande exempel visas alla möjliga konfigurationer som krävs för att aktivera korrelation, med scenariospecifika kommentarer nedan:

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

Om någon av dina servrar från tredje part som klienten kommunicerar med inte kan acceptera huvudena och , och du inte kan uppdatera deras konfiguration, måste du placera dem i en Request-Id Request-Context undantagslista via konfigurationsegenskapen. correlationHeaderExcludedDomains Den här egenskapen stöder jokertecken.

Serversidan måste kunna acceptera anslutningar med de huvuden som finns. Beroende på konfigurationen på serversidan är det ofta nödvändigt att utöka Access-Control-Allow-Headers listan på serversidan genom att manuellt lägga till och Request-Id Request-Context .

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

Anteckning

Om du använder OpenTelemtry eller Application Insights-SDK:er som släpptes 2020 eller senare, rekommenderar vi att du använder WC3 TraceContext. Se konfigurationsvägledning här.

Ensidesprogram

Som standard hanterar detta SDK inte tillståndsbaserad vägbyte som sker i ensidesprogram. Om du vill aktivera automatisk spårning av vägändring för ditt ensidesprogram kan du lägga enableAutoRouteTracking: true till i konfigurationskonfigurationen.

För närvarande erbjuder vi ett separat React plugin-programsom du kan initiera med detta SDK. Den utför också spårning av vägändring åt dig, samt samlar in andra React specifik telemetri.

Anteckning

Använd enableAutoRouteTracking: true endast om du inte använder React plugin-programmet. Båda kan skicka nya Sidvyer när vägen ändras. Om båda är aktiverade kan duplicerade Sidvyer skickas.

Tillägg

Tillägg
React
React Native
Angular
Klicka på Automatisk insamling av analys

Utforska webbläsar-/klientdata

Data på webbläsar-/klientsidan kan visas genom att gå till Mått och lägga till enskilda mått som du är intresserad av:

Skärmbild av sidan Mått i Application Insights som visar bildvisning av måttdata för en webbapp.

Du kan också visa dina data från JavaScript SDK via webbläsarupplevelsen i portalen.

Välj Webbläsare och sedan Fel eller Prestanda.

Skärmbild av sidan Webbläsare i Application Insights visar hur du lägger till webbläsarfel eller webbläsarprestanda i de mått som du kan visa för webbappen.

Prestanda

Skärmbild av sidan Prestanda i Application Insights som visar bildvisningar av driftmått för en webbapp.

Beroenden

Skärmbild av sidan Prestanda i Application Insights som visar bildvisningar av beroendemått för en webbapp.

Analys

Om du vill köra frågor mot din telemetri som samlats in av JavaScript SDK väljer du knappen Visa i loggar (analys). Genom att lägga till en -instruktion för ser du endast data från JavaScript SDK och all telemetri på serversidan som samlas in av andra where client_Type == "Browser" SDK:er undantas.

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

Stöd för källkarta

Den minifierade anropsstacken för din undantagstelemetri kan intemineras i Azure Portal. Alla befintliga integreringar på panelen Undantagsinformation fungerar med den nyligen ejminifierade anropsstacken.

Du kan länka din Application Insights-resurs till din egen Azure Blob Storage container för att automatiskt förena anropsstackar. Information om hur du kommer igång finns i stöd för automatisk källkarta.

Dra och släpp

  1. Välj ett undantagstelemetriobjekt i Azure Portal för att visa dess transaktionsinformation från slutet till slut
  2. Identifiera vilka källmappningar som motsvarar den här anropsstacken. Källkartan måste matcha en stackrams källfil, men med suffixet .map
  3. Dra och släpp källkartorna till anropsstacken i Azure Portal En animerad bild som visar hur du drar och släpper källmappfiler från en byggmapp till fönstret Anropsstack i Azure Portal.

Application Insights Web Basic

För en enkel upplevelse kan du i stället installera den grundläggande versionen av Application Insights

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

Den här versionen levereras med det minsta antalet funktioner och funktioner och förlitar sig på att du bygger upp den som du vill. Den utför till exempel ingen autokodning (undantag utan fel, AJAX osv.). API:erna för att skicka vissa telemetrityper som , osv. ingår inte i den här versionen, så du måste trackTrace trackException ange en egen omserare. Det enda API som är tillgängligt är track . Ett exempel finns här.

Exempel

Exempel som kan köras finns i Application Insights JavaScript SDK Samples.

Uppgradera från den gamla versionen av Application Insights

Större ändringar i SDK V2-versionen:

  • För att möjliggöra bättre API-signaturer har vissa API-anrop, till exempel trackPageView och trackException, uppdaterats. Körning i Internet Explorer 8 och tidigare versioner av webbläsaren stöds inte.
  • Kuvertet för telemetri innehåller fältnamn och strukturändringar på grund av dataschemauppdateringar.
  • Har context.operation flyttats till context.telemetryTrace . Vissa fält ändrades också ( operation.id --> telemetryTrace.traceID ).
    • Om du vill uppdatera det aktuella sidvisnings-ID:t manuellt (till exempel i SPA-appar) använder du appInsights.properties.context.telemetryTrace.traceID = Microsoft.ApplicationInsights.Telemetry.Util.generateW3CId() .

      Anteckning

      Om du vill hålla spårnings-ID:t unikt, där du tidigare Util.newId() använde , använder du nu Util.generateW3CId() . Båda blir i slutändan åtgärds-ID:t.

Om du använder den aktuella Application Insights PRODUCTION SDK (1.0.20) och vill se om den nya SDK:n fungerar under körning uppdaterar du URL:en beroende på ditt aktuella SDK-inläsningsscenario.

  • Ladda ned via CDN scenario: Uppdatera det kodfragment som du för närvarande använder för att peka på följande URL:

    "https://js.monitor.azure.com/scripts/b/ai.2.min.js"

  • npm-scenario: downloadAndSetup Anropa för att ladda ned det fullständiga ApplicationInsights-skriptet från CDN och initiera det med instrumentationsnyckeln:

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

Testa i den interna miljön för att kontrollera att övervakning av telemetri fungerar som förväntat. Om allt fungerar uppdaterar du dina API-signaturer på lämpligt sätt till SDK V2-versionen och distribuerar i produktionsmiljöerna.

SDK-prestanda/-overhead

Med bara 36 KB gzipped och det bara tar cirka 15 ms att initiera, lägger Application Insights till en minimal mängd belastning på din webbplats. Med hjälp av kodfragmentet läses minimala komponenter i biblioteket snabbt in. Under tiden laddas det fullständiga skriptet ned i bakgrunden.

När skriptet laddas ned från CDN köas all spårning av sidan. När det nedladdade skriptet har initierats asynkront spåras alla händelser som har köats. Därför förlorar du inte någon telemetri under sidans hela livscykel. Den här konfigurationsprocessen ger din sida ett sömlöst analyssystem som är osynligt för användarna.

Sammanfattning:

  • npm-version
  • komprimerad storlek för gzip
  • 15 ms övergripande initieringstid
  • Ingen spårning missades under sidans livscykel

Stöd för webbläsare

Chrome Firefox IE Opera Safari
Chrome Senaste ✔ Firefox Senaste ✔ IE 9+ & Edge ✔
IE 8- kompatibel		 Opera Senaste ✔ Safari Senaste ✔

ES3/IE8-kompatibilitet

Som SDK finns det flera användare som inte kan styra vilka webbläsare deras kunder använder. Därför måste vi se till att detta SDK fortsätter att "fungera" och inte bryter JS-körningen när den läses in av en äldre webbläsare. Även om det skulle vara idealiskt att inte stödja webbläsare i IE8 och äldre generation (ES3), finns det många stora kunder/användare som fortsätter att kräva sidor för att "arbeta" och som anges kan de styra vilken webbläsare som deras slutanvändare väljer att använda.

Detta innebär INTE att vi bara kommer att stödja den lägsta gemensamma uppsättningen funktioner, bara att vi behöver underhålla ES3-kodkompatibilitet och när du lägger till nya funktioner måste de läggas till på ett sätt som inte skulle bryta ES3 JavaScript-parsning och läggas till som en valfri funktion.

Se GitHub fullständig information om IE8-support

SDK med öppen källkod

Application Insights JavaScript SDK har öppen källkod för att visa källkoden eller för att bidra till projektet, besök den officiella GitHub lagringsplatsen.

De senaste uppdateringarna och felkorrigeringarna finns i den viktiga informationen.

Nästa steg