npm install posthog-js posthog-node

NEXT_PUBLIC_POSTHOG_KEY=phc_your_project_api_key
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

import posthog from "posthog-js";

export function initPostHog() {
  if (typeof window === "undefined") return;
  if (posthog.__loaded) return;

  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST!,
    person_profiles: "identified_only",
    capture_pageview: false, // we manually capture pageviews on route change
    capture_pageleave: true,
    autocapture: false, // explicit tracking only — avoids noise and sensitive data capture
    session_recording: {
      maskAllInputs: true, // mask form inputs by default for privacy
      maskTextSelector: "[data-sensitive]", // mask elements with data-sensitive attribute
    },
  });
}

"use client";

import { useEffect, Suspense } from "react";
import { usePathname, useSearchParams } from "next/navigation";
import posthog from "posthog-js";
import { PostHogProvider as PHProvider } from "posthog-js/react";
import { initPostHog } from "@/lib/posthog";

function PostHogPageView() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    if (!pathname) return;

    let url = window.origin + pathname;
    const search = searchParams.toString();
    if (search) {
      url += `?${search}`;
    }

    posthog.capture("$pageview", { $current_url: url });
  }, [pathname, searchParams]);

  return null;
}

export function PostHogProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    initPostHog();
  }, []);

  return (
    <PHProvider client={posthog}>
      <Suspense fallback={null}>
        <PostHogPageView />
      </Suspense>
      {children}
    </PHProvider>
  );
}

import { PostHog } from "posthog-node";

let posthogClient: PostHog | null = null;

export function getServerPostHog(): PostHog {
  if (!posthogClient) {
    posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
      host: process.env.NEXT_PUBLIC_POSTHOG_HOST!,
      flushAt: 1, // flush immediately in serverless environments
      flushInterval: 0,
    });
  }
  return posthogClient;
}

import posthog from "posthog-js";

// Call after login — links anonymous session to authenticated user
export function identifyUser(user: { id: string; name: string; email: string; plan: string; createdAt: string }) {
  posthog.identify(user.id, {
    name: user.name, email: user.email, plan: user.plan, created_at: user.createdAt,
  });
}

// Call on logout
export function resetUser() { posthog.reset(); }

// Client-side event tracking
export function trackEvent(event: string, properties?: Record<string, unknown>) {
  posthog.capture(event, properties);
}

// usage:
// trackEvent("project_created", { template: "blank", source: "dashboard" });
// trackEvent("plan_upgraded", { from: "free", to: "pro", trigger: "paywall" });

"use server";

import { getServerPostHog } from "@/lib/posthog-server";
import { auth } from "@/lib/auth";

export async function createProject(formData: FormData) {
  const session = await auth();
  if (!session?.user?.id) throw new Error("Unauthorized");

  const name = formData.get("name") as string;

  // ... create project in database ...

  const posthog = getServerPostHog();
  posthog.capture({
    distinctId: session.user.id,
    event: "project_created",
    properties: {
      project_name: name,
      source: "server_action",
    },
  });
  await posthog.flush(); // critical: flush before serverless function exits
}

"use client";

import { useFeatureFlagEnabled, useFeatureFlagPayload } from "posthog-js/react";

export function PricingPage() {
  const isNewPricingEnabled = useFeatureFlagEnabled("new-pricing-page");
  const pricingConfig = useFeatureFlagPayload("new-pricing-page") as {
    showAnnualToggle: boolean;
    highlightPlan: string;
  } | undefined;

  if (isNewPricingEnabled) {
    return (
      <NewPricingPage
        showAnnualToggle={pricingConfig?.showAnnualToggle ?? true}
        highlightPlan={pricingConfig?.highlightPlan ?? "pro"}
      />
    );
  }

  return <LegacyPricingPage />;
}

import { getServerPostHog } from "@/lib/posthog-server";

export async function getFeatureFlag(
  flagName: string,
  userId: string
): Promise<boolean> {
  const posthog = getServerPostHog();
  const isEnabled = await posthog.isFeatureEnabled(flagName, userId);
  return isEnabled ?? false;
}

