Aktivera Azure Monitor Application Insights övervakning av verkliga användare

2025-05-24

Microsoft Azure Monitor Application Insights JavaScript SDK samlar in användningsdata, vilket gör att du kan övervaka och analysera prestanda för JavaScript-webbprogram. Detta kallas vanligtvis verklig användarövervakning eller RUM.

Application Insights JavaScript SDK har en bas-SDK och flera plugin-program för fler funktioner.

Vi samlar in sidvisningar som standard. Men om du vill samla in klick som standardinställning kan du överväga att lägga till Click Analytics för automatisk insamling-plugin:

Om du lägger till ett ramverkstillägg, som du kan lägga till när du har följt stegen för att komma igång, kan du också lägga till klickanalys när du lägger till ramverkstillägget.
Om du inte lägger till ett ramverkstillägg, lägg till plugin-programmet för Click Analytics när du har följt stegen för att komma igång.

Vi tillhandahåller plugin-programmet för felsökning och plugin-programmet för prestanda för felsökning/testning. I sällsynta fall är det möjligt att skapa ett eget tillägg genom att lägga till ett anpassat plugin-program.

Förutsättningar

Azure-prenumeration: Skapa en Azure-prenumeration kostnadsfritt
Application Insights-resurs: Skapa en resurs för Application Insights
Ett program som använder JavaScript

Kom igång

Följ stegen i det här avsnittet för att instrumentera ditt program med Application Insights JavaScript SDK.

Tips

Goda nyheter! Vi gör det ännu enklare att aktivera JavaScript genom att konfigurera injektion av JavaScript (Web) SDK Loader Script.

Lägg till JavaScript-koden

Det finns två metoder för att lägga till koden för att aktivera Application Insights via Application Insights JavaScript SDK:

Metod	När skulle jag använda den här metoden?
SDK-inläsningsskript för JavaScript (web)	För de flesta kunder rekommenderar vi SDK-inläsningsskriptet för JavaScript (Web) eftersom du aldrig behöver uppdatera SDK:t och du får de senaste uppdateringarna automatiskt. Dessutom har du kontroll över vilka sidor du lägger till Application Insights JavaScript SDK till.
npm-paket	Du vill ta med SDK:et i koden och aktivera IntelliSense. Det här alternativet behövs bara för utvecklare som behöver fler anpassade händelser och konfigurationer. Den här metoden krävs om du planerar att använda React, React Native eller Angular Framework-tillägget.

SDK-inläsningsskript för JavaScript (web)
npm-paket

Klistra in SDK-inläsningsskriptet för JavaScript (Web) överst på varje sida som du vill aktivera Application Insights för.

Du bör helst lägga till det som det första skriptet i avsnittet <head> så att det kan övervaka eventuella problem med alla dina beroenden.

Om Internet Explorer 8 identifieras läses JavaScript SDK v2.x in automatiskt.

