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