모니터링: Sentry + GA4 + Clarity

pnpm add @sentry/nextjs
pnpm exec @sentry/wizard@latest -i nextjs

// sentry.client.config.ts
import * as Sentry from '@sentry/nextjs'

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 0.1,  // 10% 트랜잭션 샘플
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  integrations: [Sentry.replayIntegration()],
})

// Server에서 명시적 capture
import * as Sentry from '@sentry/nextjs'

try {
  await dangerousOp()
} catch (err) {
  Sentry.captureException(err, {
    tags: { component: 'ai-generation' },
    user: { id: userId },
  })
  throw err
}

// src/app/layout.tsx
import Script from 'next/script'

const GA_ID = process.env.NEXT_PUBLIC_GA_ID

<Script
  src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
  strategy="afterInteractive"
/>
<Script id="ga" strategy="afterInteractive">
  {`
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '${GA_ID}', { page_path: window.location.pathname });
  `}
</Script>

// 커스텀 이벤트
declare global { interface Window { gtag: (...args: any[]) => void } }

export function trackEvent(name: string, params?: Record<string, any>) {
  window.gtag?.('event', name, params)
}

// 사용
trackEvent('ai_generation', { template: 'instagram', tokens: 200 })
trackEvent('subscription_started', { plan: 'pro', value: 19 })

const CLARITY_ID = process.env.NEXT_PUBLIC_CLARITY_ID

<Script id="clarity" strategy="afterInteractive">
  {`
    (function(c,l,a,r,i,t,y){
      c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
      t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
      y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "${CLARITY_ID}");
  `}
</Script>

[Clarity 사용]
- 세션 녹화 (사용자 화면 보기)
- 히트맵·스크롤맵
- Rage click·Dead click 감지
- 무료 무제한

pnpm add posthog-js

// src/components/posthog-provider.tsx
'use client'
import posthog from 'posthog-js'
import { PostHogProvider } from 'posthog-js/react'
import { useEffect } from 'react'

if (typeof window !== 'undefined') {
  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
    api_host: 'https://us.i.posthog.com',
    capture_pageview: false,  // 수동
  })
}

export function PHProvider({ children }: { children: React.ReactNode }) {
  return <PostHogProvider client={posthog}>{children}</PostHogProvider>
}

// 이벤트 + 사용자 식별
posthog.identify(userId, { email, plan })
posthog.capture('ai_generation', { template, tokens })

// Funnel: 가입 → 생성 → 결제
// Retention: D1 D7 D30
// 자동 인사이트

[가입 funnel]
visit → signup → first_generation → subscription
70% → 5%   → 60%               → 5%

[제품 funnel]
generate_clicked → generation_done → copy_clicked → shared

[결제]
subscription_started, subscription_canceled, plan_upgraded

Sentry → Settings → Integrations → Slack
- Project alerts: 100+ events/hour → Slack
- Crash rate > 1% → Slack