Nuxt.js integração

Com nosso dashboard Nuxt.js, você pode rastrear facilmente a taxa de erros do seu aplicativo, média de carregamento inicial da página, alterações de rota, taxas de transferência e visualizações de páginas com erros de JavaScript. Construído com nosso agente de infraestrutura e nosso Vue monitoramento de browser, o dashboard Nuxt.js permite visualizar informações críticas em todo o local.

1. Instale o agente de infraestrutura

Antes de colocar seus dados no New Relic, você deve primeiro instalar o agente de infraestrutura (se estiver instalado, você pode pular esta etapa). Isso permite que a New Relic colete dados para que taxas de erros de aplicativos, taxas de transferência e visualizações de páginas com erros de JavaScript possam aparecer no painel. Esta etapa é opcional, mas recomendamos fortemente que você instale o agente de infraestrutura para ver todos os dados do seu host e monitoramento do Browser.

Há duas maneiras de instalar o agente de infraestrutura:

• Siga a instalação guiada para instrumentar nosso sistema com o agente de infraestrutura.
• Instale o agente de infraestrutura usando a linha de comando.

2. Instale o Vue monitoramento do browser

Após instalar o agente de infraestrutura, a próxima etapa é instalar o monitor do browser. De one.newrelic.com:

1. Clique

   Add data

2. Clique

   Browser & mobile

3. Clique em

   Vue

   A partir daí, siga as instruções para gerar o trecho do código JavaScript usado na etapa 3. Enquanto o agente de monitoramento de Browser e a integração Vue fornecem essencialmente o mesmo serviço, a integração Vue é específica para JavaScript (que é o framework do Nuxt.js). Se desejar monitor outros serviços não específicos de JavaScript, você deve usar o agente de monitoramento de browser.

3. Configure a integração

Para adicionar o trecho JavaScript no aplicativo Nuxt.js:

1. Crie um arquivo JavaScript na pasta

   static

   do seu aplicativo nuxt.js:

   bash

   Copiar

   $
   touch <FILENAME>.js

2. Crie uma função no arquivo JavaScript recém-criado e adicione o script gerado dentro da função:

   function FUNCTION_NAME() {
     // GENERATED SCRIPT IS PASTED HERE BY REMOVING OPENING AND CLOSING <script> TAGS>
   }
   FUNCTION_NAME();

   Copiar

3. Copie o trecho de código abaixo e cole-o em HEADER tag de nuxt.config.js arquivo e atualize o nome da função e o nome do arquivo:

   __dangerouslyDisableSanitizers: ["script"],
     script: [
       {
         hid: "<FUNCTION_NAME>",
         src: "/<FILENAME>.js",
         defer: true,
         type: "text/javascript",
         charset: "utf-8",
       },
     ],

   Copiar

4. Reinicie seu aplicativo.

4. monitor seu aplicativo em one.newrelic.com

Agora você poderá ver seu aplicativo em one.newrelic.com selecionando Browser na barra de navegação. Escolha sua aplicação para ver todas as métricas que são capturadas na plataforma one.newrelic.com . Você também pode visualizar os dados com NRQL usando a seguinte consulta:

SELECT firstPaint 
FROM PageView

Qual é o próximo?

Para saber mais sobre como construir uma consulta NRQL e gerar um painel, confira estes documentos:

• Introdução ao criador de consulta para criação de consultas básicas e avançadas.

• Introdução aos dashboards para personalizar seu dashboard e realizar diversas ações.

• Gerencie seu dashboard para ajustar o modo de exibição do seu

  dashboards

  ou para adicionar mais conteúdo aos seus painéis.