// usage in a Server Component
export default async function DashboardPage() {
  const session = await auth();
  const showBetaFeature = await getFeatureFlag("beta-dashboard", session.user.id);

  return (
    <Dashboard>
      {showBetaFeature && <BetaWidget />}
    </Dashboard>
  );
}

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Script
          defer
          data-domain="yourdomain.com"
          src="https://plausible.io/js/script.js"
          strategy="afterInteractive"
        />
        {/* Or use your proxy to bypass ad blockers: */}
        {/* src="/proxy/js/script.js" */}
      </head>
      <body>{children}</body>
    </html>
  );
}

interface Window {
  plausible: (event: string, options?: { props?: Record<string, string | number | boolean>; revenue?: { currency: string; amount: number } }) => void;
}

export function trackPlausibleEvent(
  event: string,
  props?: Record<string, string | number | boolean>
) {
  if (typeof window === "undefined") return;
  if (!window.plausible) return;

  window.plausible(event, { props });
}

// usage:
// trackPlausibleEvent("Signup", { plan: "pro", source: "landing-page" });
// trackPlausibleEvent("Download", { file: "whitepaper.pdf" });
// trackPlausibleEvent("Purchase", { plan: "enterprise" });

import { NextRequest, NextResponse } from "next/server";

const PLAUSIBLE_HOST = "https://plausible.io";

async function proxyRequest(request: NextRequest, params: Promise<{ path: string[] }>, method: "GET" | "POST") {
  const { path } = await params;
  const targetUrl = `${PLAUSIBLE_HOST}/${path.join("/")}`;
  const body = method === "POST" ? await request.text() : undefined;

  const response = await fetch(targetUrl, {
    method,
    headers: {
      ...(method === "POST" && { "Content-Type": "application/json" }),
      "User-Agent": request.headers.get("user-agent") ?? "",
      "X-Forwarded-For": request.headers.get("x-forwarded-for") ?? request.ip ?? "",
    },
    body,
  });

  return new NextResponse(await response.text(), {
    status: response.status,
    headers: {
      "Content-Type": response.headers.get("content-type") ?? "text/plain",
      ...(method === "GET" && { "Cache-Control": "public, max-age=86400" }),
    },
  });
}

export async function GET(req: NextRequest, { params }: { params: Promise<{ path: string[] }> }) {
  return proxyRequest(req, params, "GET");
}

export async function POST(req: NextRequest, { params }: { params: Promise<{ path: string[] }> }) {
  return proxyRequest(req, params, "POST");
}

<Script
  defer
  data-domain="yourdomain.com"
  data-api="/api/proxy/plausible/api/event"
  src="/api/proxy/plausible/js/script.js"
  strategy="afterInteractive"
/>

npx @sentry/wizard@latest -i nextjs

import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NODE_ENV,

  // Performance monitoring
  tracesSampleRate: process.env.NODE_ENV === "production" ? 0.2 : 1.0,

  // Session replay
  replaysSessionSampleRate: 0.1, // 10% of normal sessions
  replaysOnErrorSampleRate: 1.0, // 100% of sessions with errors

  integrations: [
    Sentry.replayIntegration({
      maskAllText: false, // set to true for stricter privacy
      maskAllInputs: true,
      blockAllMedia: false,
    }),
    Sentry.browserTracingIntegration(),
  ],

  // Filter out noise
  ignoreErrors: [
    "ResizeObserver loop limit exceeded",
    "ResizeObserver loop completed with undelivered notifications",
    "Non-Error promise rejection captured",
    /Loading chunk \d+ failed/,
    /ChunkLoadError/,
  ],

  beforeSend(event) {
    // Strip PII from error events if needed
    if (event.user) {
      delete event.user.ip_address;
    }
    return event;
  },
});

import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NODE_ENV,
  tracesSampleRate: process.env.NODE_ENV === "production" ? 0.2 : 1.0,

  // Capture unhandled exceptions in Server Components and Route Handlers
  integrations: [
    Sentry.prismaIntegration(), // if using Prisma — auto-instruments DB queries
  ],
});

import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NODE_ENV,
  tracesSampleRate: process.env.NODE_ENV === "production" ? 0.2 : 1.0,
});

