Application Insight – Angular.js UI Configuration – Part 2

By | 05 February 2019

Bir önceki bölümde node.js için gerekli telemetri konfigürasyonlarını yapmıştım. Şimdi de UI için kullandığım angular tarafı için gerekli application insight konfigürasyonunu ele alalım.

Yapacağım konfigürasyon aslında temelde aynı adımları içeriyor ancak bazı farklılıklar gösteriyor. Şimdi bu farklılıkları adım adım ele alalım.

Node.js sdk’sı ile npm’i bir önceki bölümde yüklemiştik. Şimdi bu yüklediğimiz npm’i kullanarak applicationinsight-js’yi yükleyelim.

Bunun için aşağıdaki komutu çalıştırmamız yeterli olacaktır.

Npm install application-js

Kurulum tamamlandıktan sonra package.json dosyasındaki dependencies bölümünde application-js listelenecektir.

Kurulumun ardından appcomponent.ts isimli doyaya aşağıdaki gibi applicationinsight-js bileşenini ve instrumentation key’i çağırmamızı sağlayacak environment bileşenini import etmemiz gerekir. Bu işlem initialization aşamasında gerekli olacaktır. Bu amaçla şekilde işaretlediğim importların eklenmesi gereklidir.

Bu işlemlerin ardından environment variable’dan key’i alıp, CDN üzerinden tüm Application Insight scriptlerini download edip Azure ile bağlantı sağlayacak kod parçasını constructer içerisine entegre etmek gerekir. Bu sebeple aşağıdaki komutu constructer içerisine yazalım.

AppInsights.downloadAndSetup({

instrumentationKey: environment.appInsights.instrumentationKey,

enableCorsCorrelation: true

});

Instrumentation key’i de environment variable olarak environment.ts dosyasına aşağıdaki gibi ekleyelim.

Bu işlem sonrasında hem UI için gerekli angular tarafımız hem de node.js tabanlı API tarafımız telemetrik datayı Azure Application ınsight’a gönderecek şekilde hazır duruma geldi.

Şimdi yapacağımız işlem ile hem UI tarafını hem de API tarafını aşağıda ayağa kaldıralım.

API tarafını çalıştırmak için aşağıdaki şekilde görüldüğü gibi “npm start” komutunu çalıştırmamız yeterli olacaktır.

UI tarafı içinde ng serve –open ileangluar tabanlı UI’ı ayağa kaldırabiliriz. Bu işlemin ardından oluşturduğunuz sample web sayfası browser açılarak görünecektir.

Bu sayfada belirli işlemler yaptıktan sonra Azure application insight üzerindeki değerleri kontrol ettiğinizde telemetrik datanın gelmeye başladığını görebilirsiniz.

Azure tarafını kontrol ettiğimizde metrik değerler aşağıdaki gibi görünecektir.

Application map bölümünde de oluşturmuş olduğumuz UI ve API farklı birimler halinde görünmektedir. Bu iki birim arasındaki iletişim, yapılan call sayısı, bu call’lara ilişkin ortalama süre vb. değerler görüntülenmektedir. Aynı şekilde UI tarafında yapılan görüntüleme ve bunların ortalama süreleri de görünmektedir.

Application insight tarafındaki bileşenleri başka bir makalede ele alacağım. Buradaki iki makalede bahsetmek istediğim şey, kod katmanında yapılması gereken değişikliklerdi.

Umarım faydalı bir makale serisi olmuştur.

Görüşmek üzere.

Fırat

Kaynak: https://app.pluralsight.com/library/courses/microsoft-azure-application-insights-web-application-instrument/

Leave a Reply