[QuickTip] - Application Insights - Custom Dimensions Browser
Fala PessoALL,
Tudo bom com vocês? Esses últimos meses tem sido um pouco crazy aqui na BrazilianDevs, empresa tomando novos rumos e tenho passado boa parte dos meus dias migrando e melhorando aplicações na nuvem.
E como parte disso o Application Insights tem sido de grande ajuda para resolver problemas de escalabilidade nas aplicações.
Uma das grandes vantagens do Application Insights é poder customizar os dados enviados automaticamente com métricas que fazem sentido para nosso negócio, no artigo de hoje vou mostrar como fazer isso no front-end.
Configuração padrão
Na configuração padrão o App Insights é +/- assim:
<!--
To collect user behavior analytics about your application,
insert the following script into each page you want to track.
Place this code immediately before the closing </head> tag,
and before any other scripts. Your first data will appear
automatically in just a few seconds.
-->
<script type="text/javascript">
var appInsights=window.appInsights||function(a){
function b(a){c[a]=function(){var b=arguments;c.queue.push(function(){c[a].apply(c,b)})}}var c={config:a},d=document,e=window;setTimeout(function(){var b=d.createElement("script");b.src=a.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js",d.getElementsByTagName("script")[0].parentNode.appendChild(b)});try{c.cookie=d.cookie}catch(a){}c.queue=[];for(var f=["Event","Exception","Metric","PageView","Trace","Dependency"];f.length;)b("track"+f.pop());if(b("setAuthenticatedUserContext"),b("clearAuthenticatedUserContext"),b("startTrackEvent"),b("stopTrackEvent"),b("startTrackPage"),b("stopTrackPage"),b("flush"),!a.disableExceptionTracking){f="onerror",b("_"+f);var g=e[f];e[f]=function(a,b,d,e,h){var i=g&&g(a,b,d,e,h);return!0!==i&&c["_"+f](a,b,d,e,h),i}}return c
}({
instrumentationKey:"<your instrumentation key>"
});
window.appInsights=appInsights,appInsights.queue&&0===appInsights.queue.length&&appInsights.trackPageView();
</script>
Com a chave de instrumentação configurada, ele carrega o App Insights e chama o método trackPageView
, por mais que seja muito útil, na hora de validar lentidões e erros em um ambiente multi-tenant fica ruim não podermos filtrar as requisições por um determinado usuário ou cliente.
Configuração personalizada
O App Insights, tanto no browser quando no servidor, trabalha com o conceito de initializers, que nos permite customizar as informações enviadas em todas as chamadas.
Usando esse conceito, podemos modificar o código padrão do track automático na nossa master page para:
<!-- Azure Applications Insights -->
<script type="text/javascript">
var appInsights=window.appInsights||function(a){
function b(a){c[a]=function(){var b=arguments;c.queue.push(function(){c[a].apply(c,b)})}}var c={config:a},d=document,e=window;setTimeout(function(){var b=d.createElement("script");b.src=a.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js",d.getElementsByTagName("script")[0].parentNode.appendChild(b)});try{c.cookie=d.cookie}catch(a){}c.queue=[];for(var f=["Event","Exception","Metric","PageView","Trace","Dependency"];f.length;)b("track"+f.pop());if(b("setAuthenticatedUserContext"),b("clearAuthenticatedUserContext"),b("startTrackEvent"),b("stopTrackEvent"),b("startTrackPage"),b("stopTrackPage"),b("flush"),!a.disableExceptionTracking){f="onerror",b("_"+f);var g=e[f];e[f]=function(a,b,d,e,h){var i=g&&g(a,b,d,e,h);return!0!==i&&c["_"+f](a,b,d,e,h),i}}return c
}({
instrumentationKey:"<%= APPINSIGHTS_INSTRUMENTATIONKEY %>"
});
window.appInsights=appInsights;
// Add telemetry initializer
appInsights.queue.push(function () {
appInsights.context.addTelemetryInitializer(function (envelope) {
var telemetryItem = envelope.data.baseData;
telemetryItem.properties = telemetryItem.properties || {};
telemetryItem.properties["CompanyId"] = "<%= LOGIN_COMPANY_ID %>";
telemetryItem.properties["FacilityId"] = "<%= LOGIN_FACILITY_ID %>";
telemetryItem.properties["SubDomain"] = "<%= Session("SubDomain") %>";
telemetryItem.properties["UserId"] = "<%= Session("SecurityContext.Current.UserID") %>";
telemetryItem.properties["UserName"] = "<%= Session("SecurityContext.Current.UserName") %>";
});
});
appInsights.trackPageView();
</script>
Adicionando um telemetry initializer agora todas as páginas vão conter os dados da empresa e usuário logado no sistema.
Usando Custom Dimensions no portal do Azure
Agora que temos dados customizados sendo enviados, podemos usar as abas Performance e Failures filtrando pelos dados customizados conforme imagem à seguir:
É Isso ae pessoALL,
Espero que tenham gostado da dica e até a próxima.
rsantosdev.