Web sayfaları için Application Insights

Makale
09/29/2021
Okumak için 20 dakika

Web sayfanızın veya uygulamanızın performansı ve kullanımı hakkında bilgi edinin. Sayfa betiğinize Application Insights eklersanız, sayfa yüklemelerinin ve AJAX çağrılarının zamanlamalarını, tarayıcı özel durumlarının ve AJAX hatalarının sayılarını ve ayrıntılarının yanı sıra kullanıcı ve oturum sayıları elde edebilirsiniz. Bunların tümü sayfaya, istemci işletim sistemi ve tarayıcı sürümüne, coğrafi konuma ve başka boyutlara göre kesimlere ayrılmıştır. Hata sayısı veya yavaş sayfa yüklemesi hakkında uyarı ayarlayabilirsiniz. Ayrıca JavaScript kodunuza izleme çağrıları ekleyerek web sayfası uygulamanızın farklı özelliklerinin nasıl kullanıldığını izleyebilirsiniz.

Application Insights tüm web sayfalarıyla kullanılabilir; kısa bir JavaScript eklemeniz yeterlidir. Web hizmetiniz Java veya ASP.NETise, istemci tarafı JavaScript SDK'sı ile birlikte sunucu tarafı SDK'larını kullanarak uygulama performansını uzdan sona anabilirsiniz.

JavaScript SDK'sı ekleme

Önemli

Bağlantı Dizeleri, ölçüm araçları anahtarları için önerilir. Yeni Azure bölgeleri için ölçümleme anahtarları yerine bağlantı dizelerinin kullanımı gerekir. Bağlantı dizesi, telemetri verilerinizi ilişkilendirmek istediğiniz kaynağı tanımlar. Ayrıca, kaynağınız telemetri için hedef olarak kullanacağız uç noktaları değiştirmenize olanak sağlar. Bağlantı dizesini kopyalayıp uygulamanın koduna veya ortam değişkenine eklemeniz gerekir.

İlk olarak bir kaynak Application Insights gerekir. Henüz bir kaynağınız ve izleme anahtarınız yoksa, yeni kaynak oluşturma yönergelerini izleyin.
JavaScript telemetrinizin (1. adımdan) gönderilmesini istediğiniz kaynağın izleme anahtarını ("iKey" olarak da bilinir) veya bağlantı dizesini kopyalayın. Bunu instrumentationKey connectionString JavaScript SDK'sı ile Application Insights eksersiniz.
Aşağıdaki Application Insights birini kullanarak web sayfanıza veya uygulamanıza JavaScript SDK'sı ekleyin:
- npm Kurulumu
- JavaScript Kod Parçacığı

Önemli

JavaScript SDK'sı uygulamanıza eklemek için yalnızca bir yöntem kullanın. NPM Kurulumunu kullanıyorsanız Kod Parçacığını (veya tam tersi) kullanmayın.

Not

NPM Kurulumu, JavaScript SDK'sı projenize bağımlılık olarak yüklenir ve IntelliSense'i sağlarken Kod Parçacığı, SDK'yı çalışma zamanında getirir. Her ikisi de aynı özellikleri destekler. Ancak, daha fazla özel olay ve yapılandırma isteyen geliştiriciler genellikle NPM Kurulumu'nı tercih etmiştir ancak kullanıma hazır web analizini hızlı bir şekilde etkinleştirmek isteyen kullanıcılar kod parçacığını tercih etmiştir.

npm tabanlı kurulum

NPM aracılığıyla yükleyin.

npm i --save @microsoft/applicationinsights-web

Not

Yazmalar bu pakete dahil edilir, bu nedenle ayrı bir typings paketi yüklemenize gerek yok.

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

Kod parçacığı tabanlı kurulum

Uygulamanız npm kullanmazsa, bu kod parçacığını her bir sayfanıza yapıştırarak Application Insights doğrudan web sayfalarınızı doğrudan bu kod parçacığıyla takip edebilirsiniz. Tercihen, tüm bağımlılıkları ve isteğe bağlı olarak javaScript hataları ile ilgili olası sorunları izlemek için bölümünüzde ilk <head> betik olması gerekir. Blazor Server App kullanıyorsanız, kod parçacığını bölümüne dosyanın _Host.cshtml en üstüne <head> ekleyin.

Sayfa görüntüleme olayı, uygulamanın hangi kod parçacığı sürümünü kullanıyor olduğunu izlemeye yardımcı olmak için sürüm 2.5.5'den başlayarak, tanımlanan kod parçacığı sürümünü içerecek yeni bir "ai.internal.snippet" etiketi içerir.

Geçerli Kod Parçacığı (aşağıda listelenmiştir) "5" sürümüdür, sürüm kod parçacığında sv:"#" olarak kodlanmıştır ve geçerli sürüm GitHub'dada kullanılabilir.

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

Not

Okunabilirlik ve olası JavaScript hatalarını azaltmak için tüm olası yapılandırma seçenekleri yukarıdaki kod parçacığı kodunda yeni bir satırda listelenir. Açıklama satırına yorum yapılan bir satırın değerini değiştirmek istemiyorsanız kaldırılabilir.

