Application Insights JavaScript SDK sorunlarını giderme
Bu makalede Application Insights JavaScript SDK'sını içeren çeşitli sorunların nasıl giderılacağı açıklanır. Bu makaledeki konular Arasında JavaScript web uygulamaları için SDK yükleme hatası ve JavaScript uygulamaları için kaynak eşleme desteği yer alır.
JavaScript web uygulamaları için SDK yükleme hatası sorunlarını giderme
Aşağıdaki bölümlerde JavaScript web uygulamaları için belirli bir SDK yük hatası senaryosuna yönelik belirtiler, nedenler ve çözümler açıklanmaktadır.
Belirtiler
<İzlediğiniz web sayfasının baş> öğesinde, JavaScript kod parçacığı (sürüm 3 veya sonraki bir sürüm), SDK betiğinin indirilmedi veya başlatılmadığını algıladığında aşağıdaki özel durumu oluşturur ve bildirir:
SDK YÜK Hatası: Application Insights SDK betiği yüklenemedi (Ayrıntılar için bkz. yığın)
Bu ileti, kullanıcının istemcisinin (tarayıcı) Application Insights SDK'sını indiremadığını veya tanımlanan barındırma sayfasından başlatamadığını gösterir. Bu nedenle, herhangi bir telemetri veya olay görmezsiniz.
Not
Bu özel durum, API'yi veya XMLHttpRequestdestekleyen fetch() tüm ana tarayıcılarda desteklenir. Bu tarayıcı sürümleri Microsoft Internet Explorer 8 ve önceki sürümleri hariç tutar. Bu nedenle, ortamınız bir getirme çok dolgusu içermediği sürece bu tarayıcılar bu tür bir özel durumu raporlamaz.
Yığın ayrıntıları, kullanıcı tarafından kullanılan URL'ler hakkında temel bilgileri içerir.
| Name | Açıklama |
|---|---|
| <CDN Uç Noktası> | SDK'nın indirilmesi için kullanılan (ve başarısız olan) URL. |
| <Yardım Bağlantısı> | Sorun giderme belgelerine (bu sayfa) bağlanan BIR URL. |
| <Konak URL'si> | Kullanıcının kullandığı sayfanın tam URL'si. |
| <Uç Nokta URL'si> | Özel durumu bildirmek için kullanılan URL. Bu değer, genel İnternet'in mi yoksa özel bulut mu barındırma sayfasına erişip erişmediğini belirlemeye yardımcı olabilir. |
Aşağıdaki liste, bu özel durumun oluşmasının en yaygın nedenlerini içerir:
Aralıklı ağ bağlantısı hatası
Application Insights content delivery network (CDN) kesintisi
Betiği yükledikten sonra SDK başlatma hatası
Application Insights JavaScript CDN'sinin engellenmesi
Özellikle mobil dolaşım senaryolarında bu özel durumun en yaygın nedeni aralıklı ağ bağlantısı hatasıdır.
Aşağıdaki bölümlerde, bu hatanın olası kök nedenlerinin nasıl giderılacağı açıklanır.
Not
Bu adımlardan bazıları, uygulamanızın Kod Parçacığı <betiği /> etiketi ve barındırma HTML sayfasının bir parçası olarak döndürülen yapılandırmasının doğrudan denetimine sahip olduğunu varsayar. Bu koşullar senaryonuz için geçerli değilse, bu adımlar da geçerli değildir.
Neden 1: Aralıklı ağ bağlantısı hatası
Kullanıcı aralıklı ağ bağlantısı hatalarıyla karşılaşırsa, diğer nedenlere göre daha az olası çözüm vardır. Ancak, bu hata genellikle kendini hızlı bir şekilde çözer. Örneğin, kullanıcı sitenizi yeniden yüklemek için sayfayı yenilerse, dosyalar sonunda güncelleştirilmiş bir sürümün yayımlanmasına kadar indirilir ve yerel olarak önbelleğe alınır.
Çözüm 1a: SDK'nın güncelleştirilmiş bir sürümünü indirme
Aralıklı ağ bağlantısı hatasını en aza indirmek için tüm CDN dosyalarına üst bilgiler uyguladık Cache-Control . Kullanıcının tarayıcısı SDK'nın geçerli sürümünü indirdikten sonra, daha önce elde edilen kopyayı yeniden kullanacağından yeniden indirmesi gerekmez. (Bkz . önbelleğe alma nasıl çalışır.) Önbelleğe alma denetimi başarısız olursa veya yeni bir sürüm varsa, kullanıcının tarayıcısının güncelleştirilmiş sürümü indirmesi gerekir. Bu nedenle, denetim hatası senaryosunda arka plan düzeyinde "kirlilik" görebilirsiniz. Ya da yeni bir sürüm gerçekleştiğinde ve genel kullanıma sunulduğunda (CDN'ye dağıtıldığında) geçici bir ani artış görebilirsiniz.
Çözüm 1b: SDK'yi uygulamayla birlikte tek bir pakete eklemek için npm paketlerini kullanma
SDK yük hatası özel durumu kalıcı mı ve normal istemci telemetrisinde azalmayla birlikte birçok kullanıcı için mi oluşuyor? Bu durumda, aralıklı ağ bağlantısı sorunları büyük olasılıkla sorunun gerçek nedeni değildir ve diğer olası nedenleri incelemeniz gerekir.
Not
Bu hatanın birden çok kullanıcı için oluştuğunun yaygın bir göstergesi, özel durumun hızlı ve sürekli bir düzeyde bildirildiğidir.
Bu durumda SDK'yı kendi CDN'nizde barındırmak, bu özel durumun oluşumlarını sağlama veya azaltma olasılığı düşüktür. Aynı sorun kendi CDN'nizi etkiler ve SDK'yi bir npm paket çözümü aracılığıyla kullanırsanız da oluşur. Hatanın bu paketlerden en az birinde gerçekleşmesi garanti edildiğinden, özellikle Application Insights izlenen uygulamanın paketinden farklı bir pakete dahil edilirse ikinci senaryonun başarısız olması oluşur. Kullanıcı açısından bakıldığında, bu özel durum oluştuğunda uygulamanızın tamamı yalnızca telemetri SDK'sını değil (kullanıcıların görmediği) yüklenemez veya başlatılamaz. Bu nedenle, kullanıcılar büyük olasılıkla sitenizi tamamen yüklenene kadar yenilemeye devam edecektir.
Application Insights SDK'sını izlenen uygulamayla birlikte tek bir pakete eklemek için npm paketlerini kullanmayı deneyebilirsiniz. Bu senaryoda aralıklı bir hata oluşmaya devam edebilir ancak birleştirilmiş paket sorunu çözmek için gerçek bir şans sunar.
Neden 2: Application Insights CDN kesintisi
Application Insights CDN kesintisi olduğunu doğrulamak için CDN uç noktasına doğrudan tarayıcıdan kullanıcılarınızdan farklı bir konumdan erişmeyi deneyin. Örneğin, kendi geliştirme bilgisayarınızdan erişmeyi https://js.monitor.azure.com/scripts/b/ai.2.min.js deneyebilirsiniz. (Bu, kuruluşunuzun bu etki alanını engellemediğini varsayar.)
Çözüm 2: Destek bileti oluşturma
Kesinti olduğunu doğrularsanız yeni bir destek bileti oluşturabilirsiniz.
Neden 3: Betik yüklendikten sonra SDK başlatılmadı
SDK başlatılmazsa, </> betiği CDN'den başarıyla indirilir, ancak başlatma sırasında başarısız olur. Bu hata, eksik veya geçersiz bağımlılıklar nedeniyle ya da javascript özel durumunun bir biçimi nedeniyle oluşur.
Çözüm 3: Başarılı bir SDK indirmesi veya JavaScript özel durumları olup olmadığını denetleyin veya tarayıcı hata ayıklamasını etkinleştirin
1. Adım: Başarılı bir SDK indirmesi olup olmadığını denetleme
SDK'nın başarıyla indirilip indirilmediğini denetleyin. Hiçbir betik indirme işlemi gerçekleşmediyse, SDK yükleme hatası özel durumunun nedeni bu senaryo değildir. Geliştirici araçlarını destekleyen bir tarayıcı kullanın. Geliştirici araçlarını görüntülemek için F12'yi seçin ve ardından Ağ sekmesini seçin. src kod parçacığı yapılandırmasında tanımlanan betiğin indirildiğini doğrulayın. Bunu yapmak için yanıt kodunu 200 (başarılı) veya 304 (değiştirilmedi) denetleyin. Ağ trafiğini gözden geçirmek için Fiddler gibi bir web hata ayıklama aracı da kullanabilirsiniz.
SDK başarıyla indirilemediyse, farklı raporlama seçeneklerini anlamak için aşağıdaki tabloyu gözden geçirin.
| Senaryo | Neden | Eylem |
|---|---|---|
| Bu sorun yalnızca birkaç kullanıcıyı ve belirli bir tarayıcı sürümünü veya tarayıcı sürümlerinin bir alt kümesini etkiler. (Bildirilen özel durumla ilgili ayrıntıları denetleyin.) | Bu sorun, büyük olasılıkla belirli kullanıcılar veya ortamlar uygulamanızın ek polyfill uygulamalar sağlamasını gerektiriyorsa geçerlidir. |
GitHub'da bir sorun oluşturun. |
| Bu sorun uygulamanızın tamamını ve tüm kullanıcılarınızı etkiler. | Bu sürümle ilgili bir sorundur. | Yeni bir destek bileti oluşturun. |
SDK başarıyla indirildiyse, SDK başlatma sorununu düzeltmeye yardımcı olmak için aşağıdaki bölümleri gözden geçirin.
2. Adım: JavaScript özel durumlarını denetleme
JavaScript özel durumlarını denetleyin. Geliştirici araçlarını destekleyen bir tarayıcı kullanın. Geliştirici araçlarını görüntülemek için F12'yi seçin, sayfayı yükleyin ve ardından özel durum olup olmadığını denetleyin. SDK betiği (örneğin, ai.2.min.js) özel durumlara neden oluyor mu? Bu durumda, aşağıdaki senaryolardan biri oluştu:
SDK'ya geçirilen yapılandırma beklenmeyen bir yapılandırma içeriyor.
SDK'ya geçirilen yapılandırmada gerekli bir yapılandırma eksik.
CDN'ye hatalı bir sürüm dağıtıldı.
Hatalı yapılandırmayı denetlemek için kod parçacığına geçirilen yapılandırmayı değiştirin (bunu henüz yapmadıysanız), dize değeri olarak yalnızca izleme anahtarınızı içermesi için. Aşağıdaki kodda örnek kod parçacığı yapılandırma değişikliği gösterilmektedir.
Not
İzleme anahtarı alımı desteği 31 Mart 2025'te sona eriyor. İzleme anahtarı alımı çalışmaya devam edecek, ancak artık özellik için güncelleştirmeler veya destek sağlamayacağız. Yeni özelliklerden yararlanmak için bkz. Bağlantı dizelerine geçiş.
<script type="text/javascript">
...
src: "https://js.monitor.azure.com/scripts/b/ai.2.min.js",
cfg: {
instrumentationKey: "<instrumentation-key-guid>"
}});
</script>
Bu en düşük yapılandırmayı kullandığınızda SDK betiğinde hala javascript özel durumu görüyorsanız yeni bir destek bileti oluşturun. Sorunu düzeltmek için hatalı derlemeyi geri almanız gerekir. Bunun nedeni, sorunun büyük olasılıkla yeni dağıtılan bir sürüm olmasıdır.
Özel durum kaybolursa, büyük olasılıkla soruna bir tür uyuşmazlığı veya beklenmeyen değer neden oluyordur. Yapılandırma seçeneklerinizi birer birer geri yükleyerek sorun gidermeye başlayın ve özel durum yeniden gerçekleşene kadar her değişiklik sonrasında test edin. Ardından, soruna neden olan öğenin belgelerine bakın. Belgeler belirsizse veya yardıma ihtiyacınız varsa GitHub'da bir sorun oluşturun.
Yapılandırmanız daha önce dağıtıldı ve çalıştı, ancak şimdi bu özel durumu bildiriliyor mu? Bu durumda, yeni dağıtılan bir sürümü etkileyen bir sorun olabilir. Özel durumun yalnızca küçük bir kullanıcı veya tarayıcı kümesini etkileyip etkilemediğini denetleyin. GitHub'da bir sorun oluşturun veya yeni bir destek bileti oluşturun.
3. Adım: Tarayıcı konsolu hata ayıklamasını etkinleştirme
Hiçbir özel durum oluşmadıysa, aşağıdaki kod parçacığı yapılandırma örneğinde gösterildiği gibi logLevelConsole ayarını yapılandırmaya ekleyerek konsol hata ayıklamasını etkinleştirmeniz gerekir. Bu değişiklik, tüm başlatma hatalarını ve uyarılarını tarayıcının konsoluna gönderir. (Tarayıcı konsolunu görüntülemek için F12'yi seçerek geliştirici araçlarını açın ve ardından Konsol sekmesini seçin.) Bildirilen hatalar açıklayıcı olmalıdır. Daha fazla yardıma ihtiyacınız varsa GitHub'da bir sorun oluşturun.
<script type="text/javascript">
...
src: "https://js.monitor.azure.com/scripts/b/ai.2.min.js",
cfg: {
instrumentationKey: "<instrumentation-key-guid>",
loggingLevelConsole: 2
}});
</script>
Not
Başlatma sırasında SDK, bilinen ana bağımlılıklar için bazı temel denetimler yapar. Geçerli çalışma zamanı bu denetimleri sağlamazsa, çalışma zamanı hataları konsola uyarı iletileri olarak bildirir (ancak yalnızca ayar değeri sıfırdan büyükse loggingLevelConsole ).
SDK hala başlatılmıyorsa enableDebug yapılandırma ayarını etkinleştirmeyi deneyin. Bu değişikliği yaptıktan sonra tüm iç hatalar özel durum olarak oluşturulur. Bu, telemetri kaybına neden olur. Bu ayar yalnızca geliştiricilere yönelik olduğundan, büyük olasılıkla iç denetimler nedeniyle daha fazla özel durumun alınmasına neden olur. SDK'nın başarısız olmasına neden olan sorunu belirlemek için her özel durumu gözden geçirin. Betiğin (dosya adı uzantısını .min.js'den yalnızca .js) değiştirerek) unminified sürümünü kullanın. Aksi takdirde, özel durumlar okunamaz. Aşağıdaki kod, örnek kod parçacığı yapılandırma değişikliklerini gösterir.
Uyarı
Bu yalnızca geliştirici ayarı tam üretim ortamında ASLA etkinleştirilmemelidir çünkü bunu yapmak telemetriyi kaybetmenize neden olur.
<script type="text/javascript">
...
src: "https://js.monitor.azure.com/scripts/b/ai.2.js",
cfg:{
instrumentationKey: "<instrumentation-key-guid>",
enableDebug: true
}});
</script>
Bu eylem hala içgörü sağlamıyorsa, ayrıntıları ve kullanıyorsanız örnek bir site sağlayarak GitHub'da bir sorun oluşturmanız gerekir. Sorunu tanımlamaya yardımcı olmak için tarayıcı sürümü, işletim sistemi ve JavaScript çerçevesi ayrıntılarını ekleyin.
Neden 4: Application Insights JavaScript CDN'sinin engellenmesi
Application Insights JavaScript SDK'sı CDN uç noktası bildirilirse veya güvenli değil olarak tanımlanırsa CDN engellenmesi mümkündür. Bu durumda uç nokta genel olarak engellenenler listesine eklenir ve bu listelerin tüketicileri tüm erişimi engellemeye başlar.
Bu sorunu çözmek için CDN uç noktasının sahibi, uç noktayı güvenli değil olarak işaretleyen blok listesi varlığıyla çalışmalıdır. Ardından, blok listesi varlığı uç noktayı ilgili listeden kaldırabilir.
CDN uç noktasını güvenli olmayan olarak tanımlayıp tanımlamadıklarını öğrenmek için aşağıdaki internet güvenliği web sitelerini denetleyin:
Bu sorunun çözülmesi uzun sürebilir. Kullanıcıların veya kurumsal BT departmanlarının bir güncelleştirmeyi zorlaması veya CDN uç noktalarına açıkça izin vermeleri gerekebilir. Bu sorunu çözmek için gereken toplam süre, listelerin yerel kopyalarını güncelleştirmek için uygulamanın, güvenlik duvarının veya ortamın gerektirdiği sıklık düzeyine bağlıdır.
CDN uç noktası güvenli değil olarak tanımlanırsa, sorunu en kısa sürede çözmek için bir destek bileti oluşturun .
Aşağıdaki bölümlerde bir engellemenin nasıl gerçekleşebileceği ve tıkanıklığı nasıl düzeltebileceğiniz daha ayrıntılı bir şekilde açıklanmaktadır.
Neden 4a: Kullanıcı engellemesi (tarayıcı, yüklü engelleyici veya kişisel güvenlik duvarı)
Kullanıcılarınızın aşağıdaki yapılandırma eylemlerinden herhangi birini gerçekleştirip gerçekleştirmediğini denetleyin:
Bir tarayıcı eklentisi yüklendi (genellikle reklam, kötü amaçlı yazılım veya açılır pencere engelleyici biçiminde)
Tarayıcılarında veya ara sunucularında Application Insights CDN uç noktaları engellendi veya izin verilmedi
SDK için CDN etki alanının engellenmesine (veya DNS girişinin çözümlenememesine) neden olan bir güvenlik duvarı kuralı yapılandırıldı
Çözüm 4a: CDN uç noktaları için blok listesi özel durumları ekleme
Kullanıcılarınız listelenen yapılandırma eylemlerinden herhangi birini gerçekleştirdiyse, CDN uç noktalarına izin vermek için bunlarla çalışın (veya belge sağlayın).
Kullanıcılar genel blok listesini kullanan eklentiler yüklemiş olabilir. Aksi takdirde, büyük olasılıkla el ile yapılandırılmış başka bir çözüm kullanıyorlardır veya eklentiler özel bir etki alanı blok listesi kullanıyordur.
Kullanıcılarınıza, uç noktaları tarayıcılarının eklenti veya güvenlik duvarı kuralı özel durum listesine ekleyerek Application Insights CDN uç noktalarındaki betiklerin indirilmesine izin vermelerini söyleyin. Bu listeler kullanıcı ortamına göre değişiklik gösterir.
Google Chrome'un web sitelerine erişime izin verecek veya erişimi engelleyecek şekilde nasıl yapılandırıldığını gösteren bu duruma bir örnek aşağıda verilmiştır.
Neden 4b: Kurumsal güvenlik duvarı engeli
Kullanıcılarınız bir şirket ağındaysa, şirket güvenlik duvarı büyük olasılıkla CDN engellemesinin kaynağıdır. Kurumsal BT departmanı büyük olasılıkla bir tür İnternet filtreleme sistemi uygulamıştır.
Çözüm 4b1: Kuruluşlar için CDN uç noktaları için özel durumlar ekleme
Önemli
Kullanıcılarınız özel bulut kullanıyor mu ve genel İnternet'e erişimi yok mu? Bu durumda, SDK'yı eklemek için Application Insights npm paketlerini kullanmanız veya Application Insights SDK'sını kendi CDN'nizde barındırmanız gerekir.
Kullanıcılarınız için gerekli kurallara izin vermek için şirketinizin BT departmanıyla birlikte çalışın. Bu çözüm , kullanıcılar için özel durumlar eklemeye benzer. BT departmanının Application Insights CDN uç noktalarını herhangi bir etki alanı engelleme listesine veya izin verilenler listesine ekleyerek (veya kaldırarak) indirme için yapılandırmasını sağlayın.
Çözüm 4b2: SDK'yi kendi CDN'nizde barındırma
Kullanıcıların Application Insights SDK'sını genel CDN'den indirmesini yerine Application Insights SDK'sını kendi CDN uç noktanızda barındırabilirsiniz. Hangi sürümü kullandığınızı belirlemeyi kolaylaştırmak için SDK'nın belirli bir sürümünü (ai.2.#.#.min.js) kullanmanızı öneririz. Ayrıca, kullanılabilir duruma gelen tüm hata düzeltmelerini ve yeni özellikleri kullanabilmek için SDK'yı düzenli olarak geçerli sürüme (ai.2.min.js) güncelleştirin.
Çözüm 4b3: Application Insights SDK'sını eklemek için npm paketlerini kullanma
Kod parçacığını kullanmak ve genel CDN uç noktaları eklemek yerine, sdk'yı kendi JavaScript dosyalarınızın bir parçası olarak eklemek için npm paketlerini kullanabilirsiniz. SDK, kendi betiklerinizdeki başka bir paket haline gelir. Daha fazla bilgi için Application Insights JavaScript SDK GitHub sayfasının npm tabanlı kurulum bölümüne bakın.
Not
npm paketlerini kullanırken, kod bölme ve küçültme işlemi yapmanıza yardımcı olması için bir tür JavaScript paketleyicisi de kullanmanız önerilir.
Kod parçacığında olduğu gibi, burada görünen engelleme sorunları kendi betiklerinizi etkileyebilir (SDK npm paketlerini kullanarak veya kullanmadan). Uygulamanıza, kullanıcılarınıza ve çerçevenize bağlı olarak, bu sorunları algılamak ve bildirmek için kod parçacığındaki mantığa benzer bir şey uygulamayı düşünebilirsiniz.
JavaScript uygulamaları için kaynak eşleme desteği sorunlarını giderme
Aşağıdaki tabloda JavaScript uygulamaları için kaynak eşleme desteği içeren bazı sorunlar açıklanmaktadır ve bu sorunların giderilmesine yardımcı olacak stratejiler sunulmaktadır.
| Sorun | Açıklama |
|---|---|
| Blob kapsayıcınızda gerekli Azure rol tabanlı erişim denetimi (Azure RBAC) ayarları | Portalda bu özelliği kullanan tüm kullanıcılara blob kapsayıcınız için en az bir Depolama Blobu Veri Okuyucusu rolü atanmalıdır. Bu rolü, bu özellik aracılığıyla kaynak eşlemeleri kullanmak isteyen herkese atamanız gerekir. Kapsayıcının nasıl oluşturulduğuna bağlı olarak, bu rol size veya ekibinize otomatik olarak atanmamış olabilir. |
| Kaynak eşleme bulunamadı | Bu sorunu düzeltmek için aşağıdaki eylemleri gerçekleştirin:
|
"ParentId değeri olmayan Olay satırlarına tıklayın" uyarısını düzeltin
Uygulamada Application Insights ve Click Analytics Otomatik Toplama eklentisini kullandığınızda, application insights çalışma kitabında şu telemetri uyarısı görüntülenebilir: "ParentId değeri olmayan Olay satırlarına tıklayın."
Neden
Üst kimlik üst HTML öğesinde belirtilmezse bu sorun oluşabilir. Bu koşul, olayın tüm üst öğelerinde tetiklenilmesine neden olur.
Çözüm
Bu sorunu düzeltmek için veya data-<customPrefix>-parentid özniteliğini üst HTML öğesine ekleyindata-parentid. HTML kodunun bir örneği aşağıda verilmişti:
<div data-heart-id="demo Header" data-heart-parentid="demo.Header" data-heart-parent-group="demo.Header.Group">
Sonraki adımlar
Üçüncü taraf bilgileri hakkında yasal uyarı
Bu makalede adı geçen üçüncü taraf ürünleri Microsoft'tan bağımsız şirketler tarafından üretilmektedir. Microsoft, bu ürünlerin performansı veya güvenilirliği ile ilgili örtük veya başka türlü hiçbir garanti vermez.
Yardım için bize ulaşın
Sorularınız veya yardıma ihtiyacınız varsa bir destek isteği oluşturun veya Azure topluluk desteği isteyin. Ürün geri bildirimini Azure geri bildirim topluluğuna da gönderebilirsiniz.
Geri Bildirim
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz. https://aka.ms/ContentUserFeedback.
Gönderin ve geri bildirimi görüntüleyin