Monitorando uma aplicação VueJS com o Application Insights
Tags: vue, azure, logging, applicationinsights
Published: 2020-07-12 14:20:14

## 🤔 Motivação

Boa tarde pessoal! Tudo bem? Para quem já leu meus posts anteriores este post é uma espécie de continuação do [Publicando no GitHub.io com VueJS](https://dev.to/ardc_overflow/publicando-no-github-io-com-vue-js-498), onde mostrei como era possível utilizar um pouco de scripts do `Powershell/Bash` para realizar deploy de um App VueJS no seu domínio pessoal do GitHub!

Depois que publiquei o site, bem no começo de toda essa pandemia do Covid-19, fiquei um bom tempo com ele em um estado "estável", onde não via necessidade de mudar nada. Porém, um belo dia, visitei o site e vi que a api que ele consumia do Github estava fora do ar (foi algo pontual, depois voltou) e me dei conta como eu deveria ter criado uma rotina de falha e alguma maneira de ser notificado sobre isso.

Eis que chegamos ao post atual! Onde mostrarei como rapidamente adicionar o Microsoft Application Insights ao seu projeto Vue!

Todo o código apresentado aqui também está disponível no meu repositório do Github:

{% github rodolphocastro/rodolphocastro.github.io no-readme %}

## 👍 Créditos

Cover disponibilizada por [Markus Spiske](https://unsplash.com/@markusspiske?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) através do [Unsplash](https://unsplash.com/s/photos/logging-code?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)

## 👉 TL;DR

Os passos para utilizar o AppInsights c/ Vue são:

1. Crie um ApplicationInsights no [Azure](https://portal.azure.com) e salve a **instrumentation key**.
2. Adicione o package `@microsoft/applicationinsights-web` utilizando `npm` ou `yarn`
3. Crie um arquivo `.env` para armazenar sua **instrumentation key**
4. Crie uma instância utilizando `new ApplicationInsights({...})`, substituindo `...` pelas configurações
5. Inicialize esta instância junto de seu aplicativo

## ☁ Criando o ApplicationInsights no Azure

> Por brevidade estou assumindo que você já tenha uma conta no Azure! Caso não tenha o processo de criar uma é bem rápido e pode ser feito através do mesmo Portal!

Acesse o [Portal do Azure](https://portal.azure.com) e pesquise na barra superior por **Application Insights**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jnky9dtqvwkx9h6dzzbh.png)

Clique em **Add/Adicionar**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bc6llusw5awzvp4iij0h.png)

Escolha um **Grupo de Recursos** e um **Nome** para sua instância do Application Insights e clique em **Create** no fim da página:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a9m028afxz7pi3h4urn4.png)

Finalmente, após sua instância ser criada, anote a sua **Instrumentation Key**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tz1tmwtkgclv6b75289p.png)

Caso queira saber um pouco mais sobre o que podemos fazer dentro do Application Insights do Azure dê uma olhada neste post abaixo

{% post https://dev.to/ardc_overflow/cell-cms-criando-logs-robustos-e-monitorando-uma-api-16ed %}

## ⚙ Instalando e Utilizando no Vue

Para instalar o *Application Insights* basta adicionar o package `@microsoft/applicationinsights-web` utilizando seu *package manager* de preferência.

```
npm install @microsoft/applicationinsights-web
yarn install @microsoft/applicationinsights-web
```

### 🔑 Armazenando a Instrumentation Key

Lembra a Instrumentation Key que salvamos ao criar o App Insights no Azure? Precisamos dela para inicializar nosso AppInsights no Vue!

Como boa prática é sempre bom manter as configurações o mais distante possível do código puro, *magic strings* e **dependências hardcoded podem dar uma baita dor de cabeça**!

Felizmente se você estiver utilizando o `@vue/cli` (que, alias, recomendo!) isso pode ser facilmente resolvido através de variáveis de ambientes!

No Vue, ao contrário do dotNet, as variáveis de ambiente serão relevantes apenas no momento de compilação da aplicação! Para passarmos estas variáveis tudo que precisamos é um arquivo `.env` na raiz de nosso projeto! Dentro deste arquivo todas as variáveis que começarem com `VUE_APP_` ficarão disponíveis à nossa Aplicação!

Por exemplo o seguinte arquivo `.env` pode ser utilizado para armazenar nossa instrumentation key:

```dotEnv
VUE_APP_INSIGHTS_KEY=Minha-Instrumentation-Key
```

E, pelo código, podemos recuperar o valor desta variável através do `process.env`, como veremos abaixo!

Caso queira saber mais sobre as variaveis de ambiente com o `@vue/cli` dê uma olhada [na documentação](https://cli.vuejs.org/guide/mode-and-env.html#environment-variables)

### 🏆 Criando e Utilizando o AppInsights

Agora que temos nossa **instrumentation key** disponível ao App precisamos criar e configurar a instância do Application Insights.

Uma prática que gosto de fazer nestes cenários é criar um **arquivo separado** que, internamente, **cria e configura a instância** e apenas publica **uma função para recuperar esta instância**, pronta para uso.

Criar a instância é simples, a library nos disponibiliza um construtor que só precisamos chamar e passar os argumentos, conforme:

```typescript
const appInsights = new ApplicationInsights({
  config: {
    instrumentationKey: process.env.VUE_APP_INSIGHTS_KEY,  // A instrumentation key
    autoTrackPageVisitTime: true,  // Flag para ativar rastreio automático de tempo por página
    enableAutoRouteTracking: true  // Flag para ativar o rastreio automático de rotas
  }
})
```
A única variável obrigatória é a `instrumentationKey`. As outras são detalhes que (pelo menos para um SPA) são desejáveis. A referência completa destas variáveis pode ser encontrada na [documentação](https://github.com/microsoft/ApplicationInsights-JS#configuration)

Após criar a instância é necessário chamar o método `.loadAppInsights()` para carrega-la.

Finalmente, para disponibilizar a instância criada ao resto do Aplicativo, só precisamos **exportar** uma função que a retorna, conforme:

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

const appInsights = new ApplicationInsights({
  config: {
    instrumentationKey: process.env.VUE_APP_INSIGHTS_KEY,
    autoTrackPageVisitTime: true,
    enableAutoRouteTracking: true
  }
})
appInsights.loadAppInsights()

/**
 * Obtem a instância do AppInsights.
 */
export function useAppInsights () {
  return appInsights
}
```

Agora precisamos garantir que ela seja carregada assim que o usuário abrir o App. Uma boa maneira de fazer isso é adiciona-la ao `main.ts/js` e já disparar um track sinalizando que o App Insights foi carregado!

```typescript
import { useAppInsights } from './services/AppInsights'

// Configurações do Vue...

// Criando um evento só para garantir que carregamos tudo
useAppInsights().trackEvent({ name: 'App Loaded!' })

// Criando o app em si
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
```

## 🙋‍♂️ Possíveis melhorias

Uma possível melhoria para todo esse processo seria criar um `Mixin` para que todo `component` pudesse acessar o AppInsights, porém pelo tamanho do projeto acreditei que seria um *overengineering* haha.

Outra melhoria seria utilizar as capacidades de **Analytics** do Application Insights. Este exemplo demonstra apenas o básico para que tenhamos algum tipo de monitoramento de falhas e acessos.

Além das melhorias na aplicação em si poderiamos configurar **Alertas automáticos** no Application Insights para quando falhas fossem detectadas!