Google Translate: O inimigo oculto da minha aplicação
Recentemente, enfrentei um desafio interessante com um produto que desenvolvi utilizando ReactJS e TypeScript. A aplicação é focada na criação de provas e processos avaliativos. O componente principal realiza duas requisições: uma para obter todas as questões de uma avaliação e outra para retornar as alternativas de cada questão. Com uma média de cinco alternativas por questão, essas requisições montam a avaliação completa.
No entanto, comecei a lidar com um erro persistente de DOM que estava afetando a funcionalidade da aplicação:
DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
Após muita pesquisa, descobri que esse erro ocorria principalmente ao acessar a aplicação via Google Chrome, especialmente quando o Google Tradutor estava habilitado. O Google Tradutor injetava seu plugin na página, alterando a DOM e causando memory leaks.
Esse memory leak acontecia porque o Google Tradutor percorria todas as 40 questões da prova e suas 200 alternativas, traduzindo cada uma delas. Isso sobrecarregava a DOM, resultando no erro.
O impacto desse problema foi considerável, afetando mais de cem provas em um processo seletivo que utilizava meu produto. A solução, felizmente, foi simples. Mudamos o navegador padrão de Google Chrome para Firefox e adicionei a seguinte meta tag no index.html da aplicação para impedir a ativação do Google Tradutor:
<meta name="google" content="notranslate" />
Com essa alteração, consegui eliminar o problema de memory leak e garantir a estabilidade da aplicação.
Este episódio foi uma valiosa lição sobre a importância de considerar todos os fatores externos que podem interferir na funcionalidade de uma aplicação web, especialmente em dispositivos mais fracos. Otimizar a aplicação para garantir que ela funcione perfeitamente em diversos hardwares é crucial para proporcionar uma experiência de usuário consistente e eficiente.
Para aqueles que enfrentam problemas semelhantes, recomendo verificar se plugins ou extensões do navegador estão influenciando a DOM e considerar soluções como a utilização de meta tags para controlar o comportamento de tais plugins. Manter a performance otimizada para dispositivos "mais fracos" é essencial para alcançar um público mais amplo e garantir que todos os usuários tenham uma experiência satisfatória.
Mas e aí, você já enfrentou algo parecido? Vamos trocar essa ideia.
Referências
- StackOverflow: Why do I get a DOMException when I use the auto-translate feature in Chrome?
- Make React resilient to DOM mutations from Google Translate
- DOMException Documentation
Social
Outros artigos:
Por que você desenvolvedor deveria aprender a utilizar o Figma