F339 dentro de uma caixa onde deveria estar o ícone de "Get More Features"

Nossa página de preços tinha três caixas vazias onde deveriam estar os ícones, e nas nossas próprias telas ela parecia perfeita. Pedi um hotfix.

O agente que pegou a tarefa encontrou a causa. Os três ícones dessa página, incluindo o que fica ao lado de “Get More Features!”, são desenhados a partir de uma fonte de ícones, e o template por trás das páginas públicas de eventos nunca carrega a folha de estilo dessa fonte. A produção servia os arquivos da fonte normalmente (o arquivo woff2 tinha 57.764 bytes). A página simplesmente nunca os solicitava.

A página que escondia o próprio bug

O agente não conseguiu fazer as caixas aparecerem. A captura de tela da produção ao vivo mostrava o ícone renderizado, o que escondia o bug. Meu desktop tem uma cópia mais antiga dessa fonte (V14) instalada como fonte do sistema, então a página parecia normal aqui. Nossa primeira olhada na página ao vivo dizia que estava tudo bem, e não estava.

A correção foi uma linha: um link para a folha de estilo da fonte de ícones no template. Na cópia local do site, a página agora tinha o link e o navegador informava a fonte como carregada. Mas a captura de tela “depois” ficou idêntica à “antes”, pelo mesmo motivo. O agente escreveu que não tinha observado uma caixa vazia em nenhuma máquina, então não ia dar o bug como corrigido.

Um segundo agente verificou o trabalho de forma independente e voltou com PASS WITH CAVEATS. Ele confirmou que as cópias ttf e svg da fonte servidas pela produção têm os códigos dos três ícones. Não conseguiu decodificar o arquivo woff2, que é o primeiro que os navegadores carregam, e ninguém tinha visto os ícones renderizados a partir da fonte web. O pedido de publicação listava o que não foi verificado, e a mensagem seguinte deixou tudo em espera até que três novas capturas de tela voltassem.

Montando um navegador que não pudesse trapacear

Não havia BrowserStack nem serviço parecido, nem credenciais para algum, e o ssh para a outra máquina deu timeout. O que nos destravou foi um navegador que não enxergasse as minhas fontes instaladas. O Firefox do Playwright já estava na máquina, e o Firefox tem uma configuração que esconde as fontes instaladas pelo usuário. Não dava para saber se essa configuração funcionava nesta versão, então o teste tinha que provar a si mesmo: a primeira captura precisava ser a produção como estava, mostrando as caixas vazias. Se não mostrasse, o ambiente de teste era inválido.

Ele mostrou. “Get More Features!” exibia a caixa de glifo ausente com F339 dentro. Com a correção no site local, o mesmo bloco mostrava o ícone roxo. Com apenas o link da folha de estilo injetado na produção, o ícone foi desenhado a partir do woff2 da própria produção, o que fechou a lacuna que o verificador tinha deixado.

Eu disse “ok ship it.” A correção foi ao ar como um release de hotfix. O agente executou de novo o mesmo Firefox contra a produção sem alterações, e os três ícones apareceram. A execução de controle anterior tinha mostrado caixas.

O que ainda não sabemos

Só rodamos o Firefox, então Chrome e Safari não foram conferidos. Também não olhamos em um navegador as outras páginas que agora recebem o link. Sobre o tempo, o agente rastreou os ícones até o release que trouxe pela primeira vez a reconstrução da página de preços, cerca de 5 semanas atrás, assumindo que essa tag seja o release de produção. Se isso se confirmar, quem não tem a fonte instalada está vendo caixas há cerca de 5 semanas, enquanto nossas próprias telas continuavam normais.

No Firefox com as fontes instaladas pelo usuário escondidas, o bloco “Get More Features!” mostrava uma caixa com F339 dentro antes da correção. Depois da publicação, a produção sem alterações desenhou os três ícones.