{"id":17897,"date":"2021-05-13T11:35:00","date_gmt":"2021-05-13T11:35:00","guid":{"rendered":"https:\/\/www.dotcom-monitor.com\/blog\/2021\/05\/13\/desafios-monitoramento-aplicativos-reactjs\/"},"modified":"2026-06-15T02:46:11","modified_gmt":"2026-06-15T02:46:11","slug":"desafios-monitoramento-aplicativos-reactjs","status":"publish","type":"post","link":"https:\/\/www.dotcom-monitor.com\/blog\/pt-br\/desafios-monitoramento-aplicativos-reactjs\/","title":{"rendered":"Desafios monitoramento aplicativos ReactJS"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

O ReactJS combina a velocidade do JavaScript com recursos de renderiza\u00e7\u00e3o exclusivos para tornar aplicativos altamente din\u00e2micos, orientados ao desempenho e responsivos \u00e0 entrada do usu\u00e1rio. O relat\u00f3rio State of JS 2018<\/a> <\/span>cita o desempenho como a principal raz\u00e3o pela qual a ReactJS ganhou tanta popularidade em t\u00e3o pouco tempo. Quando se trata de op\u00e7\u00f5es para a constru\u00e7\u00e3o de spAs (single-page applications, aplicativos de p\u00e1gina \u00fanica), o React oferece vantagens de desempenho sobre as estruturas e bibliotecas Do JavaScript e angular. Uma vez que o React mant\u00e9m um DOM virtual no JavaScript, ele pode determinar rapidamente as altera\u00e7\u00f5es m\u00ednimas necess\u00e1rias para levar o documento ao estado desejado. Uma vez que o estado de um componente React \u00e9 salvo em JavaScript, voc\u00ea pode evitar acessar o DOM.<\/p>\n

Para aplica\u00e7\u00f5es pequenas, as otimiza\u00e7\u00f5es de desempenho que o ReactJS entregam fora da caixa s\u00e3o mais do que suficientes. No entanto, \u00e0 medida que seus aplicativos evoluem para incluir vis\u00f5es mais complexas, manter e paralelamente dos DOMs virtuais pode se tornar um caso caro. Uma grande aplica\u00e7\u00e3o \u00e9 uma \u00e1rvore de renderiza\u00e7\u00e3o enorme, ramificada e complicada. Sempre que voc\u00ea atualizar os adere\u00e7os para um n\u00f3, React deve reconfigurar a \u00e1rvore de renderiza\u00e7\u00e3o do n\u00f3 todo o caminho at\u00e9 os galhos e, finalmente, a folha, onde ocorrem compara\u00e7\u00f5es virtuais do DOM.<\/p>\n

No entanto, \u00e0 medida que a base de usu\u00e1rios cresce, um aplicativo tende a crescer em complexidades, carregar mais depend\u00eancias e incorporar mais plugins de terceiros. Sua probabilidade de atingir gargalos de desempenho s\u00f3 se expande. Multiplique isso com um n\u00famero crescente de aplicativos em milh\u00f5es de dispositivos habilitados para a Web de v\u00e1rios tamanhos e tipos e voc\u00ea n\u00e3o pode evitar um potencial pesadelo de desempenho.<\/p>\n

Por exemplo, os usu\u00e1rios esperam 60 quadros por segundo ao interagir com um aplicativo da Web no navegador, o que lhe d\u00e1 apenas 16,7ms para renderizar cada quadro. Quando seu aplicativo est\u00e1 lento, muitas vezes est\u00e1 demorando muito para responder aos eventos do usu\u00e1rio, demorando muito para processar os dados ou reer renderizar os novos dados. Na maioria dos casos, voc\u00ea n\u00e3o est\u00e1 fazendo um processamento complexo de dados no Rel\u00f3gio – voc\u00ea est\u00e1 perdendo tempo re renderizando.<\/p>\n

Sem d\u00favida, mesmo o aplicativo React mais perfeitamente projetado e otimizado exige uma ferramenta de monitoramento de desempenho.<\/p>\n

<\/p>\n

Suportes de componentes de monitoramento com profiler<\/h3>\n

O n\u00famero de vezes que os componentes re renderizam, juntamente com a quantidade de recursos e o tempo levado, pode dizer muito sobre o desempenho de sua aplica\u00e7\u00e3o React na produ\u00e7\u00e3o. O componente Profiler \u00e9 um componente React incorporado que mede o tempo de “montagem” ou “atualiza\u00e7\u00e3o” de um subtree componente. sempre que um componente \u00e9 atualizado ou montado,<\/span> <\/span>a fun\u00e7\u00e3o onRender<\/em> do Profiler \u00e9 carimbada por tempo. O Profiler fornece uma maneira acess\u00edvel de visualizar problemas em aplicativos React.<\/p>\n

<\/p>\n

import { unstable_Profiler as Profiler } from \"react\"\n\n<Profiler id=\"Counter\" onRender={callback}>\n\n    <Counter \/>\n\n<\/Profiler><\/pre>\n
<\/p>\n
O suporte de identifica\u00e7\u00e3o<\/em> identifica o relat\u00f3rio, enquanto a fun\u00e7\u00e3o onRender<\/em> est\u00e1 associada a argumentos quando o componente Counter<\/em> \u00e9 montado ou revisado.<\/p>\n
<\/p>\n
function callback(id, phase, actualTime, baseTime, startTime, commitTime) {\n\nlog(\"id: \" + id, \"phase:\" + phase, \"actualTime:\" + actualTime,   \"baseTime: \" + baseTime, \"startTime: \" + startTime, \"commitTime: \" +  commitTime)\n\n}<\/pre>\n
<\/p>\n
Os argumentos da fun\u00e7\u00e3o s\u00e3o carimbos de tempo coletados de quando o componente Contador<\/em> foi renderizado. Vamos dar uma olhada em cada um dos par\u00e2metros.<\/p>\n
<\/p>\n
id<\/strong>. O ID exclusivo associado ao componente Profiler.<\/p>\n
fase<\/strong>. Isso detecta a fase seja na fase “montar” ou na fase de “atualiza\u00e7\u00e3o”.<\/p>\n
realTime<\/strong>. O tempo levado pelo Profiler para renderizar atualiza\u00e7\u00f5es comprometidas.<\/p>\n
baseTime<\/strong>. O tempo levado por um dos componentes na \u00e1rvore Profiler para montar ou atualizar.<\/p>\n
startTime<\/strong>. Registra o carimbo de hora que o Profiler come\u00e7a a medir o tempo de montagem\/renderiza\u00e7\u00e3o de seus descendentes.<\/p>\n
cometerTime<\/strong>. O tempo que React levou para cometer uma atualiza\u00e7\u00e3o.<\/p>\n
<\/p>\n
Componentes de monitoramento que s\u00e3o re renderizados usando ferramentas de desenvolvedor react<\/h3>\n
Durante o desenvolvimento, se voc\u00ea descobrir qual componente est\u00e1 sendo re renderizado, ele pode salvar sua aplica\u00e7\u00e3o na produ\u00e7\u00e3o de v\u00e1rios gargalos de desempenho. As ferramentas de desenvolvedor react tornam isso simples para o desenvolvedor colorindo os limites dos componentes, sempre que eles est\u00e3o reativando. Se os componentes principais voltarem a renderizar, as bordas que capturam os componentes Contador<\/em> e Contagem<\/em> ser\u00e3o brevemente destacadas.<\/p>\n
O tipo de cor que aparece depende da frequ\u00eancia\/frequ\u00eancia que um componente \u00e9 re renderizado, dando-lhe a capacidade de identificar facilmente qual componente atualiza com mais frequ\u00eancia para que voc\u00ea possa otimiz\u00e1-lo adequadamente.<\/p>\n
<\/p>\n
| verde – atualiza\u00e7\u00e3o de baixa frequ\u00eancia <\/em><\/p>\n
| azul – atualiza\u00e7\u00e3o de frequ\u00eancia m\u00e9dia <\/em><\/p>\n
v vermelho – denota uma atualiza\u00e7\u00e3o muito frequente <\/em><\/p>\n
<\/p>\n
Identifica\u00e7\u00e3o de problemas perf com react.addons.Perf<\/h3>\n
Para iniciar o Perf, voc\u00ea deve ligar para Perf.start()<\/em> do console, gravar a a\u00e7\u00e3o e chamar Perf.stop()<\/em> para parar Perf. Em seguida, voc\u00ea pode chamar qualquer um dos seguintes m\u00e9todos para visualizar conjuntos de medidas \u00fateis.<\/p>\n
Perf.printWasted()<\/strong><\/pre>\n
Perf.printWasted()<\/em> \u00e9 o m\u00e9todo mais \u00fatil que voc\u00ea chama no React.addons.Perf. Perf.printWasted()diz que o tempo perdido contraindo \u00e1rvore renderizante e comparando DOMs virtuais entre si. Esses componentes s\u00e3o mencionados acima s\u00e3o os principais candidatos para melhorar o desempenho da sua aplica\u00e7\u00e3o React.<\/p>\n
<\/p>\n
Perf.printInclusive() \/ Perf.printExclusive()<\/strong><\/pre>\n
Perf.printInclusive()<\/em> e Perf.printExclusive()<\/em> devolu\u00e7\u00e3o do tempo que ele se apropriou para renderizar seus componentes. A maioria dos desenvolvedores n\u00e3o achar\u00e1 esse m\u00e9todo muito \u00fatil, pois os problemas de desempenho desencadeados pela renderiza\u00e7\u00e3o s\u00e3o normalmente resolvidos por n\u00e3o renderizar usando o m\u00e9todo acima: Perf.printWasted()<\/em>.<\/p>\n
No entanto, o m\u00e9todo pode ajud\u00e1-lo a identificar componentes que est\u00e3o realizando c\u00e1lculos pesados em m\u00e9todos de ciclo de vida. Voc\u00ea aprender\u00e1 que depois de corrigir problemas impressosSus,<\/em> \u00e9 o seu c\u00f3digo de aplicativo n\u00e3o otimizado que est\u00e1 armazenando esses recursos preciosos. Alternativamente, voc\u00ea pode trazer o JavaScript Profiler padr\u00e3o do Chrome DevTool e dar uma olhada nas chamadas de fun\u00e7\u00e3o mais pesadas diretamente.<\/p>\n
<\/p>\n
Perf.printDOM()<\/strong><\/pre>\n
Perf.printDOM()<\/em> mostra todas as opera\u00e7\u00f5es do DOM desencadeadas durante a renderiza\u00e7\u00e3o de \u00e1rvores React. Se voc\u00ea est\u00e1 jogando com reactJS por um bom tempo, ent\u00e3o voc\u00ea sabe que esta \u00e9 talvez a parte mais complicada. Para navegar em uma lista intermin\u00e1vel de linhas e coluna se o seu aplicativo \u00e9 bastante complexo, pode levar a eternidade para detectar o que exatamente deu errado.<\/p>\n
Uma vez que seu primeiro conjunto de componentes seja renderizado, voc\u00ea espera que as futuras re-renderiza\u00e7\u00f5es reutilizem os n\u00f3s DOM existentes e n\u00e3o criem n\u00f3s novos \u2014 uma otimiza\u00e7\u00e3o proporcionada pelo DOM virtual da React e dada por todos os desenvolvedores do React.<\/p>\n
Perf.printDOM()<\/em> \u00e9 \u00fatil para encontrar esquisitices peculiares e caras do navegador ou monitorar modifica\u00e7\u00f5es principais e imprevis\u00edveis do DOM.<\/p>\n
<\/p>\n
Monitoramento sint\u00e9tico para aplica\u00e7\u00f5es web ReactJS<\/h3>\n
Embora os m\u00e9todos acima mencionados sejam essenciais para monitorar o desempenho de um aplicativo React, eles n\u00e3o conseguem imitar as a\u00e7\u00f5es que um usu\u00e1rio t\u00edpico realiza ao usar o aplicativo. Uma plataforma de monitoramento sint\u00e9tico, combinada com um gravador de script,<\/a> <\/span>pode executar e reproduzir scripts pr\u00e9-gravados, simulando transa\u00e7\u00f5es de usu\u00e1rio e a\u00e7\u00f5es t\u00edpicas do usu\u00e1rio em um navegador real. Por exemplo, navega\u00e7\u00e3o b\u00e1sica, envios de formul\u00e1rios, transa\u00e7\u00f5es de carrinho de compras, jogos online, velocidade de rolagem, anima\u00e7\u00f5es, etc.<\/p>\n
Embora o Perf seja uma excelente ferramenta para monitorar a quantidade de tempo perdido na renderiza\u00e7\u00e3o de \u00e1rvores e comparar o DOM virtual com o DOM real, ele n\u00e3o se traduz no que os usu\u00e1rios podem experimentar ao usar o aplicativo. As solu\u00e7\u00f5es sint\u00e9ticas de monitoramento de aplicativos web,<\/a> <\/span>como as oferecidas pelo Dotcom-Monitor,<\/a> <\/span>consistem em uma ferramenta de scripting f\u00e1cil de usar para escrever seus v\u00e1rios scripts de teste de monitoramento. Esses scripts podem ser executados em ambiente de teste privado e verifica sua aplica\u00e7\u00e3o web para v\u00e1rios par\u00e2metros em intervalos regulares. O uso de uma ferramenta de monitoramento sint\u00e9tico que usa navegadores reais permite obter resultados de desempenho mais precisos.<\/p>\n
Al\u00e9m disso, o monitoramento sint\u00e9tico pode ser executado usando diferentes dispositivos, navegadores e localiza\u00e7\u00f5es geogr\u00e1ficas. Com aplicativos de p\u00e1gina \u00fanica, a velocidade inicial de carga da p\u00e1gina n\u00e3o \u00e9 t\u00e3o importante quanto a experi\u00eancia do usu\u00e1rio final. N\u00e3o s\u00f3 \u00e9 vital garantir que seus aplicativos estejam funcionando, mas a funcionalidade tamb\u00e9m deve ser monitorada. Por exemplo, os usu\u00e1rios podem executar as a\u00e7\u00f5es necess\u00e1rias e quais, se houver, servi\u00e7os ou APIs de terceiros est\u00e3o causando atrasos ou problemas.<\/p>\n
O objetivo do monitoramento de aplicativos web \u00e9 automatizar o processo de identifica\u00e7\u00e3o de problemas antes que eles afetem um n\u00famero maior de usu\u00e1rios. Com o monitoramento sint\u00e9tico, voc\u00ea pode configurar alertas com base nos requisitos para o seu aplicativo reage espec\u00edfico e ser notificado imediatamente quando algo der errado. Ao contr\u00e1rio das outras ferramentas discutidas acima, o monitoramento sint\u00e9tico adota uma abordagem proativa, liberando voc\u00ea do processo demorado de voc\u00ea e sua equipe terem que executar testes manuais.<\/p>\n
<\/p>\n
Monitoramento de aplicativos ReactJS: Conclus\u00e3o<\/h3>\n
Embora essas ferramentas sejam \u00fateis para monitorar suas aplica\u00e7\u00f5es React em ambientes de desenvolvimento, monitorar o desempenho na produ\u00e7\u00e3o \u00e9 um desafio de outra magnitude e carrega mais peso. Ceder \u00e0 mentalidade de “funciona na minha m\u00e1quina” \u00e9 um conto de advert\u00eancia quando o desempenho de sua aplica\u00e7\u00e3o na produ\u00e7\u00e3o est\u00e1 em jogo. Ferramentas de monitoramento sint\u00e9ticos, por outro lado, d\u00e3o relat\u00f3rios de desempenho da perspectiva de um usu\u00e1rio final, n\u00e3o de alguns casos de teste clich\u00eas imaginados pelos desenvolvedores. No entanto, se voc\u00ea est\u00e1 procurando aumentar o n\u00edvel do seu monitoramento de desempenho ReactJS, obtenha um teste gratuito de 30 dias do Dotcom-Monitor hoje<\/a><\/span>.<\/p>\n
<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"
O ReactJS combina a velocidade do JavaScript com recursos de renderiza\u00e7\u00e3o exclusivos para tornar aplicativos altamente din\u00e2micos, orientados ao desempenho e responsivos \u00e0 entrada do usu\u00e1rio. O relat\u00f3rio State of JS 2018 cita o desempenho como a principal raz\u00e3o pela qual a ReactJS ganhou tanta popularidade em t\u00e3o pouco tempo. Quando se trata de op\u00e7\u00f5es para a […]<\/p>\n","protected":false},"author":21,"featured_media":17899,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-17897","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/17897","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/pt-br\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/pt-br\/wp-json\/wp\/v2\/comments?post=17897"}],"version-history":[{"count":0,"href":"https:\/\/www.dotcom-monitor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/17897\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media\/17899"}],"wp:attachment":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media?parent=17897"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/pt-br\/wp-json\/wp\/v2\/categories?post=17897"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/pt-br\/wp-json\/wp\/v2\/tags?post=17897"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}