feat: add PostHog analytics integration

[posthog]

Summary

This PR adds PostHog analytics to Hypersnap.org using the posthog-js SDK, installed via npm and initialized through Next.js's client instrumentation hook.

• instrumentation-client.ts (new) - initializes the PostHog client (posthog.init) with capture_exceptions: true for automatic error capture, guarded so nothing runs if the required env vars are unset
• src/components/copy-command.tsx - captures a command_copied event when a visitor copies an install command
• src/components/node-info-checker.tsx - captures a node_info_analyzed event when a visitor runs the node info checker tool
• .env.example - documents the two new PostHog env vars
• package.json / package-lock.json - adds posthog-js@^1.410.6

No user-identification flow was wired up: the wizard inspected the app and found no authenticated user/session state to attach identity to, since this is an anonymous, static portal. All events are anonymous.

Insights and dashboards created

Type	Name	Link
Dashboard	Analytics basics (wizard)	https://us.posthog.com/project/537773/dashboard/1948714
Insight	Command copies over time (wizard)	https://us.posthog.com/project/537773/insights/rEtfGidt
Insight	Node diagnostics over time (wizard)	https://us.posthog.com/project/537773/insights/U1AlUyEk
Insight	Command copy to node analysis (wizard)	https://us.posthog.com/project/537773/insights/23Xf6xd3

How to verify

1. Set the two environment variables listed below (locally in .env, or in Vercel for production) and run npm run dev.
2. Open the app, copy an install command, and run the node info checker.
3. In PostHog, open Activity — you should see $pageview, command_copied, and node_info_analyzed events arriving within a minute.
4. Check the Analytics basics (wizard) dashboard for the same activity.

Environment variables (action needed before PostHog works)

This app deploys to Vercel (see README.md), which keeps environment variables in the Vercel dashboard rather than in a file committed to this repository, so they could not be set up automatically as part of this PR.

Environment variables are named settings your hosting provider passes to the app when it runs — they let the app know configuration values (like the PostHog project token below) without hardcoding them in the source code. PostHog will not receive any data in production until both of these are set:

Name	Value
NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN	phc_kBAAn9krNLUuCAudS9aZQJtwGuFXzqNXDAynEwVnLWeB
NEXT_PUBLIC_POSTHOG_HOST	https://us.i.posthog.com

To set them via the Vercel dashboard:

1. Open https://vercel.com/dashboard and click on this project.
2. Go to Settings, then Environment Variables in the left sidebar.
3. For each row in the table above: paste the Name and Value, leave all environments checked, and click Save.
4. Redeploy the app (Deployments tab, "..." menu on the latest deployment, Redeploy) — the new settings only take effect on the next deployment.

Setting environment variables via a local CLI

Alternatively, run these locally (requires the Vercel CLI to be linked to this project):

echo "phc_kBAAn9krNLUuCAudS9aZQJtwGuFXzqNXDAynEwVnLWeB" | npx vercel env add NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN production
echo "https://us.i.posthog.com" | npx vercel env add NEXT_PUBLIC_POSTHOG_HOST production

---

Created with PostHog Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hypersnaporg	Ready	Preview	Aug 4, 2026 12:32am