React: customizando alertas e dashboards com New Relic

Olá, estudante da Alura! Como vai? Sou o instrutor Pedro Mello.

Audiodescrição: Pedro Mello se identifica como um homem branco. Possui olhos castanhos-escuros, além de cabelos curtos e barba, ambos escuros. No nariz, há dois piercings de argola: um no septo e outro na aba direita. No corpo, uma camiseta preta. Está sentado em uma cadeira gamer preta. À sua frente, há um microfone de mesa.

Boas-vindas a mais um curso de React aqui na plataforma da Alura!

O que vamos aprender?

Estamos com um projeto ambicioso para este curso. Apresentamos o Buscante (endereço localhost:3000), que faz uso da API do Google Books para permitir a pesquisa de livros diretamente em nosso campo de busca.

Já otimizamos o projeto em relação às imagens e ao server-side rendering, graças ao uso do Next.js. Desenvolvemos uma página detalhada para cada livro, com descrição, botão de "voltar" e um header (cabeçalho) que facilita o retorno à página inicial. Este é um projeto grande no qual estamos empolgados para trabalhar.

Além disso, vamos disponibilizar este projeto na plataforma do New Relic (um serviço de observabilidade). Dentro do New Relic, abordaremos o conceito de entidades e como configurar nosso projeto, além de entender como os dados gerados por ele são processados no New Relic.

Exploraremos tópicos como logs, tratamento de erros, criação de condições e políticas de alerta. Por fim, mergulharemos na personalização e criação de dashboards, incluindo a disponibilização de links para acessar essas dashboards e informações específicas.

Este curso oferece uma ampla gama de conhecimentos interessantes para explorar.

Pré-requisitos

No entanto, para trabalhar efetivamente neste projeto, é necessário que você já tenha um conhecimento prévio em Next.js (o framework que vamos utilizar neste projeto), em JavaScript e TypeScript, e saiba como personalizar um projeto utilizando o Tailwind. Todo o restante vamos aprender juntos neste curso da Alura.

Aguardamos você no primeiro vídeo para iniciar a configuração do nosso projeto. Te esperamos no nosso próximo vídeo!

Com o projeto do Buscante aberto no nosso navegador, vamos ao nosso código verificar como está a estrutura.

No VSCode, dentro do arquivo package.json, conseguimos observar todas as dependências desse projeto e também os scripts que estão configurados para rodar o projeto.

package.json

{
"dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.0.4"
},

Na linha 11, podemos verificar que estamos utilizando a versão mais recente do React e do React DOM neste projeto, além da versão mais recente do Next. Em outras palavras, ele vai lidar com as rotas da nossa aplicação da maneira mais atual possível.

Se quiser entender melhor como o Next funciona nos bastidores, temos muitos recursos disponíveis aqui na Alura. Então, recomendo que dê uma procurada na plataforma, há bastante informação interessante lá.

Agora, vamos voltar ao navegador no endereço localhost:3000. Este é o nosso Buscante: na parte superior, exibimos o texto "Qual livro você está procurando?". Logo abaixo, há um campo de busca. Em seguida, apresentamos uma imagem de uma mulher retirando um livro de uma estante, acompanhada do texto "Encontre o livro que desejar em nossa estante!".

Este projeto usa a API do Google para realizar as requisições de busca, podendo filtrar por assunto, autor ou nome diretamente nesse campo de busca.

Além da API do Google Books que estamos usando, vamos integrar nossa aplicação ao New Relic, um serviço escolhido especificamente por ser gratuito e oferecer uma ampla gama de funcionalidades de observabilidade. Isso nos permitirá monitorar nossa aplicação do Buscante de maneira abrangente.

Acessando o New Relic

Para começar, vamos acessar o site do New Relic pelo navegador. Ao acessá-lo, você verá a tela de boas-vindas. Embora o site esteja em inglês, faremos um breve acompanhamento para destacar as principais funcionalidades que o New Relic oferece.

Vamos acessar a seção de login na parte superior direita para criar nossa conta. Se você ainda não possui uma conta no New Relic, este é o momento ideal para criá-la. Você pode fazer login usando sua conta do Gmail, GitHub, GitLab ou Bitbucket, caso tenha uma conta em algum deles.

Como já tenho uma conta, sugerimos que você faça uma pausa rápida no vídeo para criar sua conta e, em seguida, continuaremos com o próximo passo.

Esperamos que você já tenha criado sua conta. Assim que você faz o login, é assim que o New Relic Explorer se apresenta. Nós já temos um projeto configurado e até mesmo um projeto de vídeos anteriores aqui na Alura está sendo exibido para nós.

Se estiver interessado no Bytebooks, sugerimos que dê uma pesquisada nos cursos que abordam esse projeto. Ele é bastante interessante e oferece muitos recursos para você explorar e estudar.

Primeiro, precisamos configurar nosso projeto do Buscante para que ele também apareça no New Relic Explorer.

Vamos realizar esse processo passo a passo enquanto revisamos o código juntos. É importante lembrar de um detalhe crucial: para configurar uma aplicação, ela precisa estar implantada (deployed), ou seja, precisa estar disponível na web. Felizmente, nosso Buscante já está disponível para acesso na web.

