O rastreamento de frustração destaca três interações de alto sinal que quase sempre indicam dor de UX: rage clicks, dead clicks e error clicks. Use como atalho de triagem para as páginas e elementos que confundem ou quebram para visitantes reais.
O que é rastreado
Três padrões de clique são capturados automaticamente assim que o feature flag está ativo.
| Tipo | Definição |
|---|---|
| Rage click | 3 ou mais cliques em 600 ms no mesmo elemento ou em uma área de 30×30 px. O usuário está clicando em algo que parece clicável mas não responde. |
| Dead click | Um clique em um elemento não interativo sem nenhuma alteração no DOM em 1 segundo. Parece clicável, não é. |
| Error click | Um clique que disparou um erro de JavaScript em até 100 ms. O clique quebrou algo. |
Estes são os três tipos de clique que o tracker captura hoje. Não há configuração adicional: quando o feature flag está ativo, o tracker monitora automaticamente todos os três.
Garantias de privacidade
Os eventos de frustração armazenam apenas sinais de diagnóstico sobre o elemento clicado — nunca o conteúdo da página ao redor.
O que é capturado:
- O seletor CSS do elemento e um breve caminho DOM (ex.:
main > section > button.checkout-confirm) - O rótulo ou texto visível do elemento, limitado a 100 caracteres (ex.: a palavra "Enviar" em um botão)
- O papel ARIA e o aria-label do elemento, quando presentes
- O estilo
cursorcalculado do elemento (usado para sinalizar a incongruência "parece clicável mas não é") - Coordenadas de clique relativas ao viewport
- A URL e o título da página
- O tipo de frustração e o timestamp
- Os IDs de sessão e visitante que o restante da sua analítica já usa
O que não é capturado: valores de formulário, conteúdo de arquivos, o conteúdo de outros elementos da página nem qualquer outro dado pessoal. Todas as strings são limitadas de forma defensiva. Se um visitante tiver Global Privacy Control ativado, o rastreamento de frustração é ignorado — assim como o restante do processamento comportamental.
Ativar para um site
- Abra Configurações → Avançado para o site que deseja rastrear.
- Role até Feature Flags e ative Frustration Tracking.
- Recarregue qualquer página aberta do site para o tracker pegar o novo flag (ele se atualiza automaticamente em ~5 minutos).
O interruptor é restrito ao plano Pro e superiores.
Onde visualizar
Abra a aba Errors no painel e mude para a subaba Frustration.
Você verá três painéis:
- Spotlight — um card em destaque no topo que seleciona automaticamente o problema de maior prioridade com base no número de eventos, usuários únicos afetados, recência e se começou após o seu último deploy. O card abre com uma frase O que aconteceu em linguagem clara ("Um visitante clicou no elemento rotulado 'Enviar' em /checkout, mas nada aconteceu"), uma causa provável, um botão Copiar seletor com um clique, um trecho Reproduzir nas DevTools pronto para colar e um botão Copiar para ticket que empacota tudo para entregar a uma pessoa desenvolvedora.
- Tendência de frustração — três cards sparkline (Rage / Dead / Error), um por tipo, com a contagem de eventos no intervalo escolhido. Alterne para um gráfico de linhas combinado com o seletor Cards / Lines no canto superior direito.
- Top hotspots — uma worklist ordenável em que cada linha é um único elemento quebrado em uma única página. Cada linha exibe o seletor, o caminho da página, o rótulo visível do elemento e as contagens por tipo. Clique em qualquer linha para expandir: a mesma frase em linguagem clara, copiar o seletor, ver eventos recentes e (para error clicks) o erro JS associado em linha. Cliques em contêineres de fundo (cliques que subiram para
<main>,<body>ou<html>a partir de espaços vazios) recebem um selo Background discreto para que você possa pulá-los à primeira vista.
É possível filtrar por tipo de frustração (Rage / Dead / Error), prefixo de URL e intervalo (1h / 24h / 7d / 30d).
Lendo o painel
A tabela "Top hotspots" é a sua worklist. Cada linha é um único elemento quebrado em uma única página — ordenável por prioridade.
Tanto o card Spotlight quanto cada linha expandida compartilham o mesmo layout de triagem:
- Uma frase O que aconteceu em linguagem clara — legível para qualquer pessoa do time, sem necessidade de conhecimento técnico.
- Um diagnóstico de Causa provável ajustado ao tipo de clique e aos sinais visíveis do elemento. O painel lê o estilo
cursordo elemento e o nome da tag para apontar os casos óbvios ("o CSS diz clicável, a tag não é um botão — transforme em um<button>ou<a>real", ou "estado de carregamento travado — o handler pode lançar uma exceção silenciosa") em vez de mostrar uma definição genérica. - Um trecho Reproduzir nas DevTools — cole no console da página e cada elemento correspondente recebe uma borda vermelha e uma linha de log
[zenovay] match, para você localizar o elemento quebrado instantaneamente. - Um botão Copiar seletor (para abrir no inspetor de elementos das DevTools) e um botão Copiar para ticket (para entregar todo o contexto — página, elemento, tipo, contagens, correção sugerida — em um único colar para uma pessoa desenvolvedora).
- Para error clicks: a mensagem de erro JavaScript vinculada e um botão Copiar fingerprint para pivotar para a aba Errors.
- Os últimos eventos no mesmo elemento, com coordenadas de viewport e IDs de sessão.
O card Spotlight seleciona automaticamente o problema de maior prioridade usando:
priority = (rage × 3 + dead × 1.5 + error × 5) × ln(unique_users + 1) × recency_boost
O boost de recência é 1.5× dentro das últimas 24 h. Cliques em contêineres de fundo são fortemente despriorizados, então nunca acabam como Spotlight. Se um hotspot começou depois do seu último deploy do GitHub, a linha recebe um selo NEW âmbar — quase sempre uma regressão.
Dicas de triagem
- Comece pelo Spotlight. Leia a frase em linguagem clara, percorra o diagnóstico de causa provável, copie o trecho das DevTools e cole no console da página — o elemento quebrado ficará destacado.
- Repasse para uma pessoa desenvolvedora em um único colar. Se você é PM ou fundador(a) e identificou um problema, o botão Copiar para ticket empacota página, elemento, tipo de clique, contagens e correção sugerida em uma única mensagem para colar no Linear, Jira ou Slack.
- Fique de olho no selo NEW. Hotspots marcados como novos desde o seu último deploy quase sempre são regressões que merecem ser corrigidas primeiro.
- Combine rage com error. Rage clicks no mesmo seletor de um error click apontam para uma exceção real — corrija o erro JS e a rage normalmente desaparece junto.
- Dead clicks revelam expectativas. Uma página em que muitos visitantes dão dead click no mesmo div mostra o que eles imaginavam ser clicável. Ou torne-o interativo, ou remova a pista visual (ex.:
cursor: pointer). - Pule as linhas Background. Linhas com a tag Background são cliques que caíram em espaços vazios e subiram até um contêiner; raramente indicam um bug real.
Limitações
- Os eventos de frustração são retidos por aproximadamente 90 dias e depois são purgados automaticamente. São sinais de triagem, não um arquivo permanente — investigue hotspots enquanto estiverem frescos.
- A captura é limitada na camada do tracker para evitar contagens descontroladas em páginas quebradas — você vê uma amostra representativa, não cada clique.
- Os hotspots agregam toda a janela de dados armazenados; o gráfico respeita o intervalo escolhido.