Receive PostHog rage click events and forward them to Discord with human-readable alerts.

Rage clicks occur when a user repeatedly clicks on something that doesn't respond as expected. They're a strong signal of user frustration and often indicate:

• Broken buttons or links
• Slow-loading UI
• Confusing interface elements
• Missing click handlers

1. In your Discord server, go to Server Settings → Integrations → Webhooks
2. Click New Webhook and copy the webhook URL
3. Add it to this val's environment variables as DISCORD_WEBHOOK_URL

1. In PostHog, go to Data Pipelines → Destinations → Create Destination
2. Select Webhook as the destination type
3. Enter this val's endpoint URL: https://valdottown--rage-clicks.web.val.run
4. Set up a filter for the $rageclick event

When PostHog detects a rage click, it sends a webhook to this val containing:

• The element that was clicked (as a complex elements_chain string)
• The page URL
• User/session information
• Browser/device details
• Geo location

This val:

1. Parses the elements_chain into a human-readable description (e.g., "Save Changes" button instead of raw CSS selectors)
2. Formats a Discord embed with all relevant context
3. Sends an alert to your Discord channel

The alert includes:

• 🖱️ Clicked Element: What the user was clicking on
• 📍 Page: The URL where it happened
• 🌍 Location: User's geographic location
• 💻 Device: Browser and OS info
• 📱 Screen: Viewport dimensions
• 👤 User ID: Identified or anonymous user
• 🚪 Session Entry: Where the user started (if different)

Run shell.ts to send a test rage click event to Discord. It includes several sample scenarios you can uncomment:

// Choose which sample to send:
const eventToSend = sampleRageClickEvent;     // Button click
// const eventToSend = sampleInputRageClick;  // Input field
// const eventToSend = sampleIconRageClick;   // Icon/SVG

The val exports TypeScript types you can use:

import type { PostHogRageClickEvent } from "https://esm.town/v/valdottown/rage-clicks/main.ts";
import { parseElementsChain } from "https://esm.town/v/valdottown/rage-clicks/main.ts";

// Parse any PostHog elements_chain
const element = parseElementsChain(chain);
console.log(element.description); // '"Save Changes" button'

• main.ts - HTTP handler that receives webhooks and sends Discord alerts
• shell.ts - Test script with sample rage click events
• README.md - This file