Sdílet prostřednictvím

Povolte monitorování skutečných uživatelů v Azure Monitor Application Insights

Sada Microsoft Azure Monitor Application Insights JavaScript SDK shromažďuje data o využití, která umožňují monitorovat a analyzovat výkon webových aplikací JavaScriptu. To se běžně označuje jako Monitorování skutečných uživatelů nebo RUM.

Sada Application Insights JavaScript SDK obsahuje základní sadu SDK a několik modulů plug-in pro další možnosti.

Koncepční diagram znázorňující sadu Application Insights JavaScript SDK, její moduly plug-in/rozšíření a jejich vztah k sobě

Ve výchozím nastavení shromažďujeme zobrazení stránek. Pokud chcete ve výchozím nastavení také shromažďovat kliknutí, zvažte přidání pluginu Click Analytics Auto-Collection:

Poskytujeme modul plug-in ladění a modul plug-in performance pro ladění/testování. Ve výjimečných případech je možné vytvořit vlastní rozšíření přidáním vlastního modulu plug-in.

Požadavky

Začínáme

Postupujte podle kroků v této části a instrumentujte aplikaci pomocí sady Application Insights JavaScript SDK.

Doporučení

Dobrá zpráva! Ještě více zjednodušujeme povolení JavaScriptu pomocí injektování zavaděcího skriptu sady JavaScript (Web) SDK nastavením.

Přidání kódu JavaScriptu

K dispozici jsou dvě metody pro přidání kódu pro povolení Application Insights prostřednictvím sady Application Insights JavaScript SDK:

metoda Kdy bych tuto metodu použil(a)?
Načítací skript JavaScript (Web) SDK Pro většinu zákazníků doporučujeme použít JavaScript (Web) SDK Loader skript, protože sadu SDK nikdy nemusíte aktualizovat a nejnovější aktualizace získáte automaticky. Máte také kontrolu nad tím, ke kterým stránkám přidáte sadu Application Insights JavaScript SDK.
balíček npm Chcete přenést sadu SDK do kódu a povolit IntelliSense. Tato možnost je nutná jenom pro vývojáře, kteří vyžadují více vlastních událostí a konfigurace. Tato metoda se vyžaduje, pokud plánujete použít rozšíření React, React Native nebo Angular Framework.

  1. Na začátek každé stránky, pro kterou chcete povolit Application Insights, vložte skript pro načtení JavaScript (Web) SDK.

    Pokud možno, měli byste ho přidat jako první skript v <head> oddílu, aby mohl monitorovat případné problémy se všemi vašimi závislostmi.

    Pokud se zjistí Internet Explorer 8, sada JavaScript SDK v2.x se automaticky načte.

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

  2. (Volitelné) Pokud potřebujete optimalizovat načítání webové stránky nebo vyřešit chyby načítání, přidejte nebo aktualizujte volitelnou konfiguraci skriptů zavaděče sady JavaScript (Web) SDK.

    Snímek obrazovky se skriptem zavaděče sady JavaScript (Web) SDK Jsou zvýrazněné parametry pro konfiguraci skriptu zavaděče sady JavaScript (Web) SDK.

Konfigurace skriptů zavaděče sady JavaScript (Web) SDK

Název Typ Povinné? Popis
Src řetězec Požaduje se Úplná adresa URL pro načtení sady SDK. Tato hodnota se používá pro atribut "src" dynamicky přidaného <skriptu nebo> značky. Můžete použít veřejné umístění CDN nebo vlastní soukromě hostované umístění.
jméno řetězec Volitelné Globální název inicializované sady SDK. Toto nastavení použijte, pokud potřebujete inicializovat dvě různé sady SDK současně.

Výchozí hodnota je appInsights, takže window.appInsights je odkazem na inicializovanou instanci.

Poznámka: Pokud přiřadíte hodnotu názvu nebo pokud je předchozí instance přiřazena ke globálnímu názvu appInsightsSDK, inicializační kód sady SDK vyžaduje, aby byl v globálním oboru názvů jako window.appInsightsSDK=<name value>, aby se zajistilo správné inicializování a aktualizace zavaděcího skriptu JavaScriptu (Web) SDK a proxy metod.
Ld číslo v ms Volitelné Definuje zpoždění načítání, které se má čekat před pokusem o načtení sady SDK. Toto nastavení použijte, když se webová stránka HTML nedaří načíst, protože skript zavaděče SDK pro JavaScript (Web) se načítá v nevhodný okamžik.

