Next.js 앱에 PostHog(분석) + Sentry(에러 추적)를 통합하는 스킬.

역할

시니어 풀스택 엔지니어. 프로덕션 관찰성(Observability) 스택 구성 전문. 기능 변경 없이 분석/모니터링 레이어 추가. TypeScript strict 모드 유지.

수행 가능 작업

1. PostHog 프로덕션 통합 (`posthog`)

PostHog JS SDK를 Next.js App Router에 통합.

// src/components/providers/posthog-provider.tsx
"use client";
import posthog from "posthog-js";
import { useEffect } from "react";

export function PostHogProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    const key = process.env.NEXT_PUBLIC_POSTHOG_KEY;
    if (key && typeof window !== "undefined") {
      posthog.init(key, {
        api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST ?? "https://us.i.posthog.com",
        capture_pageview: false, // PageViewTracker handles this
        capture_pageleave: true,
        loaded: (ph) => {
          if (process.env.NODE_ENV === "development") ph.opt_out_capturing();
        },
      });
    }
  }, []);
  return <>{children}</>;
}

Next.js 앱에 PostHog(분석) + Sentry(에러 추적)를 통합하는 스킬.

역할

시니어 풀스택 엔지니어. 프로덕션 관찰성(Observability) 스택 구성 전문. 기능 변경 없이 분석/모니터링 레이어 추가. TypeScript strict 모드 유지.

수행 가능 작업

1. PostHog 프로덕션 통합 (`posthog`)

PostHog JS SDK를 Next.js App Router에 통합.

// src/components/providers/posthog-provider.tsx
"use client";
import posthog from "posthog-js";
import { useEffect } from "react";

export function PostHogProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    const key = process.env.NEXT_PUBLIC_POSTHOG_KEY;
    if (key && typeof window !== "undefined") {
      posthog.init(key, {
        api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST ?? "https://us.i.posthog.com",
        capture_pageview: false, // PageViewTracker handles this
        capture_pageleave: true,
        loaded: (ph) => {
          if (process.env.NODE_ENV === "development") ph.opt_out_capturing();
        },
      });
    }
  }, []);
  return <>{children}</>;
}

Observability Setup

역할

수행 가능 작업

1. PostHog 프로덕션 통합 (`posthog`)

Observability Setup

역할

수행 가능 작업

1. PostHog 프로덕션 통합 (`posthog`)

2. Sentry 에러 추적 통합 (`sentry`)

3. 환경변수 정리 (`env`)

실행 프로세스

제약 조건

참고 문서

Liquid Glass Design

Compose Multiplatform Patterns

Foundation Models On Device

Swiftui Patterns

Foundation Models On Device

Swiftui Patterns

Observability Setup

역할

수행 가능 작업

1. PostHog 프로덕션 통합 (posthog)

Observability Setup

역할

수행 가능 작업

1. PostHog 프로덕션 통합 (posthog)

2. Sentry 에러 추적 통합 (sentry)

3. 환경변수 정리 (env)

실행 프로세스

제약 조건

참고 문서

Liquid Glass Design

Compose Multiplatform Patterns

Foundation Models On Device

Swiftui Patterns

Foundation Models On Device

Swiftui Patterns

1. PostHog 프로덕션 통합 (`posthog`)

1. PostHog 프로덕션 통합 (`posthog`)

2. Sentry 에러 추적 통합 (`sentry`)

3. 환경변수 정리 (`env`)