import { withSentryConfig } from "@sentry/nextjs";
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // your existing Next.js config
};

export default withSentryConfig(nextConfig, {
  // Upload source maps for readable stack traces
  org: "your-sentry-org",
  project: "your-sentry-project",
  authToken: process.env.SENTRY_AUTH_TOKEN,

  // Upload source maps but do not expose them publicly
  hideSourceMaps: true,

  // Silence source map upload logs in CI
  silent: !process.env.CI,

  // Automatically instrument Server Components, Route Handlers, and middleware
  automaticVercelMonitors: true,

  // Tunnel Sentry events through your domain to bypass ad blockers
  tunnelRoute: "/monitoring",

  // Disable Sentry's telemetry during builds
  telemetry: false,
});

"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" }}>
          <h2>Something went wrong</h2>
          <p>Our team has been notified. Please try again.</p>
          <button onClick={() => reset()}>Try again</button>
        </div>
      </body>
    </html>
  );
}

"use server";

import * as Sentry from "@sentry/nextjs";
import { auth } from "@/lib/auth";

export async function updateProfile(formData: FormData) {
  return await Sentry.withServerActionInstrumentation(
    "updateProfile",
    {
      recordResponse: true,
    },
    async () => {
      const session = await auth();
      if (!session?.user?.id) throw new Error("Unauthorized");

      const name = formData.get("name") as string;

      // ... update profile in database ...

      return { success: true };
    }
  );
}

"use client";

import * as Sentry from "@sentry/nextjs";
import { useSession } from "next-auth/react";
import { useEffect } from "react";

export function SentryUserSync() {
  const { data: session } = useSession();
  useEffect(() => {
    if (session?.user) Sentry.setUser({ id: session.user.id, email: session.user.email ?? undefined });
    else Sentry.setUser(null);
  }, [session]);
  return null;
}

npm install mixpanel-browser
# Optional server-side:
npm install mixpanel

import mixpanel from "mixpanel-browser";

let initialized = false;

export function initMixpanel() {
  if (typeof window === "undefined") return;
  if (initialized) return;

  mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_TOKEN!, {
    track_pageview: "url-with-path", // auto-track pageviews
    persistence: "localStorage", // avoid cookie consent issues
    ignore_dnt: false, // respect Do Not Track
    batch_requests: true, // batch events for performance
    api_host: "https://api-eu.mixpanel.com", // EU data residency (use api.mixpanel.com for US)
  });

  initialized = true;
}

export { mixpanel };

"use client";

import { useEffect } from "react";
import { initMixpanel } from "@/lib/mixpanel";

export function MixpanelProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    if (process.env.NODE_ENV === "production") {
      initMixpanel();
    }
  }, []);

  return <>{children}</>;
}

import mixpanel from "mixpanel-browser";

export function identifyMixpanelUser(user: { id: string; name: string; email: string; plan: string; createdAt: string; companyId?: string; companyName?: string }) {
  mixpanel.identify(user.id);
  mixpanel.people.set({ $name: user.name, $email: user.email, plan: user.plan, $created: user.createdAt });

  // Group analytics for B2B products
  if (user.companyId) {
    mixpanel.set_group("company", user.companyId);
    mixpanel.get_group("company", user.companyId).set({ $name: user.companyName, plan: user.plan });
  }
}

export function resetMixpanelUser() { mixpanel.reset(); }

import mixpanel from "mixpanel-browser";

export function trackMixpanelEvent(
  event: string,
  properties?: Record<string, unknown>
) {
  mixpanel.track(event, properties);
}

// usage:
// trackMixpanelEvent("project_created", { template: "blank", source: "dashboard" });
// trackMixpanelEvent("feature_used", { feature: "export", format: "csv" });

// Track timed events (measures duration between start and completion)
export function startTimedEvent(event: string) {
  mixpanel.time_event(event);
}

// usage:
// startTimedEvent("onboarding_flow"); // call when user starts onboarding
// trackMixpanelEvent("onboarding_flow", { completed: true }); // call when finished — duration is auto-calculated

import Mixpanel from "mixpanel";

