Cinco erros de JavaScript que atacam sem aviso

“A Web é o ambiente de engenharia de software mais hostil que se possa imaginar.”

– Douglas Crockford

Executamos aplicativos Web em um ambiente hostil. A cada visualização de página, nosso JavaScript é implantado em uma rede imprevisível em um navegador que não controlamos. É assustador, mas detalhamos cinco erros de JavaScript que afetam os aplicativos JavaScript atualmente, geralmente sem que os desenvolvedores sequer saibam do problema.

1. Falhas no carregamento de ativos

A maioria dos aplicativos Web carrega alguns ativos JavaScript: uma estrutura de uma CDN, alguns plug-ins de terceiros e um ou mais arquivos de script personalizados. O que aconteceria se alguns ou todos eles deixassem de ser carregados?

Essa não é uma pergunta hipotética. As estatísticas do TrackJS mostram que, em média, 1 em cada 500 visualizações de página é afetada por uma falha de carga. Isso pode acontecer por vários motivos: conexões de rede ruins, falhas no servidor, alterações no provedor e ataques DDoS.

De certa forma, a falha completa é um caso mais fácil de lidar. Se nenhum JavaScript for carregado, seu aplicativo de página única simplesmente mostrará uma interface de usuário vazia ou “No JavaScript”. Mas pode ser muito mais perigoso se apenas um script não for carregado.

Por exemplo, a falha no carregamento de uma biblioteca de processador de pagamento pode expor detalhes transacionais e informações pessoais. A falha no carregamento de uma rede social, de publicidade ou de conteúdo pode impedir a renderização de parte da interface do usuário.

2. Condições de corrida assíncrona

Grande parte do JavaScript envolve a configuração e a resposta a eventos assíncronos, como ações do usuário ou transmissões de rede. Quando várias ações assíncronas precisam ser combinadas para produzir um resultado, o senhor tem os ingredientes para uma condição de corrida. Considere este exemplo simples:

var obj = {};

$.post("/api/thing1", {}, function (resp) {
	obj.thing1 = resp;
});

$.post("/api/thing2", {}, function (resp) {
	obj.thing2 = resp;
	obj.result = obj.thing1 + obj.thing2;
});

Há duas solicitações AJAX iniciadas. Quando a segunda é concluída, as duas respostas são combinadas para obter um resultado. Isso funciona bem quando “/api/coisa1” termina antes de “/api/coisa2”, o que pode ser verdade em seu ambiente local. Mas, ao introduzir uma rede real, as ordens podem se inverter.

3. Alterações na biblioteca do fornecedor

Muitos sites tiram proveito de bibliotecas de terceiros: processadores de pagamento, análises, anunciantes ou redes sociais. Cada uma delas fornece serviços valiosos que facilitam a criação de algo incrível para todos nós.

Mas devemos reconhecer que estamos introduzindo uma dependência e um risco com essas bibliotecas. Os fornecedores podem alterar sua API ou seu desempenho sem aviso prévio.

4. Alterações no tempo de execução do navegador

Os próprios navegadores estão mudando em nós. Todos os dias, eles corrigem bugs e lançam novos recursos. Mas, às vezes, esperamos esses bugs ou, às vezes, novos bugs são introduzidos.

Em outubro passado, a Apple enviou uma versão do WebKit para o iOS que fez alterações sutis no DOM e causou bugs no núcleo do Ember, Angular e Polymer.

Em algumas semanas, o Microsoft Edge será lançado. Ele inevitavelmente incluirá alterações no tempo de execução do JavaScript, no DOM e na interpretação do CSS. Teremos que testar novamente nossos aplicativos para garantir que todos funcionem bem nele.

5. Plug-ins invasivos do navegador

Muitos navegadores têm um ecossistema de plug-ins que os usuários podem instalar para ampliar e aprimorar as páginas que visitam. Infelizmente, esses plug-ins podem interferir no DOM e, às vezes, atrapalhar o fluxo do seu aplicativo. Basta apenas um usuário importante para que isso se torne um grande problema:

“…o chefe encontrou um bug, mas ele só acontece no computador da esposa dele. Isso precisa ser corrigido antes do lançamento!”

-Interação anônima com o cliente

Os plug-ins da barra de ferramentas de pesquisa são malwares muito comuns e frequentemente interferem nas entradas de formulários. Eles também podem alterar as características de desempenho, substituir APIs e mascarar eventos.

Monitoramento e prevenção

Executar aplicativos da Web é difícil. Como a plataforma está em constante mudança, nunca estamos “prontos”. Precisamos monitorar e testar constantemente nossos aplicativos para que funcionem com os usuários atuais, as redes que eles acessam e os navegadores e plug-ins que executam nosso aplicativo.

Após o lançamento, você deve monitorar seus aplicativos Web com TrackJS. O TrackJS monitora usuários reais no seu site e informa quando eles têm um problema. O TrackJS registra todos os seus erros de JavaScript de produção e inclui um contexto profundo sobre o que o usuário, a rede e o aplicativo estavam fazendo antes da falha. O TrackJS não se limita a contar os erros, ele fornece ao senhor o contexto para corrigi-los.

O TrackJS é uma ferramenta incrível para monitorar a confiabilidade do JavaScript do seu site. Todos os dias, recebo um e-mail listando a taxa de erros e os principais erros do meu site. Depois de fazer login na minha conta do TrackJS, posso ver detalhes sobre cada erro, incluindo navegador e versões de navegador, páginas em que o erro ocorreu e muito mais. Não existe ferramenta melhor no mercado!

– David Walsh

Obtenha hoje uma avaliação gratuita de 30 dias do TrackJS e vamos começar a encontrar e corrigir bugs para seus usuários.