Výchozí hodnota je 0 ms po vypršení časového limitu. Pokud použijete zápornou hodnotu, značka skriptu se okamžitě přidá do <head> oblasti stránky a zablokuje událost načtení stránky, dokud se skript nenačte nebo selže.
useXhr booleovský Volitelné Toto nastavení se používá pouze pro hlášení selhání načítání sady SDK. Toto nastavení je například užitečné, když skript zavaděče JavaScript (Web) SDK brání načtení stránky HTML, což způsobí nedostupnost funkce fetch().

Pokus o použití funkce fetch() jako první možnost, pokud je dostupná, a až poté použití XHR. Nastavte toto nastavení na true, aby se obešla kontrola načítání. Toto nastavení je nezbytné pouze v prostředích, kde fetch nemůže přenášet události selhání, například když se skriptu zavaděče JavaScript SDK (Web) nepodaří načíst úspěšně.
crossOrigin řetězec Volitelné Začleněním tohoto nastavení značka skriptu, která je přidána pro stažení sady SDK, obsahuje atribut crossOrigin s touto řetězcovou hodnotou. Toto nastavení použijte, když potřebujete poskytnout podporu CORS. Pokud není definován (výchozí), není přidán žádný atribut crossOrigin. Doporučené hodnoty nejsou definované (výchozí), "" nebo "anonymní". Všechny platné hodnoty naleznete v dokumentaci k atributu HTML pro křížový původ.
onInit function(aiSdk) { ... } Volitelné Tato funkce zpětného volání se volá po úspěšném načtení a inicializaci hlavního skriptu sady SDK z CDN (na základě hodnoty src). Tato funkce zpětného volání je užitečná, když potřebujete vložit inicializátor telemetrie. Je předán jeden argument, což je odkaz na instanci sady SDK, pro kterou se volá, a který se volá také před prvním zobrazením stránky. Pokud je SDK již načteno a inicializováno, toto zpětné volání bude stále vyvoláno. POZNÁMKA: Toto zpětné volání se volá během zpracování pole sdk.queue. Do fronty nemůžete přidat žádné další položky, protože se ignorují a zahodí. (Přidáno jako součást JavaScript (Web) SDK Loader Script verze 5 – hodnota sv:"5" ve skriptu).
ČR booleovský Volitelné Pokud se sadě SDK nepodaří načíst a hodnota koncového bodu definovaná pro src je veřejné umístění CDN, tato konfigurace se pokusí okamžitě načíst sadu SDK z jednoho z následujících záložních koncových bodů CDN:
  • 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
POZNÁMKA: az416426.vo.msecnd.net se částečně podporuje, proto se nedoporučuje.

Pokud se sada SDK úspěšně načte ze záložního koncového bodu CDN, načte se z prvního dostupného koncového bodu, který se určí, kdy server provede úspěšnou kontrolu načtení. Pokud se sadě SDK nepodaří načíst z některého z koncových bodů CDN zálohování, zobrazí se chybová zpráva selhání sady SDK.

Pokud není definována, výchozí hodnota je true. Pokud nechcete načíst sadu SDK ze záložních koncových bodů CDN, nastavte tuto možnost konfigurace na false.

Pokud načítáte sadu SDK z vlastního privátního hostovaného koncového bodu CDN, tato možnost konfigurace se nedá použít.

Vložte připojovací řetězec do svého prostředí

