README.md

🕵️ PostHog Event Spy (JSON Interceptor)

Este script é uma ferramenta rápida de debug para interceptar e visualizar eventos do PostHog diretamente no Console do navegador, antes que eles sejam comprimidos (Gzip) e enviados para a rede.

🛑 O Problema

Por padrão, o PostHog comprime os dados de eventos (payload) usando Gzip antes de enviá-los. Isso faz com que, ao inspecionar a aba Network do Chrome, o conteúdo apareça como caracteres ilegíveis/binários, dificultando a validação de propriedades customizadas (como em eventos de $dead_click).

⚡ A Solução

Este snippet utiliza uma técnica de Monkey Patching na função nativa JSON.stringify. Ele cria um "pedágio" que:

1. Verifica se o objeto sendo convertido é um evento do PostHog (ex: $dead_click ou $autocapture).
2. Imprime o objeto limpo e legível no Console.
3. Permite que o fluxo original continue (conversão e compressão) sem quebrar a aplicação.

🚀 Como usar

1. Abra o seu site onde o PostHog está instalado.
2. Abra o DevTools do navegador (F12 ou Botão Direito > Inspecionar).
3. Vá para a aba Console.
4. Copie o código do arquivo posthog-event-spy.js e cole no console.
5. Pressione Enter.
6. Interaja com o site (ex: faça os cliques rápidos para gerar o dead_click).
7. Veja o objeto JSON completo e colorido aparecer no Console.

⚠️ Notas

• Temporário: Esse script só funciona na sessão atual da página. Se você der refresh (F5), precisará rodar o script novamente.
• Seguro: Ele não altera os dados enviados para o PostHog, apenas "espia" o conteúdo antes do envio.
• Filtros: O script está configurado para olhar especificamente eventos $dead_click e $autocapture. Você pode editar a condição if para monitorar outros eventos se desejar.

---

Dica: Útil quando você não tem acesso imediato ao painel de "Activity" do PostHog ou quando precisa debugar implementações em tempo real.

posthog-event-spy.dist.js

javascript:(function()%7B%2F%2F%20Salva%20a%20fun%C3%A7%C3%A3o%20original%0Aconst%20originalStringify%20%3D%20JSON.stringify%3B%0A%0A%2F%2F%20Cria%20um%20espi%C3%A3o%0AJSON.stringify%20%3D%20function(value%2C%20replacer%2C%20space)%20%7B%0A%20%20%2F%2F%20Se%20o%20objeto%20for%20um%20evento%20do%20PostHog%20(tem%20type%20ou%20event)%0A%20%20if%20(value%20%26%26%20(value.event%20%3D%3D%3D%20'%24dead_click'%20%7C%7C%20value.event%20%3D%3D%3D%20'%24autocapture'))%20%7B%0A%20%20%20%20console.log('%25c%20%F0%9F%8E%AF%20EVENTO%20CAPTURADO%20ANTES%20DE%20COMPRIMIR%3A'%2C%20'background%3A%20%23222%3B%20color%3A%20%23bada55%3B%20font-size%3A14px')%3B%0A%20%20%20%20console.log(value)%3B%20%2F%2F%20Mostra%20o%20objeto%20bonitinho%0A%20%20%7D%0A%20%20%0A%20%20%2F%2F%20Deixa%20o%20site%20continuar%20funcionando%20normal%0A%20%20return%20originalStringify.apply(this%2C%20arguments)%3B%0A%7D%3B%0A%0Aconsole.log(%22%F0%9F%95%B5%EF%B8%8F%20Espi%C3%A3o%20ativado!%20Tente%20dar%20os%20dead%20clicks%20agora.%22)%3B%7D)()%3B

posthog-event-spy.source.js

// Salva a função original
const originalStringify = JSON.stringify;

// Cria um espião
JSON.stringify = function(value, replacer, space) {
  // Se o objeto for um evento do PostHog (tem type ou event)
  if (value && (value.event === '$dead_click' || value.event === '$autocapture')) {
    console.log('%c 🎯 EVENTO CAPTURADO ANTES DE COMPRIMIR:', 'background: #222; color: #bada55; font-size:14px');
    console.log(value); // Mostra o objeto bonitinho
  }
  
  // Deixa o site continuar funcionando normal
  return originalStringify.apply(this, arguments);
};

console.log("🕵️ Espião ativado! Tente dar os dead clicks agora.");