<script type="text/javascript">
!(function (cfg){function e(){cfg.onInit&&cfg.onInit(n)}var x,w,D,t,E,n,C=window,O=document,b=C.location,q="script",I="ingestionendpoint",L="disableExceptionTracking",j="ai.device.";"instrumentationKey"[x="toLowerCase"](),w="crossOrigin",D="POST",t="appInsightsSDK",E=cfg.name||"appInsights",(cfg.name||C[t])&&(C[t]=E),n=C[E]||function(g){var f=!1,m=!1,h={initialize:!0,queue:[],sv:"8",version:2,config:g};function v(e,t){var n={},i="Browser";function a(e){e=""+e;return 1===e.length?"0"+e:e}return n[j+"id"]=i[x](),n[j+"type"]=i,n["ai.operation.name"]=b&&b.pathname||"_unknown_",n["ai.internal.sdkVersion"]="javascript:snippet_"+(h.sv||h.version),{time:(i=new Date).getUTCFullYear()+"-"+a(1+i.getUTCMonth())+"-"+a(i.getUTCDate())+"T"+a(i.getUTCHours())+":"+a(i.getUTCMinutes())+":"+a(i.getUTCSeconds())+"."+(i.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}},ver:undefined,seq:"1",aiDataContract:undefined}}var n,i,t,a,y=-1,T=0,S=["js.monitor.azure.com","js.cdn.applicationinsights.io","js.cdn.monitor.azure.com","js0.cdn.applicationinsights.io","js0.cdn.monitor.azure.com","js2.cdn.applicationinsights.io","js2.cdn.monitor.azure.com","az416426.vo.msecnd.net"],o=g.url||cfg.src,r=function(){return s(o,null)};function s(d,t){if((n=navigator)&&(~(n=(n.userAgent||"").toLowerCase()).indexOf("msie")||~n.indexOf("trident/"))&&~d.indexOf("ai.3")&&(d=d.replace(/(\/)(ai\.3\.)([^\d]*)$/,function(e,t,n){return t+"ai.2"+n})),!1!==cfg.cr)for(var e=0;e<S.length;e++)if(0<d.indexOf(S[e])){y=e;break}var n,i=function(e){var a,t,n,i,o,r,s,c,u,l;h.queue=[],m||(0<=y&&T+1<S.length?(a=(y+T+1)%S.length,p(d.replace(/^(.*\/\/)([\w\.]*)(\/.*)$/,function(e,t,n,i){return t+S[a]+i})),T+=1):(f=m=!0,s=d,!0!==cfg.dle&&(c=(t=function(){var e,t={},n=g.connectionString;if(n)for(var i=n.split(";"),a=0;a<i.length;a++){var o=i[a].split("=");2===o.length&&(t[o[0][x]()]=o[1])}return t[I]||(e=(n=t.endpointsuffix)?t.location:null,t[I]="https://"+(e?e+".":"")+"dc."+(n||"services.visualstudio.com")),t}()).instrumentationkey||g.instrumentationKey||"",t=(t=(t=t[I])&&"/"===t.slice(-1)?t.slice(0,-1):t)?t+"/v2/track":g.endpointUrl,t=g.userOverrideEndpointUrl||t,(n=[]).push((i="SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)",o=s,u=t,(l=(r=v(c,"Exception")).data).baseType="ExceptionData",l.baseData.exceptions=[{typeName:"SDKLoadFailed",message:i.replace(/\./g,"-"),hasFullStack:!1,stack:i+"\nSnippet failed to load ["+o+"] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: "+(b&&b.pathname||"_unknown_")+"\nEndpoint: "+u,parsedStack:[]}],r)),n.push((l=s,i=t,(u=(o=v(c,"Message")).data).baseType="MessageData",(r=u.baseData).message='AI (Internal): 99 message:"'+("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) ("+l+")").replace(/\"/g,"")+'"',r.properties={endpoint:i},o)),s=n,c=t,JSON&&((u=C.fetch)&&!cfg.useXhr?u(c,{method:D,body:JSON.stringify(s),mode:"cors"}):XMLHttpRequest&&((l=new XMLHttpRequest).open(D,c),l.setRequestHeader("Content-type","application/json"),l.send(JSON.stringify(s)))))))},a=function(e,t){m||setTimeout(function(){!t&&h.core||i()},500),f=!1},p=function(e){var n=O.createElement(q),e=(n.src=e,t&&(n.integrity=t),n.setAttribute("data-ai-name",E),cfg[w]);return!e&&""!==e||"undefined"==n[w]||(n[w]=e),n.onload=a,n.onerror=i,n.onreadystatechange=function(e,t){"loaded"!==n.readyState&&"complete"!==n.readyState||a(0,t)},cfg.ld&&cfg.ld<0?O.getElementsByTagName("head")[0].appendChild(n):setTimeout(function(){O.getElementsByTagName(q)[0].parentNode.appendChild(n)},cfg.ld||0),n};p(d)}cfg.sri&&(n=o.match(/^((http[s]?:\/\/.*\/)\w+(\.\d+){1,5})\.(([\w]+\.){0,2}js)$/))&&6===n.length?(d="".concat(n[1],".integrity.json"),i="@".concat(n[4]),l=window.fetch,t=function(e){if(!e.ext||!e.ext[i]||!e.ext[i].file)throw Error("Error Loading JSON response");var t=e.ext[i].integrity||null;s(o=n[2]+e.ext[i].file,t)},l&&!cfg.useXhr?l(d,{method:"GET",mode:"cors"}).then(function(e){return e.json()["catch"](function(){return{}})}).then(t)["catch"](r):XMLHttpRequest&&((a=new XMLHttpRequest).open("GET",d),a.onreadystatechange=function(){if(a.readyState===XMLHttpRequest.DONE)if(200===a.status)try{t(JSON.parse(a.responseText))}catch(e){r()}else r()},a.send())):o&&r();try{h.cookie=O.cookie}catch(k){}function e(e){for(;e.length;)!function(t){h[t]=function(){var e=arguments;f||h.queue.push(function(){h[t].apply(h,e)})}}(e.pop())}var c,u,l="track",d="TrackPage",p="TrackEvent",l=(e([l+"Event",l+"PageView",l+"Exception",l+"Trace",l+"DependencyData",l+"Metric",l+"PageViewPerformance","start"+d,"stop"+d,"start"+p,"stop"+p,"addTelemetryInitializer","setAuthenticatedUserContext","clearAuthenticatedUserContext","flush"]),h.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4},(g.extensionConfig||{}).ApplicationInsightsAnalytics||{});return!0!==g[L]&&!0!==l[L]&&(e(["_"+(c="onerror")]),u=C[c],C[c]=function(e,t,n,i,a){var o=u&&u(e,t,n,i,a);return!0!==o&&h["_"+c]({message:e,url:t,lineNumber:n,columnNumber:i,error:a,evt:C.event}),o},g.autoExceptionInstrumented=!0),h}(cfg.cfg),(C[E]=n).queue&&0===n.queue.length?(n.queue.push(e),n.trackPageView({})):e();})({
  src: "https://js.monitor.azure.com/scripts/b/ai.3.gbl.min.js",
  // 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),
  // dle: true, // Prevent the SDK from reporting load failure log
  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 (DON'T ADD anything to the sdk.queue -- As they won't get called)
  // sri: false, // Custom optional value to specify whether fetching the snippet from integrity file and do integrity check
  cfg: { // Application Insights Configuration
    connectionString: "YOUR_CONNECTION_STRING"
}});
</script>

(Valfritt) Lägg till eller uppdatera valfri SDK-inläsningsskriptkonfiguration för JavaScript (Web) om du behöver optimera inläsningen av webbsidan eller lösa inläsningsfel.

JavaScript-SDK-inläsningsskriptkonfiguration för webben

Namn	Typ	Obligatorisk?	beskrivning
Src	sträng	Obligatoriskt	Den fullständiga URL:en för var du ska läsa in SDK:t från. 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 din egen privat värdbaserade plats.
namn	sträng	Valfritt	Det globala namnet på det initierade SDK:t. Använd den här inställningen om du behöver initiera två olika SDK:er samtidigt. Standardvärdet är appInsights, så `window.appInsights` är en referens till den initierade instansen. Obs! Om du tilldelar ett namnvärde, eller om en tidigare instans har tilldelats det globala namnet appInsightsSDK, kräver SDK-initieringskoden att det ligger i det globala namnområdet som `window.appInsightsSDK=<name value>` för att säkerställa att rätt JavaScript-SDK-laddarskript och proxymetoder initieras och uppdateras korrekt.
Ld	nummer i ms	Valfritt	Definierar fördröjningstiden innan du försöker ladda SDK:et. Använd den här inställningen när HTML-sidan inte kan läsas in eftersom JavaScript-SDK-inläsningsskriptet (Web) läses in vid fel tidpunkt. Standardvärdet är 0 ms efter timeout. Om du använder ett negativt värde läggs skripttaggen omedelbart till i `<head>` sidans region och blockerar sidinläsningshändelsen tills skriptet läses in eller misslyckas.
useXhr	booleskt	Valfritt	Den här inställningen används endast för rapportering av SDK-belastningsfel. Den här inställningen är till exempel användbar när SDK-inläsningsskriptet för JavaScript (Web) hindrar HTML-sidan från att läsas in, vilket gör att fetch() inte är tillgänglig. Rapporteringen försöker först använda fetch() om möjligt och faller sedan tillbaka på XHR. Ställ in den här inställningen på `true` för att kringgå hämtningskontrollen. Den här inställningen är endast nödvändig i miljöer där hämtning inte kan överföra felhändelser, till exempel när inläsningsskriptet för JavaScript (Web) SDK misslyckas med att läsas in.
crossOrigin	sträng	Valfritt	Genom att inkludera den här inställningen innehåller skripttaggen som lagts till för att ladda ned SDK:t attributet crossOrigin med det här strängvärdet. Använd den här inställningen när du behöver stöd för CORS. När det inte har definierats (standardvärdet) läggs inget crossOrigin-attribut till. Rekommenderade värden definieras inte (standardvärdet), "" eller "anonyma". Alla giltiga värden finns i dokumentationen för HTML-attributet cross-origin.
onInit	function(aiSdk) { ... }	Valfritt	Den här återanropsfunktionen anropas efter att huvud-SDK-skriptet har lästs in och initierats från CDN (baserat på src-värdet). Den här återanropsfunktionen är användbar när du behöver infoga en telemetriinitierare. Det skickas ett argument, vilket är en referens till den SDK-instans som hämtas och anropas också före den första sidvyn. Om SDK redan har lästs in och initierats anropas fortfarande callback-funktionen. Obs! Under bearbetningen av matrisen sdk.queue anropas återanropet. Du kan inte lägga till fler objekt i kön eftersom de ignoreras och tas bort. (Har lagts till som en del av JavaScript (Web) SDK Loader Script version 5 – värdet sv:"5" i skriptet).
Poäng	booleskt	Valfritt	Om SDK:n inte kan läsas in och slutpunktsvärdet som definierats för `src` är den offentliga CDN-platsen, försöker det här konfigurationsalternativet att omedelbart läsa in SDK:n från någon av följande CDN-slutpunkter för säkerhetskopiering: js.monitor.azure.com js.cdn.applicationinsights.io js.cdn.monitor.azure.com js0.cdn.applicationinsights.io js0.cdn.monitor.azure.com js2.cdn.applicationinsights.io js2.cdn.monitor.azure.com az416426.vo.msecnd.net Obs! az416426.vo.msecnd.net stöds delvis, så det rekommenderas inte. Om SDK:n har lästs in från en CDN-slutpunkt för säkerhetskopiering läses den in från den första tillgängliga, vilket bestäms när servern utför en lyckad inläsningskontroll. Om SDK:n inte kan läsas in från någon av CDN-slutpunkterna för säkerhetskopiering visas felmeddelandet SDK-fel. När det inte har definierats är `true`standardvärdet . Om du inte vill läsa in SDK:n från CDN-slutpunkterna för säkerhetskopiering anger du det här konfigurationsalternativet till `false`. Om du läser in SDK:n från din egen privat värdbaserade CDN-slutpunkt är det här konfigurationsalternativet inte tillämpligt.

Använd följande kommando för att installera Microsoft Application Insights JavaScript SDK – Webbpaket.
```
npm i --save @microsoft/applicationinsights-web
```
Typer ingår i det här paketet, så du behöver inte installera ett separat typpaket.

Lägg till följande JavaScript i programmets kod.

Var och hur du lägger till den här JavaScript-koden beror på din programkod. Du kanske till exempel kan lägga till den exakt som den visas nedan eller så kan du behöva skapa omslutningar runt den.

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

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

Klistra in anslutningssträng i din miljö

Så här klistrar du in anslutningssträng i din miljö:

Gå till fönstret Översikt för din Application Insights-resurs.
Leta upp anslutningssträngen.
Välj ikonen Kopiera till Urklipp för att kopiera anslutningssträng till Urklipp.
Ersätt platshållaren "YOUR_CONNECTION_STRING" i JavaScript-koden med din anslutningssträng som har kopierats till urklipp.

Formatet connectionString måste följa "InstrumentationKey=xxxx;....". Om den angivna strängen inte uppfyller det här formatet misslyckas SDK-inläsningsprocessen.

Anslutningssträng betraktas inte som en säkerhetstoken eller nyckel. Mer information finns i Behöver nya Azure-regioner användning av anslutningssträng?.

Anteckning

Application Insights JavaScript SDK kräver att anslutningssträng tillhandahålls under initiering och konfiguration. Den här anslutningssträng visas i klartext i klientwebbläsare och det finns inget enkelt sätt att använda Microsoft Entra ID-baserad autentisering för webbläsartelemetri. Vi rekommenderar att du skapar en separat Application Insights-resurs med lokal autentisering aktiverad för JavaScript-webbläsarbaserad telemetri om du behöver skydda tjänsttelemetrin separat med hjälp av Microsoft Entra ID-baserad autentisering.

(Valfritt) Lägga till SDK-konfiguration

Den valfria SDK-konfigurationen skickas till Application Insights JavaScript SDK under initieringen.

Lägg till SDK-konfiguration genom att lägga till varje konfigurationsalternativ direkt under connectionString. Till exempel:

(Valfritt) Lägga till avancerad SDK-konfiguration

Om du vill använda de extra funktioner som tillhandahålls av plugin-program för specifika ramverk och eventuellt aktivera Klickanalys-plugin, kan du läsa:

Bekräfta att data flödar

Gå till din Application Insights-resurs som du har aktiverat SDK för.
I resursmenyn Application Insights till vänster går du till Undersök och väljer fönstret Transaktionssökning .
Öppna listrutan Händelsetyper och välj Markera alla för att avmarkera kryssrutorna på menyn.
I listrutan Händelsetyper väljer du:
- Sidvisning för Azure Monitor Application Insights Övervakning av verkliga användare
- Anpassad händelse för Click Analytics Auto-Collection-tillägget.
Det kan ta några minuter innan data visas i portalen. Om de enda data som visas är ett inläsningsfel undantag, kan du se Felsöka SDK-inläsningsfel för JavaScript-webbappar.

I vissa fall kan fel uppstå under initieringen om flera instanser av olika versioner av Application Insights körs på samma sida. För dessa fall och felmeddelandet som visas, se Köra flera versioner av Application Insights JavaScript SDK i en session. Om du stöter på något av dessa fel kan du prova att ändra namnområdet med hjälp av inställningen name . Mer information finns i JavaScript-SDK-inläsningsskriptkonfiguration (Web).
Om du vill fråga efter data för att bekräfta att data flödar:
1. Välj Loggar i det vänstra fönstret.
  
  När du väljer Loggar öppnas dialogrutan Frågor, som innehåller exempelfrågor som är relevanta för dina data.
2. Välj Kör för den exempelfråga som du vill köra.
3. Om det behövs kan du uppdatera exempelfrågan eller skriva en ny fråga med hjälp av Kusto-frågespråk (KQL).
  
  För att lära dig om viktiga KQL-operatorer, se Lär dig vanliga KQL-operatorer.

Stöd

Om du inte kan köra programmet eller om du inte får data som förväntat kan du läsa den dedikerade felsökningsartikeln.
Vanliga frågor om JavaScript SDK finns i Vanliga frågor och svar.
Öppna ett Azure-supportärende för problem med Azure-support.
En lista över öppna problem som rör Application Insights JavaScript SDK finns på sidan Med GitHub-problem.
Använd tillägget Telemetry Viewer för att lista ut de enskilda händelserna i nätverkets nyttolast och övervaka de interna anropen i Application Insights.

Nästa steg

Mer information om vanliga frågor och svar finns i Vanliga frågor och svar om JavaScript SDK
Utforska användningsupplevelser för Application Insights
Spåra sidvyer
Spåra anpassade händelser och mått
Infoga en initierare för JavaScript-telemetri
Lägga till JavaScript SDK-konfiguration
Se de detaljerade releasenoter på GitHub för uppdateringar och felkorrigeringar.
Fråga efter data i Log Analytics

Dela via