Chcete-li vložit připojovací řetězec do prostředí, postupujte takto:

  1. Přejděte do podokna Přehled vašeho prostředku Application Insights.

  2. Vyhledejte připojovací řetězec.

  3. Výběrem ikony Kopírovat do schránky zkopírujte připojovací řetězec do schránky.

    Snímek obrazovky znázorňující přehled a připojovací řetězec Application Insights

  4. Nahraďte zástupný symbol "YOUR_CONNECTION_STRING" v kódu JavaScriptu vaším řetězcem připojení, který jste zkopírovali do schránky.

    Formát connectionString musí být ve formátu "InstrumentationKey=xxxx;....". Pokud zadaný řetězec nesplňuje tento formát, proces načtení sady SDK selže.

    Připojovací řetězec se nepovažuje za token zabezpečení ani klíč. Další informace najdete v tématu Vyžadují nové oblasti Azure použití připojovacích řetězců?.

    Poznámka:

    Sada Application Insights JavaScript SDK vyžaduje, aby byl během inicializace a konfigurace poskytnut připojovací řetězec. Tento připojovací řetězec je viditelný jako prostý text v klientských prohlížečích a neexistuje žádný jednoduchý způsob, jak pro telemetrii prohlížeče použít ověřování pomocí Microsoft Entra ID. Doporučujeme zvážit vytvoření samostatného prostředku Application Insights s povoleným místním ověřováním pro telemetrii založenou na prohlížeči v JavaScriptu, jestliže potřebujete zabezpečit telemetrii služby samostatně pomocí ověřování založeného na Microsoft Entra ID.

(Volitelné) Přidání konfigurace sady SDK

Volitelná konfigurace sady SDK se předá sadě Application Insights JavaScript SDK během inicializace.

Pokud chcete přidat konfiguraci sady SDK, přidejte každou možnost konfigurace přímo v části connectionString. Příklad:

Snímek obrazovky kódu JavaScriptu s přidanými a zvýrazněnými možnostmi konfigurace sady SDK

(Volitelné) Přidání pokročilé konfigurace sady SDK

Pokud chcete použít další funkce poskytované moduly plug-in pro konkrétní architektury a volitelně povolit modul plug-in Click Analytics, přečtěte si:

Potvrzení toku dat

  1. Přejděte na resurs Application Insights, pro který jste povolili sadu SDK.

  2. V nabídce prostředků Application Insights vlevo v části Prozkoumat vyberte podokno Hledání transakcí.

  3. Otevřete rozevírací nabídku Typy událostí a výběrem možnosti Vybrat vše zrušte zaškrtnutí políček v nabídce.

  4. V rozevírací nabídce Typy událostí vyberte:

    • Zobrazení stránky pro monitorování skutečných uživatelů ve službě Azure Monitor Application Insights
    • Přizpůsobená událost pro plug-in Click Analytics s automatickou sběrem.

    Zobrazení dat na portálu může trvat několik minut. Pokud se zobrazí pouze data, jedná se o výjimku selhání načtení, přečtěte si téma Řešení potíží se selháním načítání sady SDK pro JavaScriptové webové aplikace.

    V některých případech, pokud na stejné stránce běží více instancí různých verzí Application Insights, mohou během inicializace dojít k chybám. V těchto případech a v případě chybové zprávy se podívejte na Spuštění více verzí sady Application Insights JavaScript SDK v jedné relaci. Pokud dojde k některé z těchto chyb, zkuste změnit obor názvů pomocí nastavení name. Další informace najdete v tématu JavaScript (Web) SDK Loader Script configuration.

    Snímek obrazovky s podoknem hledání transakcí Application Insights v Azure portálu s vybranou možností Zobrazení stránky. Zobrazení stránek jsou zvýrazněná.

  5. Pokud chcete dotazovat data, abyste potvrdili tok dat:

    1. V levém podokně vyberte Protokoly .

      Když vyberete Protokoly, otevře se dialogové okno Dotazy, které obsahuje ukázkové dotazy relevantní pro vaše data.

    2. Vyberte Spustit pro ukázkový dotaz, který chcete spustit.

    3. V případě potřeby můžete ukázkový dotaz aktualizovat nebo napsat nový dotaz pomocí dotazovací jazyk Kusto (KQL).

      Základní operátory KQL najdete v tématu Seznámení s běžnými operátory KQL.

Technická podpora

  • Pokud nemůžete spustit aplikaci nebo nezískáte data podle očekávání, přečtěte si vyhrazený článek o řešení potíží.
  • Nejčastější dotazy k sadě JavaScript SDK najdete v nejčastějších dotazech.
  • V případě problémů s podporou Azure otevřete žádost o podporu Azure.
  • Seznam otevřených problémů souvisejících se sadou Application Insights JavaScript SDK najdete na stránce Problémy GitHubu.
  • Pomocí rozšíření Telemetry Viewer můžete vypsat jednotlivé události v síťovém datovém nákladu a sledovat interní volání v rámci Application Insights.

Další kroky