Raporlama Betiği yükleme hataları

Kod parçacığının bu sürümü, SDK'yı CDN'den Azure İzleyici portalına özel durum olarak yüklerken (hatalar özel durumlar tarayıcısı altında) hataları algılar ve raporlar. Bu özel durum, bu tür hataların görünürlüğünü sağlar. Bu nedenle, uygulamanıza beklendiği gibi telemetri (veya diğer özel > > durumlar) bildirmemektedir. Bu sinyal, SDK'nın yüklenmesi veya başlatılmamış olması nedeniyle telemetri verisini kaybetmeyi anlama açısından önemli bir ölçümdür ve şu durumlara yol açabilir:

Kullanıcıların sitenizi nasıl kullanmaya çalıştığı (veya kullanmaya çalıştığı) hakkında alt raporlama;
Son kullanıcılarının sitenizi nasıl kullanmakta olduğuyla ilgili telemetri eksik;
Son kullanıcılarınızı sitenizi başarıyla kullanmalarını engelliyor olabilecek JavaScript hataları eksik.

Bu özel durumla ilgili ayrıntılar için SDK yük hatası sorun giderme sayfasına bakın.

Bu hatanın portala özel durum olarak bildiriliyor olması uygulama içgörüleri yapılandırmasından yapılandırma seçeneğini kullanmaz ve bu nedenle bu hata oluşursa, window.onerror desteği devre dışı bırakılmıştır bile kod parçacığı tarafından her disableExceptionTracking zaman rapor eder.

SDK yük hatalarının bildirimi özellikle IE 8'de (veya daha az) destek sunmaz. Bu, çoğu ortamların yalnızca IE 8 veya daha küçük olmadığını varsayarak kod parçacığının minimum boyutunu azaltmaya yardımcı olur. Bu gereksiniminiz varsa ve bu özel durumları almak isterseniz, bir getirme poli dolgusu eklemeli veya yerine kullanan kendi kod parçacığı sürümünü oluşturmanız gerekir. Sağlanan kod parçacığı kaynak kodunu başlangıç noktası olarak XDomainRequest XMLHttpRequest kullanmanız önerilir.

Not

Kod parçacığının önceki bir sürümünü kullanıyorsanız, daha önce raporlenmemiş bu sorunları alamayabilirsiniz.

Kod parçacığı yapılandırma seçenekleri

Artık tüm yapılandırma seçenekleri, yanlışlıkla SDK'nın yüklenemediklerine yol açmayacak JavaScript hatalarının önüne geçerek hata raporlamasını devre dışı bırakmanıza yardımcı olmak için betiğin sonuna doğru ilerledi.

Her yapılandırma seçeneği yukarıda yeni bir satırda gösterilir. [isteğe bağlı] olarak listelenen bir öğenin varsayılan değerini geçersiz kılmak isterseniz döndürülen sayfa boyutunu en aza indirmek için bu satırı kaldırabilirsiniz.

Kullanılabilir yapılandırma seçenekleri şunlardır:

Ad	Tür	Description
src	string [required]	SDK'nın nereden yük dengelemesi için tam URL. Bu değer dinamik olarak eklenen bir betiğin /etiketinin "src" < özniteliği için > kullanılır. Genel CDN konumunu veya kendi özel olarak barındırılan CDN konumunu kullanabilirsiniz.
name	string [isteğe bağlı]	Başlatılan SDK'nın genel adı, varsayılan olarak olarak `appInsights` kullanılır. Bu `window.appInsights` nedenle, başlatılan örnek için bir başvuru olur. Not: Bir ad değeri sağlarsanız veya önceki bir örnek atanmış gibi görünürse (appInsightsSDK genel adı aracılığıyla) bu ad değeri genel ad alanı içinde olarak da tanımlanır. Doğru kod parçacığı iskeletini ve ara sunucu yöntemlerini başlatması ve güncelleştirmesini sağlamak için SDK başlatma kodu için bu `window.appInsightsSDK=<name value>` gereklidir.
Ld	ms sayısı [isteğe bağlı]	SDK'yı yüklemeden önce beklenilen yük gecikmeyi tanımlar. Varsayılan değer 0ms'tir ve herhangi bir negatif değer sayfanın baş bölgesine hemen bir betik etiketi ekler ve bu da betik yüklenene (veya başarısız olana) kadar sayfa yükleme < > olayı engellenir.
useXhr	boole [isteğe bağlı]	Bu ayar yalnızca SDK yük hatalarını raporlamak için kullanılır. Raporlama, varsa önce fetch() kullanmayı ve ardından XHR'ye geri dönüş yapmaya çalışırken, bu değeri true olarak ayarlayarak getirme denetimi atlanır. Bu değerin kullanımı yalnızca, uygulamanın getirmenin hata olaylarını gönderemedikleri bir ortamda kullanılıyorsa gereklidir.
crossOrigin	string [isteğe bağlı]	Bu ayar eklenmiştir ve SDK'yı indirmek için eklenen betik etiketi, bu dize değerine sahip crossOrigin özniteliğini içerir. Tanımlanmamışsa (varsayılan) hiçbir crossOrigin özniteliği eklenmez. Önerilen değerler tanımlanmamıştır (varsayılan); ""; veya "anonim" (Tüm geçerli değerler için bkz. HTML `crossorigin` özniteliği: belgeler)
Cfg	object [required]	Başlatma sırasında Application Insights SDK'ya geçirilen yapılandırma.