Alterando a aba do New Relic Explorer. Atualmente, estamos visualizando o projeto no endereço localhost:3000, que é onde nossa aplicação está rodando localmente. No entanto, nossa aplicação já está implantada na Vercel.

Portanto, ao digitarmos buscante-swart.vercel.app, que é o domínio gerado automaticamente pela Vercel para nosso projeto, conseguimos acessar a versão do código que desenvolvemos, a qual está disponível na Vercel sob um domínio público.

Próximos Passos

Para avançarmos, contamos com sua presença no próximo vídeo para configurarmos o projeto. Enquanto isso, aproveite para realizar o deploy da sua aplicação. Se você não tem experiência com o deploy pela Vercel, há conteúdos disponíveis aqui na Alura que podem ajudar.

Te aguardamos no próximo vídeo para trabalhar na configuração da nossa aplicação no New Relic juntos!

Olá, estudante! Esta é a visão inicial do New Relic. Como podem perceber, já tenho um projeto configurado de tempos passados. Não precisam se preocupar com ele. O que vamos fazer agora é configurar o nosso projeto para que ele apareça aqui junto com essas entidades do New Relic. Inclusive, guardem esse conceito de entidades, ou entity, que vamos explorá-lo mais adiante.

Configurando o projeto no New Relic

Para adicionar a configuração do Next.js ao New Relic e visualizá-la no nosso sistema, é necessário instalar o provedor do New Relic no nosso projeto. Na seção de notas de aula, você encontrará o link da documentação que apresenta o passo a passo para realizar essa configuração. Vamos realizar o processo juntos neste vídeo.

How to monitor a Next.js application

Apesar de estar em inglês, você pode selecionar todo o conteúdo e traduzi-lo. Depois, vamos percorrer a página do artigo e localizar o comando necessário para a instalação.

Comando retirado da documentação:

npm install newrelic @newrelic/next

Basicamente, instalaremos o New Relic e o newrelic/next no nosso projeto Buscante.

newrelic @newrelic/next

Após copiar os nomes, retornaremos ao nosso VSCode, interromperemos a execução do projeto e digitaremos npm i no terminal para realizar a instalação. Na sequência, colamos os nomes que copiamos da documentação.

npm i newrelic @newrelic/next

Executamos o comando e aguardamos.

Demorou um pouco para instalar essas dependências. Verificamos no arquivo package.json para garantir que foram instaladas corretamente.

package.json

