feat: add PostHog analytics integration - #16
Merged
Conversation
Adds posthog-js and instruments key visitor interactions (component browsing, install command copies, content copies, sponsor checkout, custom work contact) plus client-side exception capture. Declares NODE_ENV in turbo.json's globalEnv so the new instrumentation client passes lint. Generated-By: PostHog Code Task-Id: f45ab670-9c2c-4f9f-bd3e-76ac29457c69
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Adds PostHog analytics to the apps/web Next.js app, wiring up SDK initialization, global error reporting, and several UI interaction events (copy actions, hero CTA, custom-work email CTA, and sponsor CTAs).
Changes:
- Add
posthog-jsdependency and initialize PostHog on the client (env-driven, debug in development, exception capture enabled). - Track key UX interactions via
posthog.capture(...)across landing, docs/code copy, and sponsors flows. - Document required env vars and adjust Turbo config for env-var linting.
Reviewed changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| turbo.json | Declares global env vars for Turbo/ESLint env-var tracking. |
| pnpm-lock.yaml | Locks posthog-js and transitive dependencies. |
| apps/web/package.json | Adds posthog-js dependency. |
| apps/web/instrumentation-client.ts | Initializes PostHog based on NEXT_PUBLIC_* env vars. |
| apps/web/app/global-error.tsx | Reports uncaught client errors to PostHog. |
| apps/web/components/copy-button.tsx | Captures copy events when users copy content. |
| apps/web/components/docs-code-panel.tsx | Threads optional copy-event naming to CopyButton. |
| apps/web/components/package-manager-command.tsx | Captures install-command copy event. |
| apps/web/components/landing/hero-buttons.tsx | Captures “browse components” start and install copy. |
| apps/web/components/landing/custom-work-cta.tsx | Captures “custom work contact” start on mailto click. |
| apps/web/app/sponsors/page.tsx | Captures sponsor checkout started events (incl tier on pricing cards). |
| apps/web/.env.example | Documents PostHog env vars. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| { | ||
| "$schema": "https://turbo.build/schema.json", | ||
| "ui": "tui", | ||
| "globalEnv": ["NODE_ENV"], |
Comment on lines
+17
to
+19
| throw new Error( | ||
| `${missingVariable} variable required by PostHog is missing or un-configured, this causes events to be silently missed. This error stops appearing once ${missingVariable} is configured`, | ||
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds PostHog analytics to the
apps/webNext.js app using theposthog-jsSDK.apps/web/instrumentation-client.ts- new PostHog client initialization (reads the project token/host from env vars, enables exception capture)apps/web/app/global-error.tsx- new Next.js global error boundary that reports uncaught client exceptions to PostHogapps/web/components/copy-button.tsx,apps/web/components/docs-code-panel.tsx,apps/web/components/package-manager-command.tsx- capture acontent_copied/component_install_command_copiedevent when a user copies code or an install commandapps/web/components/landing/hero-buttons.tsx- capturecomponents_browse_startedon the hero "Browse components" clickapps/web/components/landing/custom-work-cta.tsx- capturecustom_work_contact_startedon the custom-work email CTAapps/web/app/sponsors/page.tsx- capturesponsor_checkout_started(withsponsorship_tier) on sponsor checkout CTAsapps/web/package.json/pnpm-lock.yaml- addsposthog-js@^1.407.2apps/web/.env.example- documents the two required env varsturbo.json- declaresNODE_ENVinglobalEnvso the new instrumentation file passes this repo's lint rule (turbo/no-undeclared-env-vars)All captured events are anonymous, visitor-level interactions — no PII is collected, and no new dashboards/insights were added beyond what the wizard created (listed below).
Insights and dashboards created
How to verify
pnpm devinapps/web) or deploy this branch./sponsorsand click a sponsorship CTA, or use the custom-work contact CTA.$pageviewand the custom events above (e.g.components_browse_started,content_copied) arriving within a minute.Environment variables (action needed before PostHog works)
This app deploys to Vercel (per the README's Vercel OSS badge), which keeps production environment variables in the Vercel dashboard rather than in a file committed to this repository —
.env*is git-ignored and no.vercelproject link exists in this checkout, so I could not configure these automatically.Environment variables are named settings your hosting provider passes to the app when it runs — they let the app know things (like the PostHog project token below) without hardcoding them in the code. PostHog will not receive any data until these two are set:
NEXT_PUBLIC_POSTHOG_PROJECT_TOKENphc_tNUeWQywgt8aB4VGcxz98wtrpysvWBvfGWRrFV5pEAvxNEXT_PUBLIC_POSTHOG_HOSThttps://us.i.posthog.comTo set them via the dashboard:
Setting environment variables via a local CLI
If you have the Vercel CLI installed and linked to this project, you can set them from your terminal instead:
Notes
apps/web/components/floating-docs-sidebar-panel.tsxhas one pre-existingeslint react-hooks/exhaustive-depswarning unrelated to this change (present onmainbefore this PR); left untouched per scope.Created with PostHog Code