React: explorando monitorações sintéticas e alertas avançados com New Relic

Novas features no projeto - Apresentação

Olá, estudante da Alura! Como está?

É um prazer recebê-lo em mais um curso de React na plataforma da Alura.

Sou Pedro Mello, instrutor front-end aqui na Alura.

Audiodescrição: Pedro se declara um homem branco. Tem cabelos curtos escuros e barba curta escura. Está vestindo uma blusa preta e tem uma corrente no pescoço. Está sentado em uma cadeira de encosto alto preto e, à frente dele, há um microfone com LED vermelho. No fundo, o um ambiente está iluminado por uma luz LED azul e vemos alguns instrumentos musicais.

O projeto

Neste curso, trabalharemos no projeto da Buscante. Estamos exibindo esse projeto agora no nosso navegador e convido você para ver um pouco do que esse projeto já tem.

Neste projeto, estou utilizando o Next.js na versão mais atual, que neste momento é a versão 14. Também estamos utilizando Tailwind para a parte de estilização e toda a nossa parte de gerenciamento de estado, ela utiliza a API de contextos do React.

Além disso, temos também uma integração com a API do Google Books, e vamos utilizá-la para fazer a busca e filtragem de livros. Vou demonstrar agora como é o funcionamento dessa API. No campo de busca da página da Buscante, vamos digitar "Casa do Código" e teclar "Enter" para fazer uma busca.

Como retorno, temos 10 resultados (livros). Por exemplo, temos o livro "Desconstruindo a Web". Ao clicarmos no "Mais Detalhes", no cartão do livro, temos mais informações.

Vamos supor que tenhamos interesse em saber mais desse livro, ou queira consultá-lo de uma forma mais simples depois, desejássemos salvá-lo em uma lista de favoritos. Ou seja, ter uma estante pessoal onde possamos simplesmente acessá-la de uma forma fácil e ter essa listagem de livros que já selecionamos e favoritamos anteriormente.

É isso que vamos desenvolver neste curso, essa parte dessa estante individualizada, onde podemos adicionar e remover livros nessa nossa estante. Também vamos trabalhar bastante com a questão da observabilidade utilizando a plataforma do New Relic.

Nessa plataforma do New Relic, vamos aprender como funcionam os monitoramentos sintéticos. Conheceremos esse conceito e o que eles podem entregar para nós em questão de observabilidade e performance da aplicação. Esse um projeto muito interessante e temos assuntos interessantes para aprender nesse novo projeto.

Pré-requisitos

E para seguir adiante com esse projeto, será interessante que você já tenha um conceito aprofundado no React:

• Funcionamento de Hooks;
• Estilização utilizando o Tailwind;
• Conhecimento de New Relic.

Dica: Vocês podem aprender mais sobre esses conteúdos através de cursos da ALura. Nesse curso, será interessante se tiverem consumido algum outro curso que tem essa parte do New Relic.

Encontramos você no nosso próximo vídeo para continuar esse nosso projeto de Buscante.

Novas features no projeto - Configurando um script em uma aplicação Next.js

Vamos começar a configurar nosso projeto como uma entidade do tipo browser no New Relic. No entanto, precisamos fazer algumas preparações antes.

Preparando o projeto

Primeiramente, vamos rodar nosso projeto localmente para visualizar como ele está funcionando. Então, no terminal, rodamos o comando run dev. Com isso, nosso projeto está rodando no http://localhost:3000/.

Vamos acessar esse endereço no nosso navegador. Com o projeto Buscante rodando, faremos uma busca rápida para ter uma visualização. Por exemplo, podemos pesquisar "Harry Potter". Com o teste passando, podemos prosseguir.

Acessaremos a página do New Relic e faremos o login. Após logarmos, teremos um menu na lateral esquerda, chamado "New Relic Explorer" (Explorador New Relic). Nele, clicaremos na opção "Add Data", que é a primeira.

Com isso, vamos para página do "Add Data", onde temos outro menu, ao lado do Explorer, e uma página de opções. Na parte superior dessa página, temos um campo de busca, onde vamos clicar e digitar "browser" (navegador).

Ao pressionarmos "Enter", para fazermos a busca, temos o retorno de algumas opções. Vamos clicar em "Browser monitoring" (Monitoramento de navegador). Com isso, vamos para página selecionada, onde temos duas opções.

A primeira, que configuramos anteriormente no Buscante, é como uma entidade do tipo APM. Agora, vamos inserir um trecho de código JavaScript na nossa aplicação, clicando na opção "Place a JavaScript snippet in frontend code" (Adicionar um trecho JavaScript em um código front-end).

