Az Azure Monitor-alkalmazás Elemzések valós felhasználói monitorozás engedélyezése

  • Cikk

A Microsoft Azure Monitor alkalmazás Elemzések JavaScript SDK használati adatokat gyűjt, amely lehetővé teszi a JavaScript-webalkalmazások teljesítményének monitorozását és elemzését. Ezt gyakran nevezik valós felhasználói figyelésnek vagy RUM-nak.

Az alkalmazás Elemzések JavaScript SDK alapszintű SDK-val és több beépülő modulval rendelkezik a további képességek érdekében.

Conceptual diagram that shows the Application Insights JavaScript SDK, its plugins/extensions, and their relationship to each other.

Alapértelmezés szerint lapmegtekintéseket gyűjtünk. Ha azonban alapértelmezés szerint a kattintásokat is szeretné gyűjteni, fontolja meg a Click Analytics automatikus gyűjtemény beépülő modul hozzáadását:

A hibakereséshez /teszteléshez a Hibakeresés beépülő modult és a Teljesítmény beépülő modult biztosítjuk. Ritkán egyéni beépülő modul hozzáadásával létrehozhatja saját bővítményét.

Előfeltételek

Első lépések

Kövesse az ebben a szakaszban leírt lépéseket az alkalmazás Elemzések JavaScript SDK-val való használatához.

Tipp.

Jó hír! Még egyszerűbbé tesszük a JavaScript engedélyezését. Nézze meg, hol érhető el a JavaScript (Web) SDK Loader Script injektálása konfiguráció alapján!

A JavaScript-kód hozzáadása

Az alkalmazás Elemzések az alkalmazás Elemzések JavaScript SDK-val való engedélyezéséhez két módszer érhető el:

Metódus Mikor használnám ezt a módszert?
JavaScript (webes) SDK loader script A legtöbb ügyfél számára javasoljuk a JavaScript (webes) SDK loader szkriptet, mert soha nem kell frissítenie az SDK-t, és automatikusan megkapja a legújabb frissítéseket. Azt is szabályozhatja, hogy mely lapokhoz adja hozzá az alkalmazást Elemzések JavaScript SDK-t.
npm-csomag Be szeretné kapcsolni az SDK-t a kódba, és engedélyezni szeretné az IntelliSense-t. Ez a beállítás csak olyan fejlesztők számára szükséges, akik több egyéni eseményt és konfigurációt igényelnek. Ez a módszer akkor szükséges, ha a React, a React Natív vagy az Angular Framework bővítményt tervezi használni.

  1. Illessze be a JavaScript (webes) SDK loader szkriptet minden oldal tetejére, amelyhez engedélyezni szeretné az alkalmazás Elemzések.

    Lehetőség szerint vegye fel a szakasz első szkriptjeként <head> , hogy az az összes függőséggel kapcsolatos esetleges problémákat monitorozhassa.

    Ha az Internet Explorer 8-at észleli, a JavaScript SDK v2.x automatikusan betöltődik.

    <script type="text/javascript">
