npx @sentry/wizard -i nextjs

// src/actions/payment.actions.ts
'use server';
import { auth } from '@/lib/auth';
import * as Sentry from '@sentry/nextjs';

export async function createCheckoutSession(priceId: string) {
  const session = await auth();
  if (!session?.user?.id) throw new Error('Unauthorized');

  // 向 Sentry 添加上下文！
  Sentry.setUser({ id: session.user.id, email: session.user.email });
  Sentry.setTag("action", "createCheckoutSession");

  try {
    // ... 我们的 Stripe 逻辑 ...
  } catch (error) {
    // 手动捕获并报告错误
    Sentry.captureException(error, {
      extra: { priceId: priceId },
    });
    return { error: 'Failed to create session.' };
  }
}

src/
└── analytics/
    ├── AnalyticsProvider.tsx  (客户端组件, 用于加载脚本)
    └── events.ts              (全局事件跟踪函数)

// src/analytics/AnalyticsProvider.tsx
'use client';

import Script from 'next/script';
import { usePathname, useSearchParams } from 'next/navigation';
import { useEffect } from 'react';

// 从 .env.local 或 Vercel 环境变量中读取
const PLAUSIBLE_DOMAIN = process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN;
const UMAMI_SITE_ID = process.env.NEXT_PUBLIC_UMAMI_SITE_ID;
const UMAMI_SCRIPT_URL = process.env.NEXT_PUBLIC_UMAMI_SCRIPT_URL;

export function AnalyticsProvider() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  // 这个 Effect 确保了在 Next.js 路由（App Router）切换时
  // Umami 也能正确捕获到页面浏览
  useEffect(() => {
    if (!UMAMI_SITE_ID || !window.umami) return;

    // `usePathname` 和 `useSearchParams` 确保了每次 URL 变化时
    // 都会重新运行此 Effect，从而发送页面浏览事件
    const url = pathname + (searchParams.toString() ? '?' + searchParams.toString() : '');
    window.umami.track(url);

  }, [pathname, searchParams]);

  return (
    <>
      {/* 1. Plausible Analytics */}
      {PLAUSIBLE_DOMAIN && (
        <Script
          defer
          data-domain={PLAUSIBLE_DOMAIN}
          src="[https://plausible.io/js/script.js](https://plausible.io/js/script.js)"
        />
      )}

      {/* 2. Umami Analytics */}
      {UMAMI_SITE_ID && UMAMI_SCRIPT_URL && (
        <Script
          async
          defer
          data-website-id={UMAMI_SITE_ID}
          src={UMAMI_SCRIPT_URL}
          // Umami 默认会自动跟踪页面浏览
          // 但在 Next.js App Router 中，我们使用上面的 useEffect 手动跟踪
          data-auto-track="false"
          data-do-not-track="true" // 禁用自动跟踪，由 Effect 接管
        />
      )}
    </>
  );
}

// src/analytics/events.ts

// 扩展全局 window 类型以包含 Plausible 和 Umami
declare global {
  interface Window {
    plausible?: (event: string, options?: { props: Record<string, any> }) => void;
    umami?: (event: string, data?: Record<string, any>) => void;
  }
}

type AnalyticsEvent =
  | 'click_upgrade'
  | 'register_success'
  | 'start_checkout';

interface EventProps {
  planId?: string;
  source?: string;
}

/**
 * 跟踪一个自定义事件
 * @param eventName 事件名称 (例如 'click_upgrade')
 * @param props 附加属性 (例如 { planId: 'pro' })
 */
export function trackEvent(eventName: AnalyticsEvent, props: EventProps = {}) {
  // 1. 发送到 Plausible
  if (window.plausible) {
    window.plausible(eventName, { props });
  }

  // 2. 发送到 Umami
  if (window.umami) {
    // Umami 的格式是 'event_name', { data: { ... } }
    window.umami(eventName, { data: props });
  }

  // 3. (可选) 打印到控制台 (仅限开发环境)
  if (process.env.NODE_ENV === 'development') {
    console.log(`[ANALYTICS] Event: ${eventName}`, props);
  }
}

// src/components/payment/PricingTable.tsx
'use client';
import { trackEvent } from '@/analytics/events'; // 导入我们的抽象函数
// ...

function PlanCard({ plan }: { plan: PricePlan }) {
  // ...
  const handleUpgrade = async () => {
    //...

    // 在启动结账前，跟踪这个关键的转化事件！
    trackEvent('click_upgrade', {
      planId: plan.id,
      source: 'pricing_page'
    });

    // ... (调用 createCheckoutSession 等)
  };
  // ...
}