Bağlantı Dizesi Kurulumu

NPM veya Kod Parçacığı kurulumu için bağlantı dizesini kullanarak Application Insights örneğinizi de yapılandırabilirsiniz. Alanı instrumentationKey alanıyla değiştirmeniz connectionString gerekir.

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

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

Telemetri verileri Azure portal

Varsayılan olarak Application Insights JavaScript SDK'sı, uygulamanın ve temel alınan kullanıcı deneyiminin durumunu belirlemede yardımcı olan bir dizi telemetri öğelerini otomatik olarak bir arada kullanır. Bu modüller şunlardır:

Uygulamanıza ilişkin bilgiler de dahil olmak üzere yakalanmayan özel durumlar
- Yığın izlemesi
- Hataya eşlik eden özel durum ayrıntıları ve ileti
- Satır & sütun sayısı hatası
- Hatanın ortaya çıkar olduğu URL
Uygulama XHR'niz tarafından yapılan Ağ Bağımlılığı İstekleri ve Getirme (koleksiyonu getirme varsayılan olarak devre dışıdır) istekleri,
- Bağımlılık kaynağının URL'si
- Bağımlılık & için kullanılan Komut Satırı Yöntemi
- İsteğin süresi
- İsteğin sonuç kodu ve başarı durumu
- İstek yapan kullanıcının KIMLIĞI (varsa)
- İsteğin yapıldığı bağıntı bağlamı (varsa)
Kullanıcı bilgileri (örneğin, konum, ağ, IP)
Cihaz bilgileri (örneğin, tarayıcı, işletim sistemi, sürüm, dil, model)
Oturum bilgileri

Telemetri başlatıcıları

Telemetri başlatıcıları, kullanıcının tarayıcısından gönderilmeden önce toplanan telemetrinin içeriğini değiştirmek için kullanılır. Ayrıca, belirli telemetrinin gönderilmesini engellemek için de kullanılabilir false . Application Insights örneğinize birden çok telemetri başlatıcıları eklenebilir ve bunlar ekleme sırasında yürütülür.

İçin giriş bağımsız değişkeni, addTelemetryInitializer bir ITelemetryItem bağımsız değişken olarak bir veya döndüren bir geri çağırma olur boolean void . Geri döntakdirde false telemetri öğesi gönderilmez, aksi takdirde bir sonraki telemetri başlatıcısına devam eder veya telemetri toplama uç noktasına gönderilir.

Telemetri başlatıcılarının kullanılmasına bir örnek:

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

Yapılandırma

Çoğu yapılandırma alanı, varsayılan olarak false olarak ayarlanabilecek şekilde adlandırılır. Tüm alanlar, hariç olarak isteğe bağlıdır instrumentationKey .