!(function (cfg){function e(){cfg.onInit&&cfg.onInit(i)}var S,u,D,t,n,i,C=window,x=document,w=C.location,I="script",b="ingestionendpoint",E="disableExceptionTracking",A="ai.device.";"instrumentationKey"[S="toLowerCase"](),u="crossOrigin",D="POST",t="appInsightsSDK",n=cfg.name||"appInsights",(cfg.name||C[t])&&(C[t]=n),i=C[n]||function(l){var d=!1,g=!1,f={initialize:!0,queue:[],sv:"7",version:2,config:l};function m(e,t){var n={},i="Browser";function a(e){e=""+e;return 1===e.length?"0"+e:e}return n[A+"id"]=i[S](),n[A+"type"]=i,n["ai.operation.name"]=w&&w.pathname||"_unknown_",n["ai.internal.sdkVersion"]="javascript:snippet_"+(f.sv||f.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:4,seq:"1",aiDataContract:undefined}}var h=-1,v=0,y=["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"],k=l.url||cfg.src;if(k){if((n=navigator)&&(~(n=(n.userAgent||"").toLowerCase()).indexOf("msie")||~n.indexOf("trident/"))&&~k.indexOf("ai.3")&&(k=k.replace(/(\/)(ai\.3\.)([^\d]*)$/,function(e,t,n){return t+"ai.2"+n})),!1!==cfg.cr)for(var e=0;e<y.length;e++)if(0<k.indexOf(y[e])){h=e;break}var i=function(e){var a,t,n,i,o,r,s,c,p,u;f.queue=[],g||(0<=h&&v+1<y.length?(a=(h+v+1)%y.length,T(k.replace(/^(.*\/\/)([\w\.]*)(\/.*)$/,function(e,t,n,i){return t+y[a]+i})),v+=1):(d=g=!0,o=k,c=(p=function(){var e,t={},n=l.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][S]()]=o[1])}return t[b]||(e=(n=t.endpointsuffix)?t.location:null,t[b]="https://"+(e?e+".":"")+"dc."+(n||"services.visualstudio.com")),t}()).instrumentationkey||l.instrumentationKey||"",p=(p=p[b])?p+"/v2/track":l.endpointUrl,(u=[]).push((t="SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)",n=o,r=p,(s=(i=m(c,"Exception")).data).baseType="ExceptionData",s.baseData.exceptions=[{typeName:"SDKLoadFailed",message:t.replace(/\./g,"-"),hasFullStack:!1,stack:t+"\nSnippet failed to load ["+n+"] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: "+(w&&w.pathname||"_unknown_")+"\nEndpoint: "+r,parsedStack:[]}],i)),u.push((s=o,t=p,(r=(n=m(c,"Message")).data).baseType="MessageData",(i=r.baseData).message='AI (Internal): 99 message:"'+("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) ("+s+")").replace(/\"/g,"")+'"',i.properties={endpoint:t},n)),o=u,c=p,JSON&&((r=C.fetch)&&!cfg.useXhr?r(c,{method:D,body:JSON.stringify(o),mode:"cors"}):XMLHttpRequest&&((s=new XMLHttpRequest).open(D,c),s.setRequestHeader("Content-type","application/json"),s.send(JSON.stringify(o))))))},a=function(e,t){g||setTimeout(function(){!t&&f.core||i()},500),d=!1},T=function(e){var n=x.createElement(I),e=(n.src=e,cfg[u]);return!e&&""!==e||"undefined"==n[u]||(n[u]=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?x.getElementsByTagName("head")[0].appendChild(n):setTimeout(function(){x.getElementsByTagName(I)[0].parentNode.appendChild(n)},cfg.ld||0),n};T(k)}try{f.cookie=x.cookie}catch(p){}function t(e){for(;e.length;)!function(t){f[t]=function(){var e=arguments;d||f.queue.push(function(){f[t].apply(f,e)})}}(e.pop())}var r,s,n="track",o="TrackPage",c="TrackEvent",n=(t([n+"Event",n+"PageView",n+"Exception",n+"Trace",n+"DependencyData",n+"Metric",n+"PageViewPerformance","start"+o,"stop"+o,"start"+c,"stop"+c,"addTelemetryInitializer","setAuthenticatedUserContext","clearAuthenticatedUserContext","flush"]),f.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4},(l.extensionConfig||{}).ApplicationInsightsAnalytics||{});return!0!==l[E]&&!0!==n[E]&&(t(["_"+(r="onerror")]),s=C[r],C[r]=function(e,t,n,i,a){var o=s&&s(e,t,n,i,a);return!0!==o&&f["_"+r]({message:e,url:t,lineNumber:n,columnNumber:i,error:a,evt:C.event}),o},l.autoExceptionInstrumented=!0),f}(cfg.cfg),(C[n]=i).queue&&0===i.queue.length?(i.queue.push(e),i.trackPageView({})):e();})({
src: "https://js.monitor.azure.com/scripts/b/ai.3.gbl.min.js",
// name: "appInsights",
// ld: 0,
// useXhr: 1,
crossOrigin: "anonymous",
// onInit: null,
// cr: 0,
cfg: { // Application Insights Configuration
 connectionString: "YOUR_CONNECTION_STRING"
}});
</script>

  2. (Nem kötelező) Adjon hozzá vagy frissítse az opcionális JavaScript (Webes) SDK Loader Script konfigurációt attól függően, hogy optimalizálnia kell-e a weblap betöltését, vagy meg kell oldania a betöltési hibákat.

    Screenshot of the JavaScript (Web) SDK Loader Script. The parameters for configuring the JavaScript (Web) SDK Loader Script are highlighted.

JavaScript (web) SDK Loader Script configuration

Név Típus Kötelező? Leírás
src húr Szükséges Az SDK betöltésének teljes URL-címe. Ez az érték egy dinamikusan hozzáadott <szkript /> címke "src" attribútumához használatos. Használhatja a nyilvános CDN-helyet vagy a saját, privát üzemeltetésű helyet.
név húr Választható Az inicializált SDK globális neve. Ezt a beállítást akkor használja, ha egyszerre két különböző SDK-t kell inicializálnia.

Az alapértelmezett érték az alkalmazás Elemzések, ahogy window.appInsights az inicializált példányra mutató hivatkozás is.

Megjegyzés: Ha hozzárendel egy névértéket, vagy ha egy korábbi példányt hozzárendelt a globális névalkalmazáshoz Elemzések SDK, az SDK inicializálási kódjának a globális névtérben window.appInsightsSDK=<name value> kell lennie, hogy biztosítsa a JavaScript (webes) SDK loader szkriptjének megfelelő csontvázát, és a proxymetenek inicializálva és frissítve kell lennie.
Ld szám ms-ben Választható Meghatározza az SDK betöltése előtt várakozó terhelési késleltetést. Ezt a beállítást akkor használja, ha a HTML-lap betöltése sikertelen, mert a JavaScript (webes) SDK Loader-szkript helytelen időben töltődik be.

Az alapértelmezett érték az időtúllépés után 0 ms. Ha negatív értéket használ, a szkriptcímke azonnal hozzáadódik a <head> lap régiójához, és letiltja az oldalbetöltési eseményt, amíg a szkript be nem töltődik vagy sikertelen lesz.
useXhr Logikai Választható Ez a beállítás csak az SDK-terhelési hibák jelentésére használható. Ez a beállítás például akkor hasznos, ha a JavaScript (webes) SDK loader szkript megakadályozza a HTML-lap betöltését, ami miatt a beolvasás() nem érhető el.

Ha elérhető, először a fetch() használatát, majd az XHR-be való visszatérést jelenti. Állítsa be ezt a beállítást a true beolvasási ellenőrzés megkerüléséhez. Ez a beállítás csak akkor szükséges, ha az alkalmazást olyan környezetben használják, ahol a beolvasás nem küldi el a hibaeseményeket, például ha a JavaScript (web) SDK loader szkript nem töltődik be sikeresen.
keresztOrigin húr Választható Ezzel a beállítással az SDK letöltéséhez hozzáadott szkriptcímke tartalmazza a keresztOrigin attribútumot ezzel a sztringértékkel. Ezt a beállítást akkor használja, ha támogatnia kell a CORS-t. Ha nincs definiálva (az alapértelmezett), a rendszer nem ad hozzá keresztOrigin attribútumot. Az ajánlott értékek nincsenek definiálva (alapértelmezett), "" vagy "névtelen". Az összes érvényes értékhez tekintse meg a kereszt-forrás HTML-attribútum dokumentációját.
onInit function(aiSdk) { ... } Választható Ezt a visszahívási függvényt a rendszer a fő SDK-szkript sikeres betöltése és inicializálása után hívja meg a CDN-ből (az src érték alapján). Ez a visszahívási függvény akkor hasznos, ha telemetriai inicializálót kell beszúrnia. Egy argumentumot ad át, amely a meghívandó SDK-példányra mutató hivatkozás, és az első kezdeti oldalnézet előtt is meghívja. Ha az SDK már be van töltve és inicializálva van, a rendszer továbbra is meghívja ezt a visszahívást. MEGJEGYZÉS: Az sdk.queue tömb feldolgozása során a rendszer meghívja ezt a visszahívást. Nem adhat hozzá több elemet az üzenetsorhoz, mert azok figyelmen kívül vannak hagyva és elvetve. (A JavaScript (Web) SDK Loader Script 5-ös verziójának részeként hozzáadva – az sv:"5" érték a szkripten belül).
Cr Logikai Választható Ha az SDK nem töltődik be, és a megadott végpontérték src a nyilvános CDN-hely, ez a konfigurációs beállítás megpróbálja azonnal betölteni az SDK-t az alábbi biztonsági mentési CDN-végpontok egyikéről:
  • 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
MEGJEGYZÉS: a az416426.vo.msecnd.net részben támogatott, ezért nem ajánlott.

Ha az SDK sikeresen betöltődik egy biztonsági mentési CDN-végpontról, az első elérhetőből töltődik be, amely akkor lesz meghatározva, amikor a kiszolgáló sikeres terhelés-ellenőrzést végez. Ha az SDK egyik biztonsági mentési CDN-végpontról sem töltődik be, megjelenik az SDK-hiba hibaüzenet.

Ha nincs definiálva, az alapértelmezett érték a következő true: . Ha nem szeretné betölteni az SDK-t a biztonsági mentési CDN-végpontokról, állítsa ezt a konfigurációs beállítást a következőre false: .

Ha az SDK-t a saját magánhálózati CDN-végpontjáról tölti be, ez a konfigurációs beállítás nem alkalmazható.

A kapcsolati sztring beillesztése a környezetbe

A kapcsolati sztring a környezetbe való beillesztéséhez kövesse az alábbi lépéseket:

  1. Lépjen az alkalmazás Elemzések erőforrás Áttekintés paneljére.

  2. Keresse meg a Csatlakozás ion sztringet.

  3. A Vágólapra másolás ikonra kattintva másolja a kapcsolati sztring a vágólapra.

    Screenshot that shows Application Insights overview and connection string.

  4. Cserélje le a JavaScript-kód helyőrzőjét "YOUR_CONNECTION_STRING" a vágólapra másolt kapcsolati sztring.

    A connectionString formátumnak a következőt kell követnie: "InstrumentationKey=xxxx;....". Ha a megadott sztring nem felel meg ennek a formátumnak, az SDK betöltési folyamata meghiúsul.

    A kapcsolati sztring nem tekinthető biztonsági jogkivonatnak vagy kulcsnak. További információ: Szükség van-e az új Azure-régiókra kapcsolati sztring használatára?

(Nem kötelező) SDK-konfiguráció hozzáadása

Az opcionális SDK-konfigurációt az alkalmazás Elemzések JavaScript SDK-nak továbbítja az inicializálás során.

Az SDK-konfiguráció hozzáadásához adja hozzá az egyes konfigurációs beállításokat közvetlenül az alatt.connectionString Példa:

Screenshot of JavaScript code with SDK configuration options added and highlighted.

(Nem kötelező) Speciális SDK-konfiguráció hozzáadása

Ha a beépülő modulok által adott keretrendszerekhez biztosított extra funkciókat szeretné használni, és opcionálisan engedélyezni szeretné a Click Analytics beépülő modult, tekintse meg a következőt:

Adatok áramlásának ellenőrzése

  1. Nyissa meg az alkalmazás Elemzések erőforrást, amely számára engedélyezte az SDK-t.

  2. A bal oldali Alkalmazás Elemzések erőforrásmenü Vizsgálat területén válassza a Tranzakciókeresés panelt.

  3. Nyissa meg az Eseménytípusok legördülő menüt, és válassza az Összes kijelölése lehetőséget a jelölőnégyzetek törléséhez a menüben.

  4. Az Eseménytípusok legördülő menüben válassza a következőt:

    • Lapnézet az Azure Monitor-alkalmazáshoz Elemzések valós felhasználói monitorozáshoz
    • Egyéni esemény a Click Analytics automatikus gyűjtemény beépülő modulhoz.

    Eltarthat néhány percig, amíg az adatok megjelennek a portálon. Ha az egyetlen látható adat a betöltési hiba kivétele, olvassa el a JavaScript-webalkalmazások SDK-betöltési hibáinak hibaelhárításával foglalkozó témakört.

    Bizonyos esetekben, ha az Alkalmazás Elemzések különböző verzióinak több példánya fut ugyanazon a lapon, az inicializálás során hibák léphetnek fel. Ezekben az esetekben és a megjelenő hibaüzenetben lásd: Az alkalmazás több verziójának futtatása Elemzések JavaScript SDK egy munkamenetben. Ha ilyen hibát észlelt, próbálja meg módosítani a névteret a name beállítás használatával. További információ: JavaScript (Web) SDK Loader Script configuration.

    Screenshot of the Application Insights Transaction search pane in the Azure portal with the Page View option selected. The page views are highlighted.

  5. Ha adatokat szeretne lekérdezni az adatok áramlásának ellenőrzéséhez:

    1. Válassza a Naplók lehetőséget a bal oldali panelen.

      A Naplók kiválasztásakor megnyílik a Lekérdezések párbeszédpanel , amely az adatok szempontjából releváns mintalekérdezéseket tartalmaz.

    2. Válassza a Futtatás lehetőséget a futtatni kívánt minta lekérdezéshez.

    3. Szükség esetén frissítheti a mintalekérdezéseket, vagy írhat egy új lekérdezést Kusto lekérdezésnyelv (KQL) használatával.

      Az alapvető KQL-operátorokért lásd a gyakori KQL-operátorokat ismertető témakört.

Gyakori kérdések

Ez a szakasz választ ad a gyakori kérdésekre.

Mik a felhasználók és a munkamenetek száma?

  • A JavaScript SDK beállít egy felhasználói cookie-t a webes ügyfélen a visszatérő felhasználók azonosításához, valamint egy munkamenet-cookie-t a tevékenységek csoportosításához.
  • Ha nincs ügyféloldali szkript, beállíthatja a cookie-kat a kiszolgálón.
  • Ha egy valódi felhasználó különböző böngészőkben használja a webhelyet, vagy privát/inkognitó böngészést vagy különböző gépeket használ, a rendszer többször is megszámolja őket.
  • Ha egy bejelentkezett felhasználót szeretne azonosítani a gépeken és böngészőkben, adjon hozzá egy hívást a setAuthenticatedUserContext() beállításhoz.

Mi a JavaScript SDK teljesítménye/többletterhelése?

Az alkalmazás Elemzések JavaScript SDK minimális többletterheléssel rendelkezik a webhelyén. Az SDK mindössze 36 KB-os méretű, és csak ~15 ms-ot vesz igénybe az inicializáláshoz, az SDK elhanyagolható mennyiségű betöltési időt ad hozzá a webhelyhez. Az SDK használatakor a kódtár minimális összetevői gyorsan betölthetők, és a teljes szkript a háttérben lesz letöltve.

Emellett, miközben a szkript a CDN-ből tölt le, az oldal minden nyomon követése várólistára kerül, így a lap teljes életciklusa során nem veszít el telemetriát. Ez a beállítási folyamat zökkenőmentes elemzési rendszert biztosít a lapnak, amely láthatatlan a felhasználók számára.

Milyen böngészőket támogat a JavaScript SDK?

Chrome Firefox IE Opera Safari
Chrome legújabb ✔ Firefox legújabb ✔ v3.x: IE 9+ > Microsoft Edge ✔
v2.x: IE 8+ kompatibilis > Microsoft Edge ✔		 Opera legújabb ✔ Safari legújabb ✔

Hol találhatok példakódokat a JavaScript SDK-hoz?

Futtatható példákért tekintse meg az Alkalmazás Elemzések JavaScript SDK-mintákat.

Mi az ES3/Internet Explorer 8 kompatibilitása a JavaScript SDK-val?

Meg kell hoznunk a szükséges intézkedéseket annak érdekében, hogy ez az SDK továbbra is "működjön", és ne törje meg a JavaScript végrehajtását, amikor egy régebbi böngésző betölti. Ideális lenne, ha nem támogatná a régebbi böngészőket, de számos nagy ügyfél nem tudja szabályozni, hogy a felhasználók melyik böngészőt használják.

Ez az állítás nem jelenti azt, hogy csak a legalacsonyabb általános funkciókat támogatjuk. Fenn kell tartanunk az ES3-kódkompatibilitást. Az új funkciókat úgy kell hozzáadni, hogy az ne törje meg az ES3 JavaScript-elemzést, és opcionális funkcióként legyen hozzáadva.

Az Internet Explorer 8 támogatásával kapcsolatos részletes információkért tekintse meg a GitHubot.

Nyílt forráskódú a JavaScript SDK?

Igen, az alkalmazás Elemzések JavaScript SDK nyílt forráskód. A forráskód megtekintéséhez vagy a projekthez való hozzájáruláshoz tekintse meg a hivatalos GitHub-adattárat.

Támogatás

Következő lépések