{
"dependencies": {
    "@newrelic/next": "^0.7.0",
    "newrelic": "^11.10.4",
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18"
 }

Agora temos o New Relic Next e o New Relic disponíveis.

Voltamos ao nosso navegador para conferir o que a documentação diz. Mais abaixo da seção onde copiamos os dois pacotes, encontramos informações sobre a necessidade de incluir a versão desses pacotes nas dependências do projeto.

Continuando na parte de configuração, é mencionado que devemos adicionar a linha de NODE_OPTIONS='-r @newrelic/next' no comando de inicialização do projeto, next start. Além disso, se prosseguirmos um pouco mais, veremos as instruções para ambas as etapas, tanto para o dev quanto para a start.

Para simplificar, podemos copiar tudo de uma vez.

Script copiado da documentação:

 "scripts": {
   "dev": "NODE_OPTIONS='-r @newrelic/next' next",
   "build": "next build",
   "start": "NODE_OPTIONS='-r @newrelic/next' next start",
   "lint": "next lint"
 },

Retornamos ao VS Code e na seção de scripts na linha 5, substituiremos o conteúdo pelo que copiamos da documentação do New Relic.

package.json

 "scripts": {
   "dev": "NODE_OPTIONS='-r @newrelic/next' next",
   "build": "next build",
   "start": "NODE_OPTIONS='-r @newrelic/next' next start",
   "lint": "next lint"
 },

Salvamos a alteração.

Vamos prosseguir com a análise para verificar se há outras alterações mencionadas que devemos realizar. Ele sugere personalizar o comando -r nas NodeOptions e também incluir o arquivo de configuração do New Relic, chamado newrelic.js. Ele fornece um exemplo desse arquivo que podemos simplesmente copiar e colar.

Agora, clicamos em "see an example config file for your Next.js app" e copiamos o arquivo completo:

"use strict";
/**
 * New Relic agent configuration.
 *
 * See lib/config/default.js in the agent distribution for a more complete
 * description of configuration variables and their potential values.
 */
exports.config = {
  /**
   * Array of application names.
   */
  app_name: ["newrelic-nextjs-integration"],
  /**
   * Your New Relic license key.
   */
  license_key: "",
  /**
   * This setting controls distributed tracing.
   * Distributed tracing lets you see the path that a request takes through your
   * distributed system. Enabling distributed tracing changes the behavior of some
   * New Relic features, so carefully consult the transition guide before you enable
   * this feature: https://docs.newrelic.com/docs/transition-guide-distributed-tracing
   * Default is true.
   */
  distributed_tracing: {
    /**
     * Enables/disables distributed tracing.
     *
     * @env NEW_RELIC_DISTRIBUTED_TRACING_ENABLED
     */
    enabled: true,
  },
  logging: {
    /**
     * Level at which to log. 'trace' is most useful to New Relic when diagnosing
     * issues with the agent, 'info' and higher will impose the least overhead on
     * production applications.
     */
    level: "info",
  },
  application_logging: {
    forwarding: {
      enabled: true,
    },
  },
  /**
   * When true, all request headers except for those listed in attributes.exclude
   * will be captured for all traces, unless otherwise specified in a destination's
   * attributes include/exclude lists.
   */
  allow_all_headers: true,
  attributes: {
    /**
     * Prefix of attributes to exclude from all destinations. Allows * as wildcard
     * at end.
     *
     * NOTE: If excluding headers, they must be in camelCase form to be filtered.
     *
     * @env NEW_RELIC_ATTRIBUTES_EXCLUDE
     */
    exclude: [
      "request.headers.cookie",
      "request.headers.authorization",
      "request.headers.proxyAuthorization",
      "request.headers.setCookie*",
      "request.headers.x*",
      "response.headers.cookie",
      "response.headers.authorization",
      "response.headers.proxyAuthorization",
      "response.headers.setCookie*",
      "response.headers.x*",
    ],
  },
};

Vamos retornar ao VSCode agora.

Acessaremos a raiz do projeto e criaremos um novo arquivo chamado newrelic.js. Verificaremos se o conteúdo está completamente copiado e então o colaremos. Na linha 12, encontramos o termo app_name. Substituiremos isso por Buscante, que é o nome do nosso projeto.

newrelic.js

"use strict";
/**
 * New Relic agent configuration.
 *
 * See lib/config/default.js in the agent distribution for a more complete
 * description of configuration variables and their potential values.
 */
exports.config = {
  /**
   * Array of application names.
   */
  app_name: ["buscante"],
  /**
   * Your New Relic license key.
   */
  license_key: "",
  /**
   * This setting controls distributed tracing.
   * Distributed tracing lets you see the path that a request takes through your
   * distributed system. Enabling distributed tracing changes the behavior of some
   * New Relic features, so carefully consult the transition guide before you enable
   * this feature: https://docs.newrelic.com/docs/transition-guide-distributed-tracing
   * Default is true.
   */
  distributed_tracing: {
    /**
     * Enables/disables distributed tracing.
     *
     * @env NEW_RELIC_DISTRIBUTED_TRACING_ENABLED
     */
    enabled: true,
  },
  logging: {
    /**
     * Level at which to log. 'trace' is most useful to New Relic when diagnosing
     * issues with the agent, 'info' and higher will impose the least overhead on
     * production applications.
     */
    level: "info",
  },
  application_logging: {
    forwarding: {
      enabled: true,
    },
  },
  /**
   * When true, all request headers except for those listed in attributes.exclude
   * will be captured for all traces, unless otherwise specified in a destination's
   * attributes include/exclude lists.
   */
  allow_all_headers: true,
  attributes: {
    /**
     * Prefix of attributes to exclude from all destinations. Allows * as wildcard
     * at end.
     *
     * NOTE: If excluding headers, they must be in camelCase form to be filtered.
     *
     * @env NEW_RELIC_ATTRIBUTES_EXCLUDE
     */
    exclude: [
      "request.headers.cookie",
      "request.headers.authorization",
      "request.headers.proxyAuthorization",
      "request.headers.setCookie*",
      "request.headers.x*",
      "response.headers.cookie",
      "response.headers.authorization",
      "response.headers.proxyAuthorization",
      "response.headers.setCookie*",
      "response.headers.x*",
    ],
  },
};

Após salvar, na linha 16, será necessário inserir a chave de licença exclusiva do NewRelic.

Para encontrar suas chaves de projeto e de uso, podemos começar no NewRelic. Retornando ao navegador, clicamos em "Add Data" do lado superior esquerdo. Uma opção é seguir a instalação guiada clicando em "Guided install". Ao acessar essa guia, na lateral direita, você encontrará a seção onde pode localizar sua chave de licença (em inglês, "Looking for your license key?").

Lá, haverá um botão para gerar e copiar a chave, "Generate and copy license key". Vamos proceder com isso: clicamos no botão para gerar a chave, que será automaticamente copiada para a área de transferência.

Ao retornar à nossa aplicação no VSCode, colamos a chave de licença.

newrelic.js

// código omitido


/
license_key: "b4bf4b45cfdb314f9c7cd2abb8952bcFFFFNRAL",
/*





This setting controls distributed tracing.



// código omitido

Essa chave é única para cada conta, então é essencial gerar a sua para que a configuração do NewRelic funcione corretamente. Agora, salvamos o arquivo.

Conclusão e Próximos Passos

A configuração foi concluída em nossa aplicação. No entanto, para que isso seja refletido no NewRelic e esteja disponível em ambiente de produção, será necessário realizar um novo commit e deploy da aplicação. Faça isso rapidamente e nos encontraremos no próximo vídeo para configurar o NewRelic do outro lado.

Realizarei o commit e efetuarei o deploy. Você precisará fazer o mesmo do seu lado e nos vemos no próximo vídeo!