Ao clicarmos nela, vamos para um formulário de configuração. A primeira etapa desse formulário é nomear a aplicação. Vou nomear como "buscante-browser", mas você pode nomear como quiser. Como já configuramos anteriormente o buscante do tipo APM apenas como "buscante", para diferenciar, vou usar o buscante-browser, para facilitar a identificação.

Em seguida, clicamos no botão "Save name" (salvar nome), abaixo do campo, e depois no botão "Continue". Na segunda etapa do formulário, temos algumas configurações extras, mas não precisamos alterar nada. Basta rolarmos a página até o final e clicar no botão "Continue" novamente.

Na última etapa do formulário, ele mostra um script, que é o que nos queremos. No entanto, no Next, a forma que vamos fazer essa inserção de script no nosso HTML é um pouco diferente.

Como estamos na versão 14 do Next, não temos a pasta "_document", pelo menos nessa estrutura de pasta que estamos utilizando, que é a navegação através da pasta "app". Nas versões anteriores do Next era o local onde criávamos o arquivo para fazer essas inserções de script.

No nosso projeto atualmente, o arquivo responsável por criar o HTML, é o layout.tsx, que está dentro da raiz da pasta "app". Então, vamos copiar somente a parte que está entre as tags de <script> </script>, que é da linha 2 a linha 7. Após copiarmos o código, excluindo as tags de script, voltaremos ao Visual Code para fazer a inserção desse script.

Inserindo o script

No Visual Code, abriremos o arquivo layout.tsx, ele está em "src > app > layout.tsx". O Next tem a sua própria tag de script para podermos inserir os dados, então, antes da função RootLayout(), vamos criar uma constante chamada de newRelicScript. Nessa constante, vamos abrir crases e colar o código que copiamos.

// código omitido

const poppins = Poppins({ subsets: ['Latin'], weight: ['400', '600'], style: 'normal' });
export const metadata: Metadata = {
  title: 'Buscante',
  description: 'Sua estante virtual de livros',
};

const newRelicScript = `//colar o scirpt copiado`;

// código omitido

Notem que o script tem bastante linhas de código. Precisamos conferir tudo para ter certeza que não há nenhuma linha vazia no meio. Se tiver, basta apagar. Após conferir isso, basta copiarmos o nome da constante que criamos, ou seja, newRelicScript.

Vamos descer nosso arquivo até a função RootLayout(). Dentro do return(), na linha 22, temos a tag <html> sendo aberta. Para fazermos inserções de script, precisamos que elas sejam feitas na tag <head>, que está na hierarquia mais alta do DOM.

Ou seja, logo após a abertura <html>, esperamos que tenha um <head>. Dentro dessa tag, vamos passar a tag <Script>, do Next. Perceba que, para utilizarmos essa tag de script, estamos passando com o PascalCase, ou seja, a primeira letra, o "S", é maiúscula.

Também vamos passar um id para a tag de <Script>, só para termos essa identificação de qual é o script que estamos adicionando. No caso, será id='newRelicScript', que é o nome da constante que criamos antes. E, dentro da tag <Script>, passaremos o {newRelicScript}, da forma que criamos a constante.

//código omitido

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang='pt-BR'>
            <head>
                <Script id='newRelicScript'>{newRelicScript}</Script>
            </head>
            <body className={poppins.className}>
                <BooksProvider>
                    <Header />
                    {children}
                </BooksProvider>
            </body>
        </html>
    );
}

Observação: Lembrem-se de fazer a importação da tag <Script>, ou ela ficará marcada como erro.

Salvamos o código, no entanto, como essa tag de configuração está rodando localmente, é necessário que fazermos um deploy dessa aplicação para que a versão desse script esteja na nossa aplicação, que nesse momento está hospedada na Vercel, para poder refletir do lado do New Relic. Então, voltaremos para a página do New Relic.

Depois da caixa de código com o script, temos o botão "See your data" (Veja seus dados), onde clicaremos. Vou parar por aqui para fazer o deploy dessa aplicação, a partir do merge e da branch.

No próximo vídeo, vamos analisar como as coisas estão funcionando: se os dados já estão aparecendo ou se pelo menos a nossa aplicação já está gerando algo relacionado à entidade do tipo browser.

Então, a seguir, continuaremos a configuração do New Relic.

Novas features no projeto - Configurando o agent do New Relic

O deploy foi realizado com sucesso, e vou mostrar para vocês. Voltando voltar ao nosso navegador, eu abri na Vercel para confirmar. Acabamos de fazer o push na branch main, que é a branch principal responsável e configurada na Vercel para o nosso deploy. Na página, temos o domínio (Domains), que é a URL gerada.

Agora conseguimos abrir nossa aplicação nesse domínio, que é um ambiente produtivo, então vamos verificar se já tem algum dado sendo gerado.