const mixpanel = Mixpanel.init(process.env.MIXPANEL_TOKEN!, {
  host: "api-eu.mixpanel.com", // EU data residency (use api.mixpanel.com for US)
});

export function trackServerEvent(distinctId: string, event: string, properties?: Record<string, unknown>) {
  return new Promise<void>((resolve, reject) => {
    mixpanel.track(event, { distinct_id: distinctId, ...properties }, (err) => (err ? reject(err) : resolve()));
  });
}

export function setServerUserProfile(distinctId: string, properties: Record<string, unknown>) {
  return new Promise<void>((resolve, reject) => {
    mixpanel.people.set(distinctId, properties, (err) => (err ? reject(err) : resolve()));
  });
}

npm install logsnag

import { LogSnag } from "logsnag";

let logsnagClient: LogSnag | null = null;

export function getLogSnag(): LogSnag {
  if (!logsnagClient) {
    logsnagClient = new LogSnag({
      token: process.env.LOGSNAG_TOKEN!,
      project: process.env.LOGSNAG_PROJECT!, // e.g., "my-saas"
    });
  }
  return logsnagClient;
}

import { getLogSnag } from "@/lib/logsnag";

// Signup notification
export async function trackSignup(user: { id: string; email: string; plan: string }) {
  await getLogSnag().publish({
    channel: "signups",
    event: "New Signup",
    description: `${user.email} signed up for ${user.plan} plan`,
    icon: "🎉",
    tags: { plan: user.plan, "user-id": user.id },
    notify: true,
  });
}

// Payment notification
export async function trackPayment(payment: { userId: string; amount: number; plan: string; email: string }) {
  await getLogSnag().publish({
    channel: "payments",
    event: "Payment Received",
    description: `$${payment.amount} from ${payment.email} — ${payment.plan} plan`,
    icon: "💰",
    tags: { plan: payment.plan, amount: String(payment.amount) },
    notify: true,
  });
}

// Deployment notification (notify only for production)
export async function trackDeployment(deployment: { version: string; environment: string; deployedBy: string }) {
  await getLogSnag().publish({
    channel: "deployments",
    event: "Deployment Complete",
    description: `v${deployment.version} deployed to ${deployment.environment} by ${deployment.deployedBy}`,
    icon: "🚀",
    tags: { version: deployment.version, environment: deployment.environment },
    notify: deployment.environment === "production",
  });
}

// Failed cron job alert
export async function trackCronFailure(job: { name: string; error: string }) {
  await getLogSnag().publish({
    channel: "cron-jobs",
    event: "Cron Job Failed",
    description: `${job.name} failed: ${job.error}`,
    icon: "❌",
    tags: { job: job.name },
    notify: true,
  });
}

import { getLogSnag } from "@/lib/logsnag";

export async function updateInsights(metrics: { mrr?: number; totalUsers?: number; activeTrials?: number }) {
  const logsnag = getLogSnag();
  const updates: Promise<void>[] = [];

  if (metrics.mrr !== undefined) updates.push(logsnag.insight({ title: "MRR", value: `$${metrics.mrr.toLocaleString()}`, icon: "💵" }));
  if (metrics.totalUsers !== undefined) updates.push(logsnag.insight({ title: "Total Users", value: metrics.totalUsers, icon: "👥" }));
  if (metrics.activeTrials !== undefined) updates.push(logsnag.insight({ title: "Active Trials", value: metrics.activeTrials, icon: "⏳" }));

  await Promise.all(updates);
}
// Call from a daily cron job: await updateInsights({ mrr: 12500, totalUsers: 842, activeTrials: 23 });

import type { Metadata } from "next";
import Script from "next/script";
import { PostHogProvider } from "@/components/providers/posthog-provider";
import { MixpanelProvider } from "@/components/providers/mixpanel-provider";
import { SentryUserSync } from "@/components/providers/sentry-user-sync";