Ad	Açıklama	Varsayılan
ınstrumentationkey	Gerekli Azure portal aldığınız izleme anahtarı.	string null
accountId	Uygulamanız kullanıcıları hesaplara gruplayan isteğe bağlı hesap KIMLIĞI. Boşluk, virgül, noktalı virgül, eşittir veya dikey çubuklar yok	string null
sessionRenewalMs	Kullanıcı bu süre boyunca devre dışı bırakılırsa, bir oturum günlüğe kaydedilir.	sayısal 1800000 (30 dakika)
sessionExpirationMs	Bu süre boyunca milisaniye cinsinden devam eden bir oturum günlüğe kaydedilir.	sayısal 86400000 (24 saat)
Maxbatchsizeınbytes	Telemetri toplu işinin en büyük boyutu. Bir toplu iş bu sınırı aşarsa, hemen gönderilir ve yeni bir toplu işlem başlatılır	sayısal 10000
Maxbatchınterval	Göndermeden önce toplu iş telemetrisi için ne kadar süre (milisaniye)	sayısal 15000
ExceptionTrackingdevre dışı bırak	True ise, özel durumlar tekrar toplanmamıştır.	boolean yanlış
Disabletelemetri	True ise telemetri toplanmaz veya gönderilmez.	boolean yanlış
enableDebug	True ise, iç hata ayıklama VERILERI, SDK günlüğü ayarlarından bağımsız olarak, günlüğe kaydedilmesi yerine bir özel durum olarak oluşturulur. Varsayılan değer false’tur. *Note:* Bu ayarın etkinleştirilmesi, bir iç hata oluştuğunda telemetri oluşmasına neden olur. Bu, yapılandırma veya SDK kullanımınız ile ilgili sorunları hızlı bir şekilde tanımlamak için yararlı olabilir. Hata ayıklama sırasında Telemetriyi kaybetmek istemiyorsanız, veya yerine kullanmayı düşünün `consoleLoggingLevel` `telemetryLoggingLevel` `enableDebug` .	boolean yanlış
loggingLevelConsole	İç Application Insights hatalarını konsola kaydeder. 0: kapalı, 1: yalnızca kritik hatalar, 2: her şey (hata & uyarı)	sayısal 0
Loggingleveltelemetri	İç Application Insights hatalarını telemetri olarak gönderir. 0: kapalı, 1: yalnızca kritik hatalar, 2: her şey (hata & uyarı)	sayısal 1
Diagnosticlogınterval	iç İç günlük kuyruğu için yoklama aralığı (MS cinsinden)	sayısal 10000
samplingPercentage	Gönderilecek olayların yüzdesi. Varsayılan değer 100 ' dir, yani tüm olaylar gönderilir. Büyük ölçekli uygulamalar için veri ucunu korumak isterseniz bunu ayarlayın.	sayısal 100
Oto Trackpagevisittime	True ise, bir PageView üzerinde, önceki belgelenmiş sayfanın görünüm süresi izlenir ve telemetri olarak gönderilir ve geçerli PageView için yeni bir Zamanlayıcı başlatılır. ' De adlı bir özel ölçüm olarak gönderilir `PageVisitTime` `milliseconds` ve Now () işlevi (varsa) ile (yeni tarih ()) ile döner. () artık (ıE8 veya daha az) kullanılamıyorsa getTime (). Varsayılan değer false’tur.	boolean yanlış
disableAjaxTracking	True ise, Ajax çağrıları tekrar toplanmamıştır.	boolean yanlış
disableFetchTracking	True ise, Fetch istekleri tekrar toplanmaz.	boolean true
overridePageViewDuration	True ise trackPageView'ın varsayılan davranışı, trackPageView çağrıldıysa sayfa görünümü süre aralığının sonunu kaydeden şekilde değiştirilir. trackPageView için false ve özel süre sağlanmazsa, sayfa görünümü performansı gezinti zamanlama API'si kullanılarak hesaplanır.	boolean
maxAjaxCallsPerView	Varsayılan 500 - Sayfa görünümü başına kaç Ajax çağrısının iz olacağını kontrol eder. Sayfada tüm (sınırsız) Ajax çağrılarını izlemek için -1 olarak ayarlayın.	sayısal 500
disableDataLossAnalysis	False ise, henüz gönderilmemiş öğeler için başlangıçta iç telemetri göndereni arabellekleri denetlenir.	boolean true
CorrelationHeadersdevre dışı bırakma	False ise SDK, tüm bağımlılık isteklerine iki üst bilgi ('Request-Id' ve 'Request-Context') ekler.	boolean yanlış
correlationHeaderExcludedDomains	Belirli etki alanları için bağıntı üst bilgilerini devre dışı bırakma	string[] Tanımsız
correlationHeaderExcludePatterns	Normal ifadeleri kullanarak bağıntı üst bilgilerini devre dışı bırakma	regex[] Tanımsız
correlationHeaderEtki Alanları	Belirli etki alanları için bağıntı üst bilgilerini etkinleştirme	string[] Tanımsız
disableFlushOnBeforeUnload	True ise, onBeforeUnload olay tetikleyicileri olduğunda flush yöntemi çağrılmayacak	boolean yanlış
enableSessionStorageBuffer	True ise, tüm telemetri verilerine sahip arabellek oturum depolamada depolanır. Arabellek sayfa yüklemesi üzerine geri yüklendi	boolean true
cookieCfg	Tanımlama bilgisi kullanımı etkin varsayılanlar için bkz. Tam varsayılanlar için ICookieCfgConfig ayarları.	ICookieCfgConfig (2.6.0'dan itibaren) Tanımsız
~~isCookieUseDisabled~~ disableCookiesUsage	True ise SDK tanımlama bilgilerini depolamaz veya tanımlama bilgilerinden veri okumaz. Bunun Kullanıcı ve Oturum tanımlama bilgilerini devre dışı bırakarak kullanım blade'lerini ve deneyimleri gereksiz hale getirir. isCookieUseDisable, disableCookiesUsage için kullanım dışı bırakılabilir; her ikisi de sağlanıyorsa disableCookiesUsage önceliklidir. (v2.6.0'dan itibaren) Ayrıca bu değerlerden öncelikli olduğu da `cookieCfg.enabled` tanımlanırsa, core.getCookieMgr().setEnabled(true) aracılığıyla tanımlama bilgisi kullanımı başlatmadan sonra yeniden etkinleştirilebilir.	için diğer ad `cookieCfg.enabled` yanlış
cookieDomain	Özel tanımlama bilgisi etki alanı. Bu, tanımlama bilgilerini alt etki Application Insights paylaşmak için yararlıdır. (v2.6.0'dan itibaren) `cookieCfg.domain` tanımlanırsa, bu değerden önceliklidir.	için diğer ad `cookieCfg.domain` null
Cookiepath	Özel tanımlama bilgisi yolu. Bu, bir uygulama ağ geçidinin arkasında Application Insights tanımlama bilgilerini paylaşmak için yararlıdır. `cookieCfg.path`tanımlanırsa, bu değerden önceliklidir.	için diğer ad `cookieCfg.path` (2.6.0'dan itibaren) null
isRetryDisabled	False ise, 206 (kısmi başarı), 408 (zaman aşımı), 429 (çok fazla istek), 500 (iç sunucu hatası), 503 (hizmet kullanılamıyor) ve 0 (yalnızca algılandığında çevrimdışı) üzerinde yeniden deneyin	boolean yanlış
isStorageUseDisabled	True ise, SDK yerel ve oturum depolamadan veri depolamaz veya okumaz.	boolean yanlış
isBeaconApiDisabled	False ise SDK, İşaret api'sini kullanarak tüm telemetrileri gönderir	boolean true
onunloadDisableBeacon	Sekme kapatılan SDK, Kalan tüm telemetrileri İşaret api'sini kullanarak gönderir	boolean yanlış
sdkExtension	SDK uzantısı adını ayarlar. Yalnızca alfabetik karakterlere izin verilir. Uzantı adı 'ai.internal.sdkVersion' etiketine ön ek olarak eklenir (örneğin, 'ext_javascript:2.0.0').	string null
isBrowserLinkTrackingEnabled	True ise SDK tüm Tarayıcı Bağlantısı isteklerini takip ediyor olur.	boolean yanlış
appId	AppId, istemci tarafında sunucu tarafı istekleriyle yapılan AJAX bağımlılıkları arasındaki bağıntı için kullanılır. İşaret api'si etkinleştirildiğinde otomatik olarak kullanılamaz, ancak yapılandırmada el ile ayarlanabilir.	string null
CorsCorrelation'u etkinleştirme	True ise SDK, giden AJAX bağımlılıklarını sunucu tarafında karşılık gelen isteklerle arasında ilişki oluşturmak için tüm CORS isteklerine iki üst bilgi ('Request-Id' ve 'Request-Context') ekler.	boolean yanlış
namePrefix	localStorage ve tanımlama bilgisi adı için ad son eki olarak kullanılacak isteğe bağlı bir değer.	string Tanımsız
AutoRouteİzlemeyietkinleştirme	Tek Sayfalı Uygulamalarda (SPA) rota değişikliklerini otomatik olarak izleme. True ise, her yol değişikliği yeni bir Sayfa görünümü Application Insights. Karma yol değişiklikleri ( `example.com/foo#bar` ) yeni sayfa görünümleri olarak da kaydedilir.	boolean yanlış
enableRequestHeaderTracking	True ise AJAX & Fetch isteği üst bilgileri izlendi.	boolean yanlış
enableResponseHeaderTracking	True ise AJAX & Fetch isteğinin yanıt üst bilgileri izlendi.	boolean yanlış
distributedTracingMode	Dağıtılmış izleme modunu ayarlar. Bir AI_AND_W3C veya W3C modu ayarlanırsa, W3C izleme bağlamı üst bilgileri (traceparent/tracestate) oluşturulur ve tüm giden isteklere dahil edilir. AI_AND_W3C, tüm eski ve eski ve araçlı hizmetlerle Application Insights için sağlanır. Örnek için buraya bakın.	`DistributedTracingModes`veya sayısal (v2.6.0'dan itibaren) `DistributedTracingModes.AI_AND_W3C` (v2.5.11 veya önceki sürümler) `DistributedTracingModes.AI`
AjaxErrorStatusTextetkinleştirme	True ise, başarısız AJAX isteklerinde bağımlılık olayına yanıt hatası veri metnini dahil etmek.	boolean yanlış
AjaxPerfTrackingetkinleştirme	Bildirilen (XHR ve getirme) ölçümlere ek tarayıcı penceresi.performans zamanlamaları ek olarak arama ve dahil etmek için `ajax` bayrak.	boolean yanlış
maxAjaxPerfLookupAttempts	Window.performance zamanlamalarını (varsa) en fazla kaç kez bakabilirsiniz? XHR isteğinin sonunu raporlamadan önce tüm tarayıcılar window.performance'ı doldurmakta ve getirme istekleri için bu durum tamamlandıktan sonra eklenmemektedir.	sayısal 3
ajaxPerfLookupDelay	Bir isteğin window.performance zamanlamalarını yeniden bulmaya çalışmadan önce bek süresi milisaniye cinsindendir ve `ajax` doğrudan setTimeout() içine geçirildi.	sayısal 25 ms
enableUnhandledPromiseRejectionİzleme	True ise, işlanmamış promise reddetmeleri otomatik olarak biriktir ve JavaScript hatası olarak raporulur. disableExceptionTracking true olduğunda (özel durumları izleme), yapılandırma değeri yoksayılır ve işlanmamış promise reddetmeleri raporlanmaz.	boolean yanlış
InstrumentationKeyDoğrulamasınıdevre dışı bırakma	True ise, ölçüm anahtarı doğrulama denetimi atlanır.	boolean yanlış
enablePerfMgr	Etkinleştirildiğinde (true) bu, perfEvents yayacak şekilde (doPerf() yardımcı aracılığıyla) İzlendi kod için yerel perfEvents'ler oluşturacak. Bu, kullanımınıza bağlı olarak veya isteğe bağlı olarak kendi araçlı kodunuz içinde SDK içindeki performans sorunlarını belirlemek için kullanılabilir. Temel belgelerde daha fazla ayrıntı bulabilirsiniz. v2.5.7'den itibaren	boolean yanlış
perfEvtsSendAll	enablePerfMgr etkinleştirildiğinde ve IPerfManager bir INotificationManager.perfEvent() komutu gönderdiğinde, bu bayrak bir olayın tüm olaylar için mi (ve tüm dinleyicilere gönderildiğinde) yoksa yalnızca 'parent' olayları için mi (yanlış varsayılan) olduğunu < > belirler. Üst IPerfEvent, bu olayın oluşturulma noktasında başka bir IPerfEvent'in hala çalışmamış olduğu ve üst özelliğinin null veya tanımsız olduğu bir olaydır. v2.5.7'den itibaren	boolean yanlış
idLength	Yeni rastgele oturum ve kullanıcı kimliği değerleri oluşturmak için kullanılan varsayılan uzunluğu tanımlar. Varsayılan değer 22'dir, önceki varsayılan değer 5 'tir (v2.5.8 veya daha düşük), önceki maksimum uzunluğu tutmanız gerekirse bu değeri 5 olarak ayarlayıştır.	sayısal 22

2.6.0 sürümünden itibaren tanımlama bilgisi yönetimi artık doğrudan örnekten kullanılabilir ve başlatma sonrasında devre dışı bırakılabilir ve yeniden etkinleştirilebilir.

Veya yapılandırmaları aracılığıyla başlatma sırasında disableCookiesUsage devre cookieCfg.enabled dışı bırakıldıysanız, artık ICookieMgr işlevi aracılığıyla yeniden setEnabled etkinleştirebilirsiniz.

Örnek tabanlı tanımlama bilgisi yönetimi, , ve 'nin önceki CoreUtils genel disableCookies() işlevlerini setCookie(...) de getCookie(...) deleteCookie(...) değiştirir. Ayrıca, sürüm 2.6.0'ın bir parçası olarak da tanıtilen ağaç sallayarak iyileştirmelerden yararlanmak için artık genel işlevleri kullanmamalısiniz.

ICookieMgrConfig

Örnek tabanlı tanımlama bilgisi yönetimi için Tanımlama Bilgisi Yapılandırması sürüm 2.6.0'a eklendi.

Ad	Açıklama	Tür ve Varsayılan
enabled	SDK tarafından tanımlama bilgilerinin kullanımının geçerli örnek tarafından etkinleştirilip etkinleştirilmemiş olduğunu belirten bir boole değeri. False ise, bu yapılandırma tarafından başlatılan SDK örneği tanımlama bilgilerini depolamaz veya tanımlama bilgilerinden veri okumaz	boolean true
etki alanı	Özel tanımlama bilgisi etki alanı. Bu, tanımlama bilgilerini alt etki Application Insights paylaşmak için yararlıdır. Sağlanmazsa, kök değerden değeri `cookieDomain` kullanır.	string null
path	Sağlanmazsa, kök değerden herhangi bir değer kullanırsa tanımlama bilgisi için kullanmak üzere yolu `cookiePath` belirtir.	string /
getCookie	Sağlanmazsa adlandırılmış tanımlama bilgisi değerini getirme işlevi, iç tanımlama bilgisi ayrıştırma/önbelleğe alma özelliğini kullanır.	`(name: string) => string` null
Setcookie	Adlandırılmış tanımlama bilgisini belirtilen değerle ayarlama işlevi, yalnızca tanımlama bilgisini eklerken veya güncelleştirerek çağrılır.	`(name: string, value: string) => void` null
delCookie	Adlandırılmış tanımlama bilgisini, belirtilen değere sahip, setCookie ile ayrılmış olarak silmek için işlev, tanımlama bilgisinin eklenip eklenmeyeceğini veya kaldırılıp kaldırılmadığını belirleme gereksinimini ortadan kaldırmak için. Sağlanmazsa, iç tanımlama bilgisi ayrıştırma/önbelleğe alma kullanılır.	`(name: string, value: string) => void` null

appınsights. Gettanımlama bilgisi EMGR (). SetEnabled (true/false);
appınsights. GetCookie EMGR (). set ("MyCookie", "% 20encoded% 20value");
appınsights. GetCookie EMGR (). Get ("MyCookie");
appınsights. GetCookie EMGR (). del ("MyCookie");

Sayfa üzerinde zamanı izlemeyi etkinleştir

Ayar olarak autoTrackPageVisitTime: true , bir kullanıcının her sayfada harcadığı zaman izlenir. Yeni bir sayfa görünümünde, önceki sayfada harcanan sürenin adlı özel ölçüm olarak gönderildiği süre PageVisitTime . Bu özel ölçüm, Ölçüm Gezgini "günlük tabanlı ölçüm" olarak görüntülenebilir.

Bağıntıyı etkinleştir

Bağıntı, dağıtılmış izlemeyi sağlayan ve uygulama Haritası, uçtan uca işlem görünümüve diğer tanılama araçlarını destekleyen verileri oluşturur ve gönderir.

Aşağıdaki örnek, aşağıdaki senaryoya özgü notlarla bağıntı sağlamak için gereken tüm olası konfigürasyonları göstermektedir:

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

İstemcinin iletişim kurduğu üçüncü taraf sunuculardan herhangi biri Request-Id ve Request-Context üst bilgileri kabul edemez ve yapılandırmalarını güncelleştiremezsiniz, bunları yapılandırma özelliği aracılığıyla dışlama listesine koymanız gerekir correlationHeaderExcludedDomains . Bu özellik joker karakterleri destekler.

Sunucu tarafı, bu üst bilgilerle bağlantıları kabul edebilmelidir. Access-Control-Allow-HeadersSunucu tarafında yapılandırmaya bağlı olarak, genellikle ve el ile ekleyerek sunucu tarafı listesini genişletmek gereklidir Request-Id Request-Context .

Erişim-denetim-Izin-üst bilgiler: Request-Id , Request-Context , <your header>

Not

2020 veya sonraki sürümlerde yayınlanan OpenTelemtry veya Application Insights SDK 'Ları kullanıyorsanız, WC3 TraceContextkullanmanızı öneririz. Yapılandırma kılavuzunu buradangörebilirsiniz.

Tek sayfalı uygulamalar

Varsayılan olarak, bu SDK tek sayfalı uygulamalarda oluşan durum tabanlı yol değiştirmeyi işlemez. Tek sayfalı uygulamanız için otomatik yönlendirme değişikliği izlemeyi etkinleştirmek için, enableAutoRouteTracking: true Kurulum yapılandırmanıza ekleyebilirsiniz.

Şu anda, bu SDK ile başlatabilmeniz için ayrı bir yanıt verme eklentisisunuyoruz. Ayrıca, sizin için yol değişikliği izlemeyi da gerçekleştirecek ve diğer tepki verme açısından özel telemetri toplayacaktır.

Not

enableAutoRouteTracking: trueYalnızca tepki verme eklentisini kullanmıyorsanız kullanın. Her ikisi de yol değiştiğinde yeni PageViews gönderebilir. Her ikisi de etkinse, yinelenen PageViews gönderilebilir.

Uzantılar

Uzantılar
React
React Native
Angular
Analiz otomatik koleksiyonu ' na tıklayın

Tarayıcı/istemci tarafı verilerini keşfet

Bir tarayıcı/istemci tarafı verileri, ölçümler 'e giderek ve ilgilendiğiniz ölçümleri tek bir ekleyerek görüntüleyebilirsiniz:

Bir Web uygulaması için ölçüm verilerinin grafik görünümünü gösteren Application Insights ölçümler sayfasının ekran görüntüsü.

Ayrıca, portaldaki tarayıcı deneyimi aracılığıyla JavaScript SDK 'sindeki verilerinizi görüntüleyebilirsiniz.

Tarayıcı ' yı seçin ve ardından hatalara veya performans' ı seçin.

Web uygulamanız için görüntüleyebileceğiniz ölçülere tarayıcı hatalarının veya tarayıcı performansının nasıl ekleneceğini gösteren Application Insights tarayıcı sayfasının ekran görüntüsü.

Performans

Bir Web uygulaması için Işlem ölçümlerinin grafik ekranların gösterildiği Application Insights performans sayfasının ekran görüntüsü.

Bağımlılıklar

Bir Web uygulaması için bağımlılık ölçümlerinin grafik görüntülenmesini gösteren Application Insights performans sayfasının ekran görüntüsü.

Analiz

JavaScript SDK 'Sı tarafından toplanan telemetrinizi sorgulamak için Günlükler (Analiz) Içinde görüntüle düğmesini seçin. Bir ifadesini ekleyerek where client_Type == "Browser" yalnızca JavaScript SDK 'dan verileri görürsünüz ve diğer SDK 'lar tarafından toplanan tüm sunucu tarafı telemetri hariç tutulur.

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

Kaynak eşleme desteği

Özel durum telemetrinizin mini ' çağrı yığını 'i Azure Portal için küçültülmüş olabilir. Özel durum ayrıntıları panelindeki tüm mevcut tümleştirmeler, yeni bir küçültülmüş Callstack ile birlikte çalışacaktır.

BLOB depolama hesabı bağlantısı

Çağrı yığınlarını otomatik olarak kaldırmak için Application Insights kaynağınızı kendi Azure Blob depolama kapsayıcınıza bağlayabilirsiniz. Başlamak için bkz. otomatik kaynak eşleme desteği.

Sürükleyip bırakma

"Uçtan uca işlem ayrıntılarını" görüntülemek için Azure portal bir özel durum telemetrisi öğesi seçin
Hangi kaynak haritalarının bu çağrı yığınına karşılık geldiğini belirler. Kaynak eşlemesinin bir yığın çerçevesinin kaynak dosyasıyla eşleşmesi gerekir, ancak şununla sondan düzeltildi .map
Kaynak haritalarını,

Application Insights Web temel

Hafif bir deneyim için Application Insights temel sürümünü yükleyebilirsiniz

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

Bu sürüm, en az özellik ve işlevlere sahiptir ve uygun gördüğünüz şekilde oluşturmak için size dayanır. Örneğin, hiçbir yeniden koleksiyon (yakalanamayan özel durumlar, AJAX vb.) yoktur. , Vb. gibi belirli telemetri türlerini göndermek için API 'Ler trackTrace trackException Bu sürüme dahil değildir, bu nedenle kendi sarmalayıcı sağlamanız gerekir. Kullanılabilir tek API track . Örnek burada bulunur.

Örnekler

Çalıştırılabilir örnekler için bkz. JAVASCRIPT SDK örnekleri Application Insights.

Application Insights eski sürümünden yükseltme

SDK v2 sürümündeki son değişiklikler:

Daha iyi API imzaları sağlamak için, trackPageView ve trackException gibi bazı API çağrılarından bazıları güncelleştirilmiştir. Internet Explorer 8 ve tarayıcının önceki sürümlerinde çalıştırmak desteklenmez.
Telemetri zarfı, veri şeması güncelleştirmeleri nedeniyle alan adı ve yapı değişikliklerine sahiptir.
Taşındı context.operation context.telemetryTrace . Bazı alanlar da değiştirildi ( operation.id --> telemetryTrace.traceID ).
- Geçerli sayfa görüntülemesi kimliğini (örneğin, spa uygulamalarında) el ile yenilemek için kullanın appInsights.properties.context.telemetryTrace.traceID = Microsoft.ApplicationInsights.Telemetry.Util.generateW3CId() .
  
  Not
  
  Daha önce kullandığınız izleme KIMLIĞINI benzersiz tutmak için Util.newId() artık ' i kullanın Util.generateW3CId() . Her iki sonuç de işlem KIMLIĞI ' ni sonlandırın.

Geçerli Application Insights ÜRETIM SDK 'sını (1.0.20) kullanıyorsanız ve yeni SDK 'nın çalışma zamanında çalışıp çalışmadığını görmek istiyorsanız, URL 'YI geçerli SDK yükleme senaryonuza bağlı olarak güncelleştirin.

CDN senaryosu aracılığıyla indir: Şu anda kullandığınız kod parçacığını aşağıdaki URL 'ye işaret etmek için güncelleştirin:
```
"https://js.monitor.azure.com/scripts/b/ai.2.min.js"
```

NPM senaryosu: downloadAndSetup CDN 'den tam ApplicationInsights betiğini indirme ve izleme anahtarıyla başlatma çağrısı:

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

İzleme telemetrinin beklendiği gibi çalıştığını doğrulamak için dahili ortamda test edin. Tümü çalışırsa, API imzalarınızı SDK v2 sürümüne uygun şekilde güncelleştirin ve üretim ortamlarınızda dağıtın.

SDK performansı/ek yükü

Yalnızca 36 KB gdaraltılmış ve yalnızca ~ 15 MS 'yi başlatmak için Application Insights, Web sitenize daha fazla sayıda loadtime ekler. Kod parçacığını kullanarak, kitaplığın minimum bileşenleri hızlı bir şekilde yüklenir. Bu sırada, tam komut dosyası arka planda indirilir.

Betik CDN 'den indirilirken, sayfanızın tüm izlenmesi sıraya alınır. İndirilen betik zaman uyumsuz olarak başlatıldıktan sonra, kuyruğa alınan tüm olaylar izlenir. Sonuç olarak, sayfanızın tüm yaşam döngüsü boyunca hiçbir Telemetriyi kaybetmezsiniz. Bu kurulum işlemi, sayfanıza, kullanıcılarınız için görünmeyen sorunsuz bir analiz sistemi sağlar.

Özet:

15 MS genel başlatma süresi

Sayfanın yaşam döngüsü boyunca sıfır izleme kaçırıldı

Tarayıcı desteği


Chrome En Son ✔	Firefox En son ✔	IE 9+ & Edge ✔ IE 8- Uyumlu	Opera En Son ✔	Safari En son ✔

ES3/IE8 Uyumluluğu

SDK olarak, müşterilerinin kullanabileceği tarayıcıları kontrol etmek için kullanabileceğiniz çok sayıda kullanıcı vardır. Bu nedenle, bu SDK'nın "çalışmaya" devam ettiği ve daha eski bir tarayıcı tarafından yüklendiğinde JS yürütmeyi bozmayacak şekilde emin olunması gerekir. IE8 ve eski nesil (ES3) tarayıcıları desteklemeyebilirsiniz ancak sayfaların "çalışması" gerektirmektedir ve son kullanıcılarının hangi tarayıcıyı kullanmayı seçeceklerini kontrol etmek mümkün veya mümkün değildir.

Bu, yalnızca ES3 kod uyumluluğunu korumamız ve yeni özellikler eklerken ES3 JavaScript ayrıştırmayı bozmayacak ve isteğe bağlı bir özellik olarak eklenecektir.

IE8 desteğiyle ilgili tüm ayrıntılar için bkz. GitHub

Açık kaynak SDK

JavaScript SDK Application Insights kaynak kodunu görüntülemek veya projeye katkıda bulunmak için resmi GitHub deposunu ziyaret etmek üzere açık kaynaktır.

En son güncelleştirmeler ve hata düzeltmeleri için sürüm notlarına danışın.