Menu
Wire PostHog analytics, Sentry error tracking, and a health endpoint into any web project. Reads your stack, installs the right packages, and instruments your app so you stop flying blind in production.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | add-analytics |
| description | Wire PostHog analytics, Sentry error tracking, and a health endpoint into any web project. Reads your stack, installs the right packages, and instruments your app so you stop flying blind in production. |
| category | devops |
| tags | ["analytics","posthog","sentry","monitoring","error-tracking","observability","health-check"] |
| author | tushaarmehtaa |
Wire observability into any web project. This skill adds event tracking, error monitoring, and a status endpoint — the three things every indie builder says they'll add later but never does.
Read the project and figure out what to install.
next.config.* → Next.js (check App Router vs Pages Router)vite.config.* → Vite / React SPAastro.config.* → Astronuxt.config.* → Nuxtmain.py, app.py, manage.py) → FastAPI / Django / FlaskCheck if any analytics/monitoring is already installed:
posthog-js or posthog-node → PostHog already present@sentry/nextjs or @sentry/react or sentry-sdk → Sentry already present@vercel/analytics → Vercel Analytics present@google-analytics or gtag → GA presentIf already installed, audit the setup instead of installing fresh. Check for gaps (missing error boundaries, no server-side tracking, no health endpoint).
Detected: [framework]
Existing analytics: [what's already there, or "none"]
I'll set up:
1. PostHog — event tracking, user identification, feature flags
2. Sentry — error tracking with source maps
3. Health endpoint — /api/status for uptime monitoring
Need your project keys:
- PostHog API key (get from app.posthog.com → Project Settings)
- Sentry DSN (get from sentry.io → Project Settings → Client Keys)
Or I can set up the code and you add the keys later.
Next.js:
npm install posthog-js posthog-node
React SPA (Vite):
npm install posthog-js
Python:
pip install posthog
Next.js App Router — create app/providers.tsx:
'use client';
import posthog from 'posthog-js';
import { PostHogProvider as PHProvider, usePostHog } from 'posthog-js/react';
import { useEffect } from 'react';
if (typeof window !== 'undefined' && process.env.NEXT_PUBLIC_POSTHOG_KEY) {
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://us.i.posthog.com',
person_profiles: 'identified_only',
capture_pageview: false, // We handle this manually for SPA navigation
capture_pageleave: true,
loaded: (posthog) => {
if (process.env.NODE_ENV === 'development') {
// Disable in dev unless you want to test
// posthog.opt_out_capturing();
}
},
});
}
export function PostHogProvider({ children }: { children: React.ReactNode }) {
return <PHProvider client={posthog}>{children}</PHProvider>;
}
Wrap the app in layout.tsx:
import { PostHogProvider } from './providers';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<PostHogProvider>{children}</PostHogProvider>
</body>
</html>
);
}
React SPA (Vite) — create lib/analytics.ts:
import posthog from 'posthog-js';
let initialized = false;
export function initAnalytics() {
if (initialized || typeof window === 'undefined') return;
const key = import.meta.env.VITE_POSTHOG_KEY;
if (!key) return;
posthog.init(key, {
api_host: import.meta.env.VITE_POSTHOG_HOST || 'https://us.i.posthog.com',
person_profiles: 'identified_only',
capture_pageview: true,
});
initialized = true;
}
export { posthog };
Call initAnalytics() in your app entry point.
PostHog doesn't auto-track SPA navigation. Add a component that fires on route changes:
// components/PostHogPageView.tsx
'use client';
import { usePathname, useSearchParams } from 'next/navigation';
import { usePostHog } from 'posthog-js/react';
import { useEffect, Suspense } from 'react';
function PageViewTracker() {
const pathname = usePathname();
const searchParams = useSearchParams();
const posthog = usePostHog();
useEffect(() => {
if (pathname && posthog) {
let url = window.origin + pathname;
const search = searchParams.toString();
if (search) url += '?' + search;
posthog.capture('$pageview', { $current_url: url });
}
}, [pathname, searchParams, posthog]);
return null;
}
export function PostHogPageView() {
return (
<Suspense fallback={null}>
<PageViewTracker />
</Suspense>
);
}
Add to layout:
<PostHogProvider>
<PostHogPageView />
{children}
</PostHogProvider>
When a user logs in, identify them in PostHog so events are linked to a person:
import posthog from 'posthog-js';
// Call this after successful auth sync
function identifyUser(user: { id: string; email?: string; name?: string }) {
posthog.identify(user.id, {
email: user.email,
name: user.name,
});
}
// Call this on logout
function resetUser() {
posthog.reset();
}
Wire this into your auth hook or auth sync callback.
Create a thin wrapper for type safety and consistency:
// lib/track.ts
import posthog from 'posthog-js';
type TrackEvent =
| { event: 'signed_up'; properties?: { method: string } }
| { event: 'created_project'; properties: { projectId: string } }
| { event: 'upgraded_plan'; properties: { plan: string; price: number } }
| { event: 'used_feature'; properties: { feature: string } };
export function track({ event, properties }: TrackEvent) {
posthog.capture(event, properties);
}
Usage:
track({ event: 'created_project', properties: { projectId: '123' } });
The union type ensures you can't track events with wrong properties. Add your events to the union as your product grows.
For events that happen on the server (API routes, webhooks):
// lib/posthog-server.ts
import { PostHog } from 'posthog-node';
let client: PostHog | null = null;
export function getPostHogServer() {
if (!client && process.env.POSTHOG_API_KEY) {
client = new PostHog(process.env.POSTHOG_API_KEY, {
host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://us.i.posthog.com',
flushAt: 1,
flushInterval: 0,
});
}
return client;
}
Usage in API routes:
const posthog = getPostHogServer();
posthog?.capture({
distinctId: userId,
event: 'api_call',
properties: { endpoint: '/api/generate', status: 200 },
});
Next.js:
npx @sentry/wizard@latest -i nextjs
This auto-creates sentry.client.config.ts, sentry.server.config.ts, sentry.edge.config.ts, and updates next.config.ts. Review the generated files.
React SPA (Vite):
npm install @sentry/react
Python (FastAPI):
pip install sentry-sdk[fastapi]
Next.js — the wizard generates most of this. Review and adjust:
sentry.client.config.ts:
import * as Sentry from '@sentry/nextjs';
Sentry.init({
dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1.0,
replaysSessionSampleRate: 0,
replaysOnErrorSampleRate: 1.0,
debug: false,
enabled: process.env.NODE_ENV === 'production',
});
Key settings:
tracesSampleRate: 0.1 — sample 10% of transactions in prod (controls cost)replaysOnErrorSampleRate: 1.0 — always capture session replay when errors happenenabled: false in development — don't pollute Sentry with dev errorsReact SPA:
import * as Sentry from '@sentry/react';
Sentry.init({
dsn: import.meta.env.VITE_SENTRY_DSN,
integrations: [
Sentry.browserTracingIntegration(),
Sentry.replayIntegration(),
],
tracesSampleRate: 0.1,
replaysSessionSampleRate: 0,
replaysOnErrorSampleRate: 1.0,
enabled: import.meta.env.PROD,
});
Python (FastAPI):
import sentry_sdk
sentry_sdk.init(
dsn=os.getenv("SENTRY_DSN"),
traces_sample_rate=0.1,
profiles_sample_rate=0.1,
environment=os.getenv("ENVIRONMENT", "development"),
enabled=os.getenv("ENVIRONMENT") == "production",
)
Create a global error boundary that catches rendering errors:
Next.js App Router — app/global-error.tsx:
'use client';
import * as Sentry from '@sentry/nextjs';
import { useEffect } from 'react';
export default function GlobalError({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
useEffect(() => {
Sentry.captureException(error);
}, [error]);
return (
<html>
<body>
<div style={{ padding: '2rem', textAlign: 'center' }}>
<h1>something went wrong</h1>
<p style={{ color: '#666', marginTop: '0.5rem' }}>
the error has been reported automatically.
</p>
<button
onClick={reset}
style={{ marginTop: '1rem', padding: '0.5rem 1rem', cursor: 'pointer' }}
>
try again
</button>
</div>
</body>
</html>
);
}
Also add app/error.tsx for non-fatal page errors:
'use client';
import * as Sentry from '@sentry/nextjs';
import { useEffect } from 'react';
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
useEffect(() => {
Sentry.captureException(error);
}, [error]);
return (
<div style={{ padding: '2rem' }}>
<h2>something went wrong</h2>
<button onClick={reset}>try again</button>
</div>
);
}
Create a helper for logging errors with context:
// lib/logger.ts
import * as Sentry from '@sentry/nextjs';
interface ErrorContext {
userId?: string;
action?: string;
metadata?: Record<string, any>;
}
export function logError(error: unknown, context?: ErrorContext) {
const err = error instanceof Error ? error : new Error(String(error));
if (context) {
Sentry.withScope((scope) => {
if (context.userId) scope.setUser({ id: context.userId });
if (context.action) scope.setTag('action', context.action);
if (context.metadata) scope.setExtras(context.metadata);
Sentry.captureException(err);
});
} else {
Sentry.captureException(err);
}
// Also log to console in development
if (process.env.NODE_ENV !== 'production') {
console.error('[Error]', err.message, context);
}
}
Usage:
try {
await generateContent(prompt);
} catch (error) {
logError(error, {
userId: user.id,
action: 'generate_content',
metadata: { promptLength: prompt.length },
});
}
A single endpoint that tells you if the app is alive. Use it for uptime monitoring (Vercel cron, UptimeRobot, Better Uptime).
app/api/status/route.ts:import { NextResponse } from 'next/server';
const startTime = Date.now();
export async function GET() {
const uptime = Math.floor((Date.now() - startTime) / 1000);
// Basic health check
const health: Record<string, any> = {
status: 'ok',
uptime: `${uptime}s`,
timestamp: new Date().toISOString(),
environment: process.env.NODE_ENV || 'unknown',
version: process.env.NEXT_PUBLIC_APP_VERSION || 'dev',
};
// Database check (if applicable)
try {
// Supabase
if (process.env.NEXT_PUBLIC_SUPABASE_URL) {
const { createClient } = await import('@supabase/supabase-js');
const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL,
process.env.SUPABASE_SERVICE_ROLE_KEY!
);
const { error } = await supabase.from('users').select('id').limit(1);
health.database = error ? 'error' : 'ok';
}
// Prisma
// const count = await prisma.user.count();
// health.database = 'ok';
} catch {
health.database = 'error';
}
const isHealthy = health.database !== 'error';
return NextResponse.json(health, {
status: isHealthy ? 200 : 503,
});
}
from datetime import datetime
import time
START_TIME = time.time()
@app.get("/api/status")
async def health_check():
uptime = int(time.time() - START_TIME)
return {
"status": "ok",
"uptime": f"{uptime}s",
"timestamp": datetime.utcnow().isoformat(),
"environment": os.getenv("ENVIRONMENT", "development"),
}
Set up a cron or external service to hit /api/status every 5 minutes. Alert if:
Free options: UptimeRobot (free tier), Better Uptime, or Vercel's built-in cron.
Add to .env.local (or .env):
# PostHog
NEXT_PUBLIC_POSTHOG_KEY=phc_...
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
POSTHOG_API_KEY=phc_... # Same key, used server-side
# Sentry
NEXT_PUBLIC_SENTRY_DSN=https://xxx@o123.ingest.sentry.io/456
SENTRY_AUTH_TOKEN=sntrys_... # For source map uploads
SENTRY_ORG=your-org
SENTRY_PROJECT=your-project
Verify none of these are committed to git. Check .gitignore includes .env*.
After wiring everything, test each system:
PostHog:
[ ] Open the app → check PostHog dashboard for a pageview event
[ ] Navigate between pages → each page triggers a pageview
[ ] Log in → user appears in PostHog with email/name (identified)
[ ] Track a custom event → appears in PostHog events
[ ] Log out → posthog.reset() called, new anonymous session
Sentry:
[ ] Add a temporary `throw new Error('sentry test')` to a page
[ ] Load the page → error appears in Sentry dashboard
[ ] Check that source maps resolve (you see your actual code, not minified)
[ ] Remove the test error
[ ] Error boundary renders fallback UI (not a white screen)
Health Endpoint:
[ ] GET /api/status returns 200 with uptime and database status
[ ] If database is down, returns 503
[ ] Set up monitoring service to ping it every 5 minutes
Tell the user which systems are live and working.
Full Answer Engine Optimization audit — make your project discoverable by AI search engines (ChatGPT, Perplexity, Claude, Google AI Overviews), not just Google. Use when the user wants to improve their site's visibility in AI-powered search, add structured data, create llms.txt, optimize for AI citations, or audit AEO readiness. Triggers on requests like "AEO audit", "AI search optimization", "make my site visible to AI", "structured data", "schema markup", "llms.txt", "answer engine", "AI discoverability", or any mention of being found by AI search engines or chatbots.
Audit or generate all UI microcopy for an app — empty states, error messages, loading states, onboarding flows, tooltips, button labels, confirmation dialogs, and success messages. Use when the user wants to write UI copy, fix empty states, improve error messages, audit UX writing, make their app feel polished, or replace placeholder text. Triggers on requests like "write app copy", "fix my empty states", "error messages", "UI copy", "microcopy", "UX writing", "my app feels robotic", "placeholder text", "button labels", "onboarding copy", "toast messages", or any mention of in-app text, UI writing, or product copy.
Generate a weekly changelog card for Twitter/X. Reads git log, distills the work into 6 punchy items, fills an HTML template, and opens it in the browser ready to screenshot.
Write cold emails that actually get responses. Covers investors, employers, mentors, partners — anyone you don't know yet. Strict 2-4 sentence formula with real examples that got replies from Evan Spiegel, Mark Cuban, and Elon Musk. Triggers on requests like "cold email", "write an email to...", "reach out to...", "email this investor", "email this founder", "outreach email", "networking email", or any request to contact someone you don't have a relationship with yet.
Generate complete multi-touch cold outreach sequences — not just one email, but a full 3-5 email sequence with timing, escalation logic, and a different angle per touch. Use when the user needs a sales sequence, drip campaign, follow-up series, or any cold outreach with more than one touchpoint. Triggers on requests like "outreach sequence", "email sequence", "follow-up series", "drip campaign", "sales cadence", "multi-touch outreach", or when someone needs more than a single cold email.
Write a structured decision document when stuck between two or more approaches. Lays out options, tradeoffs, constraints, and picks one. Use when the user is debating architecture, choosing between tools, weighing tradeoffs, or stuck in analysis paralysis. Triggers on requests like "decision doc", "should I use X or Y", "help me decide", "which approach", "tradeoff analysis", "I'm stuck between", "pros and cons", "compare these options", "what should I pick", "architecture decision", or any request to choose between multiple approaches, tools, or implementations.