export const metadata: Metadata = {
  title: "Your App",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        {/* Plausible — lightweight, cookie-free, no consent needed */}
        <Script
          defer
          data-domain="yourdomain.com"
          src="https://plausible.io/js/script.js"
          strategy="afterInteractive"
        />
      </head>
      <body>
        {/* PostHog — product analytics, feature flags, session replay */}
        <PostHogProvider>
          {/* Mixpanel — only if you need it alongside PostHog */}
          <MixpanelProvider>
            {/* Sentry user context sync */}
            <SentryUserSync />
            {children}
          </MixpanelProvider>
        </PostHogProvider>
      </body>
    </html>
  );
}

import posthog from "posthog-js";
import mixpanel from "mixpanel-browser";
import * as Sentry from "@sentry/nextjs";

type AnalyticsEvent = {
  name: string;
  properties?: Record<string, unknown>;
};

type UserIdentity = {
  id: string;
  name: string;
  email: string;
  plan: string;
  [key: string]: unknown;
};

class Analytics {
  private enabled = false;

  init() {
    if (typeof window === "undefined") return;
    if (process.env.NODE_ENV !== "production") return;
    this.enabled = true;
  }

  track({ name, properties }: AnalyticsEvent) {
    if (!this.enabled) return;

    // PostHog
    posthog.capture(name, properties);

    // Mixpanel (if using both — usually pick one)
    // mixpanel.track(name, properties as Record<string, unknown>);

    // Plausible (for key conversion events only)
    if (window.plausible) {
      window.plausible(name, {
        props: properties as Record<string, string | number | boolean>,
      });
    }
  }

  identify(user: UserIdentity) {
    if (!this.enabled) return;

    // PostHog
    posthog.identify(user.id, {
      name: user.name,
      email: user.email,
      plan: user.plan,
    });

    // Mixpanel
    // mixpanel.identify(user.id);
    // mixpanel.people.set({ $name: user.name, $email: user.email, plan: user.plan });

    // Sentry
    Sentry.setUser({ id: user.id, email: user.email });
  }

  reset() {
    if (!this.enabled) return;

    posthog.reset();
    // mixpanel.reset();
    Sentry.setUser(null);
  }
}

export const analytics = new Analytics();

// page-a.tsx
posthog.init("phc_key", { api_host: "https://us.i.posthog.com" });

// page-b.tsx
posthog.init("phc_key", { api_host: "https://us.i.posthog.com" });

const posthog = getServerPostHog();
posthog.capture({ distinctId: "user-1", event: "api_called" });
await posthog.flush(); // without this, the event is lost in serverless
return NextResponse.json({ ok: true });

// No environment check — every npm run dev fires real events
export function MixpanelProvider({ children }) {
  useEffect(() => {
    initMixpanel();
  }, []);
  return <>{children}</>;
}

export function MixpanelProvider({ children }) {
  useEffect(() => {
    if (process.env.NODE_ENV === "production") {
      initMixpanel();
    }
  }, []);
  return <>{children}</>;
}

// Trying to build funnels with LogSnag
await logsnag.publish({ channel: "analytics", event: "Page Viewed", ... });
await logsnag.publish({ channel: "analytics", event: "Button Clicked", ... });
await logsnag.publish({ channel: "analytics", event: "Form Started", ... });

// LogSnag: high-signal events only
await logsnag.publish({ channel: "signups", event: "New Signup", notify: true, ... });
await logsnag.publish({ channel: "payments", event: "Payment Failed", notify: true, ... });

// Errors show up as anonymous — you cannot tell which user was affected
Sentry.init({ dsn: "..." });
// never calls Sentry.setUser()

// After login:
Sentry.setUser({ id: user.id, email: user.email });

// After logout:
Sentry.setUser(null);

// Pointless — Plausible does not use cookies or collect PII
{hasConsented && (
  <Script data-domain="yourdomain.com" src="https://plausible.io/js/script.js" />
)}

<Script
  defer
  data-domain="yourdomain.com"
  src="https://plausible.io/js/script.js"
  strategy="afterInteractive"
/>

posthog.capture("User Signed Up", { plan: "pro" });
mixpanel.track("signup_completed", { plan_type: "pro" });
// same event, different names and property keys — impossible to reconcile data

analytics.track({
  name: "signup_completed",
  properties: { plan: "pro" },
});
// dispatches "signup_completed" with { plan: "pro" } to PostHog, Mixpanel, Plausible