Acessando os dados

Para não gerarmos uma expectativa muito grande, entidades do tipo browser demoram a partir de 24 horas para gerarem dados no New Relic. Isso pode ocorrer devido a questões de ping, monitorações e outros dados que podem demorar a aparecer. Na documentação oficial, é mencionado o prazo de 24 horas, e é importante sabermos disso para caso não haja nenhum dado ainda do lado da nossa aplicação.

Ao acessarmos nossa entidade Buscante-browser, clicando no botão "See your data", ao final da página do nosso script, notamos que realmente não recebemos nenhum dado. Também, acabamos de fazer o deploy, e ainda não navegamos, mas a nossa entidade Buscante, do tipo browser, que chamamos de Buscante-browser, já está configurada na nossa aplicação.

Acessando a página inicial da Buscante novamente, agora pelo domínio gerado, vamos fazer outra pesquisa por "harry potter". Você deve estar se perguntando por que sempre pesquisamos por Harry Potter. Eu não sou tão fã, mas foi o primeiro nome que me veio à cabeça quando comecei a codar esse projeto.

Podemos fechar aba da Vercel e voltar à aba do Buscante-browser para verificarmos se já tem alguma informação aparecendo. Continuamos sem receber dados de navegação ou requisição. Também não há dados em "Error" e "Page views".

De volta na página da Buscante, vamos pesquisar "Casa do Código". Recebemos vários livros da editora Casa do Código, então vamos voltar ao New Relic para descobrir se ele captou alguma requisição. Por enquanto, ainda não temos nenhum dado, mas não fique triste. Existe esse atraso de 24 horas até os dados começarem a aparecer.

Mas existe solução para tudo, e podemos configurar o nosso projeto para que ele gere dados ao tempo de desenvolvimento. Para isso, precisamos configurar o nosso agent, que já fizemos em uma configuração passada no Buscante.

Quando fizemos a configuração do agent em uma entidade do tipo APM, criamos um arquivo chamado newrelic.js, colocamos lá algumas informações, habilitamos alertas, entre outras coisas. Caso você esteja fazendo esse curso sem ter feito essas configurações, temos um conteúdo específico onde criamos essa entidade do tipo APM para o Buscante. Se você ainda não viu, recomendamos muito que você pause o vídeo e siga as etapas da atividade para podermos seguir.

Caso você já tenha feito essa configuração, ou esteja acompanhando através da conta de testes que a New Relic oferece, vamos acessar a página "Node.js agent configuration" da documentação oficial. No lado direito da página, temos um menu de navegações pelas seções desse documento. Clicaremos na seção "Browser monitoring variables" (Variáveis de monitoramento do tipo Browser).

Ao acessarmos a seção "Browser monitoring variables", notamos que, infelizmente, está tudo em inglês. Mesmo que façamos a tradução literal do site, como aquela tradução pelo Google, não fica tão fiel ao que quer dizer. Então, tentarei ao máximo traduzir o que estamos fazendo e o que estamos consultando na documentação.

Aplicando o monitoramento de Browser

Na seção "Browser Monitoring Variables, temos a informação de que conseguimos adicionar essa monitoração do tipo browser para uma aplicação configurada como APM, como o Buscante, que fizemos anteriormente. Ela não vem ativada e temos que fazer essa ativação, o objeto browser_ monitoring dentro do nosso newrelic.js.

Vamos copiar o nome do objeto, ou seja, browser_monitoring e voltaremos ao nosso código. O script do newrelic.js está na raiz do nosso projeto. Então vamos recolher a pasta "src" para facilitar a localização. Na lista de arquivos, temos o newrelic.js, que vamos abrir.

Para aplicarmos esse browser_monitoring, na linha 45, após a vírgula do application_logging:{}, vamos pressionar "Enter" e vamos colar o nome do objeto. Depois vamos adicionar as chaves e adicionar uma vírgula.

O browser_monitoring vem desabilitado como padrão, por isso estamos codando ele agora. Dentro das chaves desse nosso objeto, vamos escrever enable: true. Sabemos que existe esse enable porque, na documentação, temos uma lista de propriedades que esse objeto contém:

• enable
• debug
• attributes.enabled
• attributes.exclude
• attributes.include

Reparem que a propriedade é "enable", sem a letra "D" no final, então confiram se escreveram corretamente. Além disso, temos o debug, que é configurado caso queiramos fazer esse debug fora do servidor, ou seja, caso queiramos testar localmente. Temos também três opções para criarmos atributos customizados. Com essas opções conseguimos ativar, excluir ou incluir atributos nessa configuração do browser_monitoring.

Após ativamos o browser_monitoring, vamos ativar o debug. Então voltaremos para o código e, abaixo do enable, vamos escrever outra linha e codar debug: true.

//código omitido

"application_logging": {
    "forwarding": {
        "enabled": true
    },
},
browser_monitoring: {
    enable: true,
    debug: true,
},

//código omitido

Na documentação, quando clicarmos em "debug", sabemos qual é o tipo dele, no caso, booleano e, por padrão false. Também poderíamos configurar uma variável de ambiente para ele, mas não será o nosso caso, porque queremos rodar isso localmente.

Vamos salvar esse arquivo e parar a nossa aplicação, que está rodando no momento. Em seguida, no Terminal, rodaremos o npm run dev para executar a aplicação novamente.

Conferindo os resultados das alterações

Com a aplicação executada, voltaremos ao navegador para conferir como nosso Buscante ficou. Antes, percebam que interessante: assim que rodamos o servidor no Visual Studio, ele fez uma alteração no arquivo newrelic_agent.log.

Na barra de opções da lateral esquerda do Visual Studio, clicaremos no botão "Source Control", que tem um ícone de circuitos em forma de Y. Essa opção é a que controla o git que está observando o nosso projeto.

Com o Source Control aberto, conseguimos ver quais arquivos que foram alterados, ou seja, o newrelic_agent.log e o newrelic.js. Se clicarmos no newheavic_agent.log, aparecerá várias linhas de código, mostrando qual é o local que ele está rodando.

No caso, ohostname está com o nome nosso computador. Ele também tem o horário que ele está rodando, o log de mensagem e várias informações que indicam que ele está o programe no nosso ambiente desenvolvimento. Portanto, estamos rodando localmente a aplicação com essas mudanças. Não fizemos deploy da nossa aplicação nesse momento.

Voltando ao nosso navegador, fecharemos a aba do Buscante que está rodando em produção e voltaremos para aba do Buscante que está rodando no localhost. Vamos fazer uma busca por "Casa do código".

Os resultados apareceram e, ao clicarmos em "Mais detalhes" de um dos livros, continuamos acessando a página de detalhes. Está funcionando corretamente.

Se voltarmos no newrelic_agent.log, no Visual Studio, e descermos, estamos na linha 469 de código. Devíamos ter olhado antes de fazer aquela busca, mas, à medida que fomos navegando, ele foi gerando log, ou seja, dados para o New Relic, mas tudo isso rodando localmente.

Vamos voltar para página do New Relic no navegador. No menu da esquerda, temos a opção "All Entites" (Todas as entidades). Se clicarmos nela, teremos a informações sobre a APM do buscante logo no começo da página. Ele está habilitado e gerando dados.

Nesse caso, não estamos falando do nosso site em ambiente produtivo. Estamos falando do Buscante rodando agora em ambiente de desenvolvimento. Até porque o nosso projeto está em produção, mas não estamos fazendo nada nele, mas ele está rodando.

Novamente no menu esquerdo, se clicarmos em "APM & Services" (APM e Serviços), teremos as informações sobre a APM. As informações sobre horário do servidor serão em um horário "neutro", ou seja, sem considerar o timezone que estamos. Porém, se começarmos a analisar esses dados, percebemos que são referentes ao que estamos alterando agora em ambiente de desenvolvimento.

Conclusão

Acabamos de configurar o nosso projeto para poder utilizá-lo em ambiente de desenvolvimento, caso queiramos também. Então, o New Relic não fica travado só para rodarmos ele em ambiente produtivo. A única coisa que temos que fazer para não ficarmos subindo arquivo de log grande alterar o .gitignore, que também fica na pasta raiz.

No final do código do .gitignore, vamos pressionar "Enter", para criarmos uma nova linha, e escrever newrelic_agent.log e salvaremos. Com isso, estamos informando que não queremos subir os logs gerados para o GitHub. Como estamos rodando local, então não tem necessidade dos logs também passarem por deploy. Se ele está sendo utilizado para local, mantemos ele somente local. Por isso, adicionamos o newrelic_agent.log, que é o nome do arquivo com os logs, no .gitignore.

Agora podemos fazer o commit e, na próxima aula, começaremos a implementar features novas no nosso projeto, rodando local e testando como está funcionando. Tem muita coisa interessante para vermos ainda dentro desse projeto.

Espero você na nossa próxima aula.

Sobre o curso React: explorando monitorações sintéticas e alertas avançados com New Relic

O curso React: explorando monitorações sintéticas e alertas avançados com New Relic possui 138 minutos de vídeos, em um total de 41 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Novas features no projeto
• Criando a minha estante
• New Relic: monitorações sintéticas
• New Relic: alertas de monitorações sintéticas
• Últimos ajustes no projeto