/**
 * 監視設計の5つの原則（SMART Monitoring）
 *
 * S - Specific（具体的）: 何を監視するか明確にする
 * M - Measurable（測定可能）: 数値化できるメトリクスを選ぶ
 * A - Actionable（行動可能）: アラートを受けて何をするか決めておく
 * R - Relevant（関連性）: ビジネスに影響する項目を優先する
 * T - Timely（適時性）: リアルタイムに検知・通知する
 */
 
// ✗ 悪い監視設計：何を監視しているかわからない
const BAD_MONITORING = {
  alert: 'Something went wrong',
  threshold: 'unknown',
  action: 'check logs',
};
 
// ✓ 良い監視設計：具体的で行動可能
const GOOD_MONITORING = {
  metric: 'payment_success_rate',
  threshold: '< 95% over 5 minutes',
  severity: 'P0',
  runbook: 'https://wiki.example.com/runbooks/payment-failure',
  escalation: ['on-call-engineer', 'payment-team-lead'],
  action: [
    '1. Stripe ダッシュボードを確認',
    '2. 最近のデプロイを確認',
    '3. 必要に応じてロールバック',
  ],
};

# Sentry SDK のインストール
npx @sentry/wizard@latest -i nextjs
 
# ウィザードが以下のファイルを自動生成:
# - sentry.client.config.ts
# - sentry.server.config.ts
# - sentry.edge.config.ts
# - next.config.ts（withSentryConfig でラップ）
# - .sentryclirc（認証トークン）

// sentry.client.config.ts - クライアント側の設定
import * as Sentry from '@sentry/nextjs';
 
Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
 
  // 環境の識別
  environment: process.env.NEXT_PUBLIC_VERCEL_ENV || process.env.NODE_ENV,
 
  // リリースバージョン（デプロイとエラーを関連付ける）
  release: process.env.NEXT_PUBLIC_SENTRY_RELEASE || `my-app@${process.env.npm_package_version}`,
 
  // パフォーマンスモニタリング
  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1.0,
 
  // トレースサンプラー（より細かい制御）
  tracesSampler: (samplingContext) => {
    // ヘルスチェックは計測しない
    if (samplingContext.name?.includes('/api/health')) {
      return 0;
    }
    // 決済関連は必ず計測
    if (samplingContext.name?.includes('/api/payment')) {
      return 1.0;
    }
    // その他は10%
    return 0.1;
  },
 
  // Session Replay の設定
  replaysSessionSampleRate: 0.01,   // 通常セッション: 1%サンプリング
  replaysOnErrorSampleRate: 1.0,    // エラー発生時: 100%キャプチャ
 
  // インテグレーション
  integrations: [
    // Session Replay
    Sentry.replayIntegration({
      maskAllText: false,            // テキストのマスク（プライバシー考慮）
      maskAllInputs: true,           // 入力フィールドをマスク
      blockAllMedia: false,          // メディア要素のブロック
      networkDetailAllowUrls: [      // ネットワークリクエストの詳細を記録するURL
        /^https:\/\/api\.example\.com/,
      ],
      networkRequestHeaders: ['X-Request-Id'], // 記録するリクエストヘッダー
      networkResponseHeaders: ['X-Request-Id'],
    }),
 
    // ブラウザトレーシング
    Sentry.browserTracingIntegration({
      enableInp: true,               // INP（Interaction to Next Paint）の計測
    }),
 
    // HTTP クライアントエラーのキャプチャ
    Sentry.httpClientIntegration({
      failedRequestTargets: [/^https:\/\/api\.example\.com/],
    }),
  ],
 
  // エラーの送信前にフィルタリング
  beforeSend(event, hint) {
    const error = hint.originalException;
 
    // 特定のエラーを無視
    if (error instanceof Error) {
      // ネットワークエラー（ユーザーがオフラインの場合など）
      if (error.message.includes('Failed to fetch')) {
        return null;
      }
      // ブラウザ拡張機能由来のエラー
      if (error.stack?.includes('chrome-extension://')) {
        return null;
      }
      // ResizeObserver のループエラー（無害）
      if (error.message.includes('ResizeObserver loop')) {
        return null;
      }
    }
 
    // PIIの除去
    if (event.request?.headers) {
      delete event.request.headers['Authorization'];
      delete event.request.headers['Cookie'];
    }
 
    return event;
  },
 
  // ブレッドクラムの送信前にフィルタリング
  beforeBreadcrumb(breadcrumb) {
    // console.debug のブレッドクラムは除外
    if (breadcrumb.category === 'console' && breadcrumb.level === 'debug') {
      return null;
    }
    // 特定URLへのXHRは除外（アナリティクスなど）
    if (breadcrumb.category === 'xhr' && breadcrumb.data?.url?.includes('analytics')) {
      return null;
    }
    return breadcrumb;
  },
 
  // 送信レートの制限
  maxBreadcrumbs: 50,
 
  // デバッグモード（開発時のみ）
  debug: process.env.NODE_ENV === 'development',
 
  // 無視するエラーパターン
  ignoreErrors: [
    // ブラウザ拡張機能
    'top.GLOBALS',
    'originalCreateNotification',
    'canvas.contentDocument',
    // Facebook ブラウザ
    'fb_xd_fragment',
    // Chrome の既知のバグ
    'ResizeObserver loop limit exceeded',
    'ResizeObserver loop completed with undelivered notifications',
    // ネットワーク関連
    'Network request failed',
    'Load failed',
    'AbortError',
    'ChunkLoadError',
  ],
 
  // 無視するURLパターン
  denyUrls: [
    // Chrome 拡張機能
    /extensions\//i,
    /^chrome:\/\//i,
    /^chrome-extension:\/\//i,
    // Firefox 拡張機能
    /^moz-extension:\/\//i,
    // Safari 拡張機能
    /^safari-extension:\/\//i,
  ],
});

// sentry.server.config.ts - サーバー側の設定
import * as Sentry from '@sentry/nextjs';
 
Sentry.init({
  dsn: process.env.SENTRY_DSN,
  environment: process.env.VERCEL_ENV || process.env.NODE_ENV,
  release: process.env.SENTRY_RELEASE,
 
  tracesSampleRate: 0.1,
 
  // サーバーサイド固有のインテグレーション
  integrations: [
    // Prisma のクエリ計測
    Sentry.prismaIntegration(),
    // Node.js のプロファイリング
    Sentry.nodeProfilingIntegration(),
  ],
 
  // サーバーサイドのエラーフィルタリング
  beforeSend(event) {
    // 404 エラーはノイズになるので除外
    if (event.contexts?.response?.status_code === 404) {
      return null;
    }
    return event;
  },
 
  // プロファイリングのサンプルレート
  profilesSampleRate: 0.1,
});

// sentry.edge.config.ts - Edge Runtime の設定
import * as Sentry from '@sentry/nextjs';
 
Sentry.init({
  dsn: process.env.SENTRY_DSN,
  environment: process.env.VERCEL_ENV || process.env.NODE_ENV,
  tracesSampleRate: 0.1,
});

// next.config.ts
import { withSentryConfig } from '@sentry/nextjs';
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  // アプリの設定...
};
 
export default withSentryConfig(nextConfig, {
  // Sentry Webpack プラグインの設定
  org: 'my-org',
  project: 'my-project',
  authToken: process.env.SENTRY_AUTH_TOKEN,
 
  // ソースマップの設定
  sourcemaps: {
    assets: '.next/**',              // アップロード対象
    deleteSourcemapsAfterUpload: true, // アップロード後にソースマップを削除
  },
 
  // リリース設定
  release: {
    name: process.env.SENTRY_RELEASE,
    create: true,
    finalize: true,
    deploy: {
      env: process.env.VERCEL_ENV || 'production',
    },
  },
 
  // バンドルサイズの最適化
  widenClientFileUpload: true,
 
  // Tree-shaking による未使用コードの除去
  disableLogger: true,
 
  // Turbopack 対応
  unstable_sentryWebpackPluginOptions: {
    // Turbopack 使用時の設定
  },
 
  // トンネリング（広告ブロッカー回避）
  tunnelRoute: '/monitoring-tunnel',
 
  // ビルド時にSentryが利用不可でもビルドを通す
  silent: !process.env.CI,
  hideSourceMaps: true,
});

// === エラーの分類と送信パターン ===
 
// 1. ビジネスロジックのエラー
class PaymentError extends Error {
  constructor(
    message: string,
    public readonly orderId: string,
    public readonly amount: number,
    public readonly provider: string,
    public readonly errorCode: string,
  ) {
    super(message);
    this.name = 'PaymentError';
  }
}
 
async function processPayment(order: Order) {
  try {
    const result = await stripe.charges.create({
      amount: order.total,
      currency: 'jpy',
      source: order.paymentToken,
    });
    return result;
  } catch (error) {
    const paymentError = new PaymentError(
      `Payment failed for order ${order.id}`,
      order.id,
      order.total,
      'stripe',
      (error as any).code || 'unknown',
    );
 
    Sentry.captureException(paymentError, {
      // タグ: フィルタリングとグルーピングに使用
      tags: {
        feature: 'payment',
        provider: 'stripe',
        errorCode: (error as any).code,
      },
      // 追加情報: 調査のためのコンテキスト
      extra: {
        orderId: order.id,
        orderTotal: order.total,
        userId: order.userId,
        stripeError: JSON.stringify(error),
      },
      // フィンガープリント: 同一エラーのグルーピングをカスタマイズ
      fingerprint: ['payment-error', (error as any).code || 'unknown'],
      // レベル: エラーの重要度
      level: 'fatal',
    });
 
    throw paymentError;
  }
}
 
// 2. API レスポンスエラー
async function fetchWithMonitoring<T>(
  url: string,
  options?: RequestInit,
): Promise<T> {
  const span = Sentry.startSpan(
    { name: `fetch ${url}`, op: 'http.client' },
    async (span) => {
      const response = await fetch(url, {
        ...options,
        headers: {
          ...options?.headers,
          'x-sentry-trace': Sentry.spanToTraceHeader(span),
          'baggage': Sentry.spanToBaggageHeader(span) || '',
        },
      });
 
      span.setAttributes({
        'http.status_code': response.status,
        'http.url': url,
      });
 
      if (!response.ok) {
        const body = await response.text();
 
        Sentry.captureMessage(`API Error: ${response.status} ${url}`, {
          level: response.status >= 500 ? 'error' : 'warning',
          tags: {
            'http.status_code': response.status.toString(),
            'http.url': url,
          },
          extra: {
            responseBody: body.substring(0, 1000), // 最初の1000文字のみ
            requestHeaders: options?.headers,
          },
        });
 
        throw new ApiError(response.status, body, url);
      }
 
      return response.json();
    },
  );
 
  return span as T;
}
 
// 3. ユーザーコンテキストの管理
function setupSentryUser(user: AuthUser) {
  Sentry.setUser({
    id: user.id,
    email: user.email,
    username: user.name,
    // ✓ カスタム属性
    ip_address: '{{auto}}', // Sentry が自動取得
    segment: user.plan,     // ユーザーセグメント
  });
 
  // スコープにタグを追加
  Sentry.setTag('user.plan', user.plan);
  Sentry.setTag('user.role', user.role);
 
  // ✗ 絶対に含めてはいけない情報
  // Sentry.setUser({ password: '...' });      // パスワード
  // Sentry.setUser({ creditCard: '...' });     // クレジットカード
  // Sentry.setUser({ socialSecurity: '...' }); // マイナンバー等
}
 
// ログアウト時にユーザーコンテキストをクリア
function clearSentryUser() {
  Sentry.setUser(null);
}
 
// 4. ブレッドクラム（ユーザー操作の記録）
function trackUserAction(action: string, data?: Record<string, any>) {
  Sentry.addBreadcrumb({
    message: action,
    category: 'user-action',
    level: 'info',
    data: {
      ...data,
      timestamp: new Date().toISOString(),
      url: window.location.href,
    },
  });
}
 
// 使用例
function CheckoutButton() {
  const handleClick = async () => {
    trackUserAction('checkout_started', {
      cartItems: cart.items.length,
      cartTotal: cart.total,
    });
 
    try {
      trackUserAction('payment_initiated', {
        method: selectedPaymentMethod,
      });
      await processPayment(order);
      trackUserAction('payment_completed', { orderId: order.id });
    } catch (error) {
      trackUserAction('payment_failed', {
        error: (error as Error).message,
      });
      throw error;
    }
  };
 
  return <button onClick={handleClick}>購入する</button>;
}
 
// 5. カスタムトランザクションの計測
async function measureCriticalFlow(flowName: string, fn: () => Promise<void>) {
  return Sentry.startSpan(
    {
      name: flowName,
      op: 'function',
      attributes: {
        'flow.name': flowName,
        'flow.timestamp': Date.now(),
      },
    },
    async (span) => {
      try {
        await fn();
        span.setStatus({ code: 1, message: 'ok' });
      } catch (error) {
        span.setStatus({ code: 2, message: 'internal_error' });
        throw error;
      }
    },
  );
}
 
// 使用例: ユーザー登録フローの計測
await measureCriticalFlow('user-registration', async () => {
  await Sentry.startSpan({ name: 'validate-input', op: 'validation' }, async () => {
    await validateRegistrationForm(formData);
  });
 
  await Sentry.startSpan({ name: 'create-user', op: 'db.query' }, async () => {
    await createUser(formData);
  });
 
  await Sentry.startSpan({ name: 'send-welcome-email', op: 'email' }, async () => {
    await sendWelcomeEmail(formData.email);
  });
});

// ✓ ベストプラクティス
 
// 1. 環境ごとにサンプルレートを調整
const SAMPLE_RATES = {
  development: { traces: 1.0, replays: 0, errors: 1.0 },
  staging:     { traces: 0.5, replays: 0.1, errors: 1.0 },
  production:  { traces: 0.1, replays: 0.01, errors: 1.0 },
} as const;
 
// 2. リリースバージョンを必ず設定（デプロイとの関連付け）
// CI/CD で環境変数として渡す
// SENTRY_RELEASE=$(git rev-parse --short HEAD)
 
// 3. ソースマップは必ずアップロード＆削除
// デプロイ後にソースマップを公開しない（セキュリティ）
 
// 4. 有意味なフィンガープリントでグルーピング
Sentry.captureException(error, {
  fingerprint: ['{{ default }}', userId], // デフォルト + ユーザーID
});
 
// 5. コンテキスト情報を適切に付与
Sentry.setContext('shopping_cart', {
  itemCount: cart.items.length,
  totalAmount: cart.total,
  currency: 'JPY',
});
 
 
// ✗ アンチパターン
 
// 1. 全てのエラーをキャプチャしようとする
// → ノイズが増えて本当に重要なエラーが埋もれる
try {
  doSomething();
} catch (e) {
  Sentry.captureException(e); // ✗ 意図的なエラー（入力バリデーション等）まで送らない
}
 
// 2. 機密情報をそのまま送信
Sentry.captureException(error, {
  extra: {
    creditCardNumber: '4242...', // ✗ 絶対にNG
    password: 'secret',          // ✗ 絶対にNG
    apiKey: process.env.API_KEY, // ✗ 絶対にNG
  },
});
 
// 3. サンプルレートを100%にして本番運用
Sentry.init({
  tracesSampleRate: 1.0, // ✗ 本番では高すぎる。コストとパフォーマンスに影響
});
 
// 4. エラーを握りつぶす
try {
  await processOrder();
} catch (e) {
  Sentry.captureException(e);
  // ✗ ユーザーに何も表示しない
  // ✗ エラーをre-throwしない
}
 
// 5. ソースマップを本番環境で公開
// next.config.ts で productionBrowserSourceMaps: true は避ける
// → Sentry にアップロードして、公開サーバーからは削除する

// app/dashboard/error.tsx - ダッシュボード専用のエラーバウンダリ
'use client';
 
import * as Sentry from '@sentry/nextjs';
import { useEffect, useState } from 'react';
 
interface ErrorBoundaryProps {
  error: Error & { digest?: string };
  reset: () => void;
}
 
export default function DashboardError({ error, reset }: ErrorBoundaryProps) {
  const [eventId, setEventId] = useState<string | null>(null);
  const [isReporting, setIsReporting] = useState(false);
 
  useEffect(() => {
    // Sentry にエラーを送信
    const id = Sentry.captureException(error, {
      tags: { section: 'dashboard' },
      extra: {
        digest: error.digest,
        componentStack: (error as any).componentStack,
      },
    });
    setEventId(id);
  }, [error]);
 
  const handleUserFeedback = async () => {
    if (!eventId) return;
 
    // Sentry のユーザーフィードバックダイアログを表示
    Sentry.showReportDialog({
      eventId,
      title: 'エラーが発生しました',
      subtitle: 'ご不便をおかけして申し訳ございません。',
      subtitle2: '何が起きたか教えていただけると、改善に役立ちます。',
      labelName: 'お名前',
      labelEmail: 'メールアドレス',
      labelComments: '何が起きましたか？',
      labelSubmit: '送信',
      labelClose: '閉じる',
      successMessage: 'フィードバックありがとうございます！',
    });
  };
 
  return (
    <div className="flex flex-col items-center justify-center min-h-[400px] p-8">
      <div className="bg-red-50 border border-red-200 rounded-lg p-6 max-w-md w-full">
        <div className="flex items-center mb-4">
          <svg className="w-6 h-6 text-red-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.27 16.5c-.77.833.192 2.5 1.732 2.5z" />
          </svg>
          <h2 className="text-lg font-bold text-red-800">
            ダッシュボードの読み込みに失敗しました
          </h2>
        </div>
 
        <p className="text-gray-600 mb-4">
          一時的なエラーが発生しました。再試行しても解決しない場合は、
          サポートまでお問い合わせください。
        </p>
 
        {/* エラーの種類に応じたメッセージ */}
        {error.message.includes('fetch') && (
          <p className="text-sm text-gray-500 mb-4">
            ネットワーク接続を確認してから再試行してください。
          </p>
        )}
 
        <div className="flex gap-3">
          <button
            onClick={reset}
            className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md
                       hover:bg-blue-700 transition-colors"
          >
            再試行
          </button>
          <button
            onClick={handleUserFeedback}
            className="flex-1 px-4 py-2 bg-gray-200 text-gray-700 rounded-md
                       hover:bg-gray-300 transition-colors"
          >
            問題を報告
          </button>
        </div>
 
        {/* デバッグ情報（開発環境のみ） */}
        {process.env.NODE_ENV === 'development' && (
          <details className="mt-4">
            <summary className="text-sm text-gray-500 cursor-pointer">
              デバッグ情報
            </summary>
            <pre className="mt-2 p-3 bg-gray-900 text-green-400 text-xs rounded overflow-auto max-h-48">
              {error.stack}
            </pre>
          </details>
        )}
 
        {eventId && (
          <p className="text-xs text-gray-400 mt-3">
            Error ID: {eventId}
          </p>
        )}
      </div>
    </div>
  );
}

// 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, {
      level: 'fatal',
      tags: { boundary: 'global' },
    });
  }, [error]);
 
  return (
    <html lang="ja">
      <body className="bg-gray-50">
        <div className="flex items-center justify-center min-h-screen">
          <div className="text-center p-8 max-w-lg">
            <h1 className="text-2xl font-bold text-gray-900 mb-4">
              予期しないエラーが発生しました
            </h1>
            <p className="text-gray-600 mb-6">
              申し訳ございません。アプリケーションで問題が発生しました。
              ページを再読み込みしてください。
            </p>
            <div className="flex gap-3 justify-center">
              <button
                onClick={reset}
                className="px-6 py-2 bg-blue-600 text-white rounded-md
                           hover:bg-blue-700 transition-colors"
              >
                再試行
              </button>
              <button
                onClick={() => window.location.href = '/'}
                className="px-6 py-2 bg-gray-200 text-gray-700 rounded-md
                           hover:bg-gray-300 transition-colors"
              >
                トップページへ
              </button>
            </div>
          </div>
        </div>
      </body>
    </html>
  );
}

// components/ErrorBoundary.tsx - 再利用可能なエラーバウンダリ
'use client';
 
import * as Sentry from '@sentry/nextjs';
import React, { Component, ErrorInfo, ReactNode } from 'react';
 
interface Props {
  children: ReactNode;
  fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode);
  onError?: (error: Error, errorInfo: ErrorInfo) => void;
  section?: string;
  showDetails?: boolean;
}
 
interface State {
  hasError: boolean;
  error: Error | null;
}
 
export class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false, error: null };
  }
 
  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error };
  }
 
  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    // Sentry に送信
    Sentry.withScope((scope) => {
      scope.setTag('section', this.props.section || 'unknown');
      scope.setExtra('componentStack', errorInfo.componentStack);
      Sentry.captureException(error);
    });
 
    // カスタムコールバック
    this.props.onError?.(error, errorInfo);
  }
 
  reset = () => {
    this.setState({ hasError: false, error: null });
  };
 
  render() {
    if (this.state.hasError && this.state.error) {
      // カスタムフォールバックが関数の場合
      if (typeof this.props.fallback === 'function') {
        return this.props.fallback(this.state.error, this.reset);
      }
 
      // カスタムフォールバックが ReactNode の場合
      if (this.props.fallback) {
        return this.props.fallback;
      }
 
      // デフォルトのフォールバック
      return (
        <div className="p-4 border border-red-200 rounded-lg bg-red-50">
          <h3 className="font-bold text-red-800">コンポーネントエラー</h3>
          <p className="text-sm text-gray-600 mt-1">
            このセクションの読み込みに失敗しました。
          </p>
          <button
            onClick={this.reset}
            className="mt-2 px-3 py-1 text-sm bg-red-600 text-white rounded"
          >
            再試行
          </button>
        </div>
      );
    }
 
    return this.props.children;
  }
}
 
// 使用例
function Dashboard() {
  return (
    <div className="grid grid-cols-2 gap-4">
      {/* 各ウィジェットを個別のエラーバウンダリで囲む */}
      <ErrorBoundary section="sales-chart" fallback={<ChartSkeleton />}>
        <SalesChart />
      </ErrorBoundary>
 
      <ErrorBoundary section="user-table" fallback={<TableSkeleton />}>
        <UserTable />
      </ErrorBoundary>
 
      <ErrorBoundary
        section="notifications"
        fallback={(error, reset) => (
          <div className="p-4">
            <p>通知の読み込みに失敗しました</p>
            <button onClick={reset}>再試行</button>
          </div>
        )}
      >
        <NotificationList />
      </ErrorBoundary>
    </div>
  );
}

// lib/api-error-handler.ts - API ルート用のエラーハンドラー
import * as Sentry from '@sentry/nextjs';
import { NextRequest, NextResponse } from 'next/server';
 
// カスタムエラークラス
export class AppError extends Error {
  constructor(
    message: string,
    public statusCode: number = 500,
    public code: string = 'INTERNAL_ERROR',
    public isOperational: boolean = true,
  ) {
    super(message);
    this.name = 'AppError';
  }
}
 
export class ValidationError extends AppError {
  constructor(message: string, public fields?: Record<string, string>) {
    super(message, 400, 'VALIDATION_ERROR');
    this.name = 'ValidationError';
  }
}
 
export class NotFoundError extends AppError {
  constructor(resource: string, id?: string) {
    super(`${resource}${id ? ` (${id})` : ''} not found`, 404, 'NOT_FOUND');
    this.name = 'NotFoundError';
  }
}
 
export class UnauthorizedError extends AppError {
  constructor(message = 'Unauthorized') {
    super(message, 401, 'UNAUTHORIZED');
    this.name = 'UnauthorizedError';
  }
}
 
// API ルートのラッパー関数
type ApiHandler = (req: NextRequest, context?: any) => Promise<NextResponse>;
 
export function withErrorHandling(handler: ApiHandler): ApiHandler {
  return async (req: NextRequest, context?: any) => {
    try {
      return await handler(req, context);
    } catch (error) {
      // 既知のアプリケーションエラー
      if (error instanceof AppError) {
        if (!error.isOperational) {
          // プログラミングエラー（予期しないエラー）
          Sentry.captureException(error, {
            level: 'fatal',
            tags: {
              'api.path': req.nextUrl.pathname,
              'api.method': req.method,
              'error.code': error.code,
            },
          });
        }
 
        return NextResponse.json(
          {
            error: {
              message: error.message,
              code: error.code,
              ...(error instanceof ValidationError && { fields: error.fields }),
            },
          },
          { status: error.statusCode },
        );
      }
 
      // 未知のエラー
      Sentry.captureException(error, {
        level: 'error',
        tags: {
          'api.path': req.nextUrl.pathname,
          'api.method': req.method,
        },
        extra: {
          requestBody: await req.text().catch(() => 'Unable to read body'),
        },
      });
 
      return NextResponse.json(
        {
          error: {
            message: 'Internal Server Error',
            code: 'INTERNAL_ERROR',
          },
        },
        { status: 500 },
      );
    }
  };
}
 
// 使用例: app/api/orders/[id]/route.ts
export const GET = withErrorHandling(async (req, { params }) => {
  const { id } = await params;
  const session = await getSession();
 
  if (!session) {
    throw new UnauthorizedError();
  }
 
  const order = await prisma.order.findUnique({ where: { id } });
 
  if (!order) {
    throw new NotFoundError('Order', id);
  }
 
  if (order.userId !== session.user.id) {
    throw new AppError('Forbidden', 403, 'FORBIDDEN');
  }
 
  return NextResponse.json(order);
});

// lib/web-vitals.ts - 包括的なWeb Vitals計測
 
import { onLCP, onINP, onCLS, onFCP, onTTFB, type Metric } from 'web-vitals';
 
// メトリクスの型定義
interface WebVitalsPayload {
  name: string;
  value: number;
  rating: 'good' | 'needs-improvement' | 'poor';
  delta: number;
  id: string;
  navigationType: string;
  url: string;
  timestamp: number;
  // カスタム属性
  connectionType?: string;
  deviceMemory?: number;
  userAgent: string;
  page: string;
}
 
// デバイス情報の取得
function getDeviceInfo(): Partial<WebVitalsPayload> {
  const nav = navigator as any;
  return {
    connectionType: nav.connection?.effectiveType || 'unknown',
    deviceMemory: nav.deviceMemory || 0,
    userAgent: navigator.userAgent,
  };
}
 
// メトリクスの送信
function sendMetric(metric: Metric) {
  const payload: WebVitalsPayload = {
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
    delta: metric.delta,
    id: metric.id,
    navigationType: metric.navigationType || 'unknown',
    url: window.location.href,
    timestamp: Date.now(),
    page: window.location.pathname,
    ...getDeviceInfo(),
  };
 
  // Beacon API で送信（ページ離脱時も確実に送信）
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/web-vitals', JSON.stringify(payload));
  } else {
    // フォールバック
    fetch('/api/web-vitals', {
      method: 'POST',
      body: JSON.stringify(payload),
      keepalive: true,
      headers: { 'Content-Type': 'application/json' },
    }).catch(() => {
      // 送信失敗は無視（ユーザー体験に影響しない）
    });
  }
 
  // 開発環境ではコンソールにも出力
  if (process.env.NODE_ENV === 'development') {
    const color = metric.rating === 'good' ? 'green'
      : metric.rating === 'needs-improvement' ? 'orange' : 'red';
 
    console.log(
      `%c[Web Vitals] ${metric.name}: ${metric.value.toFixed(2)} (${metric.rating})`,
      `color: ${color}; font-weight: bold;`,
    );
  }
}
 
// 計測の初期化
export function initWebVitals() {
  // Core Web Vitals
  onLCP(sendMetric);
  onINP(sendMetric);
  onCLS(sendMetric);
 
  // 補助指標
  onFCP(sendMetric);
  onTTFB(sendMetric);
}

// app/components/WebVitalsReporter.tsx
'use client';
 
import { useReportWebVitals } from 'next/web-vitals';
import { usePathname } from 'next/navigation';
 
export function WebVitalsReporter() {
  const pathname = usePathname();
 
  useReportWebVitals((metric) => {
    // Google Analytics 4 に送信
    if (typeof window.gtag === 'function') {
      window.gtag('event', metric.name, {
        value: Math.round(
          metric.name === 'CLS' ? metric.value * 1000 : metric.value,
        ),
        event_label: metric.id,
        metric_rating: metric.rating,
        metric_delta: metric.delta,
        non_interaction: true,
      });
    }
 
    // Sentry にパフォーマンスデータとして送信
    if (metric.rating === 'poor') {
      // パフォーマンスが悪い場合のみ Sentry に通知
      Sentry.captureMessage(`Poor Web Vital: ${metric.name}`, {
        level: 'warning',
        tags: {
          'web_vital.name': metric.name,
          'web_vital.rating': metric.rating,
          page: pathname,
        },
        extra: {
          value: metric.value,
          delta: metric.delta,
          navigationType: metric.navigationType,
        },
      });
    }
 
    // Vercel Analytics
    if (typeof window.va === 'function') {
      window.va('event', {
        name: 'web-vitals',
        data: {
          metric: metric.name,
          value: metric.value,
          rating: metric.rating,
          path: pathname,
        },
      });
    }
  });
 
  return null;
}
 
// app/layout.tsx での使用
import { WebVitalsReporter } from './components/WebVitalsReporter';
 
export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body>
        <WebVitalsReporter />
        {children}
      </body>
    </html>
  );
}

// app/api/web-vitals/route.ts
import { NextRequest, NextResponse } from 'next/server';
 
interface WebVitalsData {
  name: string;
  value: number;
  rating: string;
  delta: number;
  id: string;
  navigationType: string;
  url: string;
  timestamp: number;
  page: string;
  connectionType?: string;
  deviceMemory?: number;
  userAgent: string;
}
 
// インメモリバッファ（バッチ送信用）
let metricsBuffer: WebVitalsData[] = [];
const FLUSH_INTERVAL = 60_000; // 1分ごとにフラッシュ
const MAX_BUFFER_SIZE = 1000;
 
// 定期的なフラッシュ
setInterval(async () => {
  if (metricsBuffer.length > 0) {
    await flushMetrics([...metricsBuffer]);
    metricsBuffer = [];
  }
}, FLUSH_INTERVAL);
 
async function flushMetrics(metrics: WebVitalsData[]) {
  try {
    // BigQuery、ClickHouse、TimescaleDB 等に送信
    await fetch(process.env.METRICS_ENDPOINT!, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ metrics }),
    });
  } catch (error) {
    console.error('Failed to flush metrics:', error);
  }
}
 
export async function POST(req: NextRequest) {
  try {
    const data: WebVitalsData = await req.json();
 
    // バリデーション
    if (!data.name || typeof data.value !== 'number') {
      return NextResponse.json({ error: 'Invalid data' }, { status: 400 });
    }
 
    // バッファに追加
    metricsBuffer.push(data);
 
    // バッファが満杯の場合は即座にフラッシュ
    if (metricsBuffer.length >= MAX_BUFFER_SIZE) {
      const toFlush = [...metricsBuffer];
      metricsBuffer = [];
      await flushMetrics(toFlush);
    }
 
    return NextResponse.json({ status: 'ok' });
  } catch (error) {
    return NextResponse.json({ error: 'Internal error' }, { status: 500 });
  }
}

/**
 * Web Vitals 改善チェックリスト
 */
 
// === LCP（Largest Contentful Paint）の改善 ===
 
// 1. 画像の最適化
// ✓ next/image を使用
import Image from 'next/image';
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority              // LCP対象画像には priority を設定
  sizes="100vw"
  placeholder="blur"    // ぼかしプレースホルダー
  blurDataURL="..."
/>
 
// 2. フォントの最適化
// ✓ next/font でフォントを事前読み込み
import { Inter } from 'next/font/google';
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',       // テキストをすぐ表示
  preload: true,
});
 
// 3. クリティカルCSSのインライン化
// Next.js は自動的にクリティカルCSSをインライン化する
 
// 4. サーバーサイドレンダリング
// App Router のデフォルトはサーバーコンポーネント
// → LCP に有利
 
 
// === INP（Interaction to Next Paint）の改善 ===
 
// 1. 重い処理を Web Worker に移動
// workers/heavy-computation.ts
self.onmessage = (event) => {
  const result = heavyComputation(event.data);
  self.postMessage(result);
};
 
// 使用側
const worker = new Worker(new URL('./workers/heavy-computation.ts', import.meta.url));
worker.onmessage = (event) => {
  setResult(event.data);
};
worker.postMessage(inputData);
 
// 2. startTransition でUIをブロックしない
import { startTransition } from 'react';
 
function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
 
  const handleSearch = (value: string) => {
    setQuery(value); // 高優先度: 入力フィールドの更新
    startTransition(() => {
      setResults(search(value)); // 低優先度: 検索結果の更新
    });
  };
 
  return (
    <div>
      <input onChange={(e) => handleSearch(e.target.value)} value={query} />
      <SearchResults results={results} />
    </div>
  );
}
 
// 3. useDeferredValue で描画を遅延
import { useDeferredValue } from 'react';
 
function List({ items }: { items: Item[] }) {
  const deferredItems = useDeferredValue(items);
  return (
    <ul>
      {deferredItems.map(item => <ListItem key={item.id} item={item} />)}
    </ul>
  );
}
 
 
// === CLS（Cumulative Layout Shift）の改善 ===
 
// 1. 画像・動画にサイズを明示
<Image src="/photo.jpg" width={800} height={600} alt="Photo" />
 
// 2. 動的コンテンツのスペースを事前確保
function AdSlot() {
  return (
    <div style={{ minHeight: '250px', minWidth: '300px' }}>
      {/* 広告が読み込まれるまでスペースを確保 */}
      <Ad />
    </div>
  );
}
 
// 3. フォントの FOUT/FOIT を回避
// next/font の display: 'swap' を使用
 
// 4. スケルトンスクリーンの活用
function CardSkeleton() {
  return (
    <div className="animate-pulse">
      <div className="h-48 bg-gray-200 rounded-lg" />
      <div className="mt-4 h-4 bg-gray-200 rounded w-3/4" />
      <div className="mt-2 h-4 bg-gray-200 rounded w-1/2" />
    </div>
  );
}

// lib/logger.ts - 本格的なフロントエンドロガー
 
import * as Sentry from '@sentry/nextjs';
 
type LogLevel = 'debug' | 'info' | 'warn' | 'error' | 'fatal';
 
interface LogEntry {
  timestamp: string;
  level: LogLevel;
  message: string;
  context?: Record<string, any>;
  error?: {
    name: string;
    message: string;
    stack?: string;
  };
  source?: {
    file?: string;
    function?: string;
  };
  // リクエストのトレーシング
  traceId?: string;
  spanId?: string;
  // ユーザー情報（匿名化済み）
  userId?: string;
  sessionId?: string;
}
 
interface LoggerConfig {
  level: LogLevel;
  enableConsole: boolean;
  enableRemote: boolean;
  remoteEndpoint: string;
  batchSize: number;
  flushInterval: number;
  sampleRate: number;
}
 
const LOG_LEVELS: Record<LogLevel, number> = {
  debug: 0,
  info: 1,
  warn: 2,
  error: 3,
  fatal: 4,
};
 
class Logger {
  private config: LoggerConfig;
  private buffer: LogEntry[] = [];
  private flushTimer: ReturnType<typeof setInterval> | null = null;
  private sessionId: string;
 
  constructor(config?: Partial<LoggerConfig>) {
    this.config = {
      level: process.env.NODE_ENV === 'production' ? 'warn' : 'debug',
      enableConsole: process.env.NODE_ENV !== 'production',
      enableRemote: process.env.NODE_ENV === 'production',
      remoteEndpoint: '/api/logs',
      batchSize: 50,
      flushInterval: 10_000, // 10秒ごとにフラッシュ
      sampleRate: 1.0,       // 100%（本番では下げる場合あり）
      ...config,
    };
 
    this.sessionId = this.generateSessionId();
    this.startFlushTimer();
  }
 
  private generateSessionId(): string {
    return `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
  }
 
  private shouldLog(level: LogLevel): boolean {
    return LOG_LEVELS[level] >= LOG_LEVELS[this.config.level];
  }
 
  private shouldSample(): boolean {
    return Math.random() < this.config.sampleRate;
  }
 
  private createEntry(
    level: LogLevel,
    message: string,
    context?: Record<string, any>,
    error?: Error,
  ): LogEntry {
    const entry: LogEntry = {
      timestamp: new Date().toISOString(),
      level,
      message,
      sessionId: this.sessionId,
    };
 
    if (context) {
      entry.context = this.sanitizeContext(context);
    }
 
    if (error) {
      entry.error = {
        name: error.name,
        message: error.message,
        stack: error.stack,
      };
    }
 
    return entry;
  }
 
  // 機密情報の除去
  private sanitizeContext(context: Record<string, any>): Record<string, any> {
    const sensitiveKeys = [
      'password', 'token', 'secret', 'apiKey', 'api_key',
      'authorization', 'cookie', 'creditCard', 'credit_card',
      'ssn', 'socialSecurity',
    ];
 
    const sanitized: Record<string, any> = {};
    for (const [key, value] of Object.entries(context)) {
      if (sensitiveKeys.some(k => key.toLowerCase().includes(k.toLowerCase()))) {
        sanitized[key] = '[REDACTED]';
      } else if (typeof value === 'object' && value !== null) {
        sanitized[key] = this.sanitizeContext(value);
      } else {
        sanitized[key] = value;
      }
    }
    return sanitized;
  }
 
  private logToConsole(entry: LogEntry) {
    if (!this.config.enableConsole) return;
 
    const styles = {
      debug: 'color: gray',
      info: 'color: blue',
      warn: 'color: orange',
      error: 'color: red',
      fatal: 'color: red; font-weight: bold; background: yellow',
    };
 
    const prefix = `%c[${entry.level.toUpperCase()}]`;
    console.log(prefix, styles[entry.level], entry.message, entry.context || '');
  }
 
  private addToBuffer(entry: LogEntry) {
    if (!this.config.enableRemote) return;
    if (!this.shouldSample()) return;
 
    this.buffer.push(entry);
 
    if (this.buffer.length >= this.config.batchSize) {
      this.flush();
    }
  }
 
  private startFlushTimer() {
    if (typeof window === 'undefined') return;
 
    this.flushTimer = setInterval(() => {
      this.flush();
    }, this.config.flushInterval);
 
    // ページ離脱時にフラッシュ
    window.addEventListener('beforeunload', () => {
      this.flush();
    });
 
    // ページ非表示時にフラッシュ
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') {
        this.flush();
      }
    });
  }
 
  async flush() {
    if (this.buffer.length === 0) return;
 
    const entries = [...this.buffer];
    this.buffer = [];
 
    try {
      if (navigator.sendBeacon) {
        navigator.sendBeacon(
          this.config.remoteEndpoint,
          JSON.stringify({ entries }),
        );
      } else {
        await fetch(this.config.remoteEndpoint, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ entries }),
          keepalive: true,
        });
      }
    } catch (error) {
      // ログ送信の失敗はコンソールに出力するのみ
      console.warn('Failed to send logs:', error);
      // バッファに戻す（最大サイズを超えない範囲で）
      if (this.buffer.length + entries.length <= this.config.batchSize * 2) {
        this.buffer.unshift(...entries);
      }
    }
  }
 
  // === 公開メソッド ===
 
  debug(message: string, context?: Record<string, any>) {
    if (!this.shouldLog('debug')) return;
    const entry = this.createEntry('debug', message, context);
    this.logToConsole(entry);
    // debug はリモートには送信しない
  }
 
  info(message: string, context?: Record<string, any>) {
    if (!this.shouldLog('info')) return;
    const entry = this.createEntry('info', message, context);
    this.logToConsole(entry);
    this.addToBuffer(entry);
  }
 
  warn(message: string, context?: Record<string, any>) {
    if (!this.shouldLog('warn')) return;
    const entry = this.createEntry('warn', message, context);
    this.logToConsole(entry);
    this.addToBuffer(entry);
    // Sentry にブレッドクラムとして記録
    Sentry.addBreadcrumb({
      message,
      category: 'logger',
      level: 'warning',
      data: context,
    });
  }
 
  error(message: string, error?: Error, context?: Record<string, any>) {
    if (!this.shouldLog('error')) return;
    const entry = this.createEntry('error', message, context, error);
    this.logToConsole(entry);
    this.addToBuffer(entry);
    // Sentry にエラーとして送信
    if (error) {
      Sentry.captureException(error, {
        extra: { logMessage: message, ...context },
      });
    } else {
      Sentry.captureMessage(message, {
        level: 'error',
        extra: context,
      });
    }
  }
 
  fatal(message: string, error?: Error, context?: Record<string, any>) {
    if (!this.shouldLog('fatal')) return;
    const entry = this.createEntry('fatal', message, context, error);
    this.logToConsole(entry);
    this.addToBuffer(entry);
    // 即座にフラッシュ
    this.flush();
    // Sentry に致命的エラーとして送信
    Sentry.captureException(error ?? new Error(message), {
      level: 'fatal',
      extra: { logMessage: message, ...context },
    });
  }
 
  // ユーザーIDの設定
  setUserId(userId: string) {
    this.buffer.forEach(entry => {
      entry.userId = userId;
    });
  }
 
  // クリーンアップ
  destroy() {
    this.flush();
    if (this.flushTimer) {
      clearInterval(this.flushTimer);
    }
  }
}
 
// シングルトンインスタンス
export const logger = new Logger();
 
// 使用例
logger.info('User signed in', { userId: 'user_123', method: 'google' });
logger.warn('Rate limit approaching', { remaining: 10, limit: 100 });
logger.error('Failed to load dashboard', new Error('Network error'), {
  retryCount: 3,
  lastAttempt: new Date().toISOString(),
});

// lib/server-logger.ts - サーバーサイドの構造化ロガー
 
import { headers } from 'next/headers';
import * as Sentry from '@sentry/nextjs';
 
interface ServerLogEntry {
  timestamp: string;
  level: string;
  message: string;
  requestId?: string;
  method?: string;
  path?: string;
  statusCode?: number;
  duration?: number;
  userId?: string;
  ip?: string;
  userAgent?: string;
  context?: Record<string, any>;
  error?: {
    name: string;
    message: string;
    stack?: string;
  };
}
 
class ServerLogger {
  private formatEntry(entry: ServerLogEntry): string {
    // JSON Lines 形式で出力（1行1ログ）
    return JSON.stringify(entry);
  }
 
  private async getRequestContext(): Promise<Partial<ServerLogEntry>> {
    try {
      const headersList = await headers();
      return {
        requestId: headersList.get('x-request-id') || undefined,
        userAgent: headersList.get('user-agent') || undefined,
        ip: headersList.get('x-forwarded-for')?.split(',')[0]?.trim() || undefined,
      };
    } catch {
      return {};
    }
  }
 
  async info(message: string, context?: Record<string, any>) {
    const requestContext = await this.getRequestContext();
    const entry: ServerLogEntry = {
      timestamp: new Date().toISOString(),
      level: 'info',
      message,
      ...requestContext,
      context,
    };
    console.log(this.formatEntry(entry));
  }
 
  async warn(message: string, context?: Record<string, any>) {
    const requestContext = await this.getRequestContext();
    const entry: ServerLogEntry = {
      timestamp: new Date().toISOString(),
      level: 'warn',
      message,
      ...requestContext,
      context,
    };
    console.warn(this.formatEntry(entry));
  }
 
  async error(message: string, error?: Error, context?: Record<string, any>) {
    const requestContext = await this.getRequestContext();
    const entry: ServerLogEntry = {
      timestamp: new Date().toISOString(),
      level: 'error',
      message,
      ...requestContext,
      context,
      error: error ? {
        name: error.name,
        message: error.message,
        stack: error.stack,
      } : undefined,
    };
    console.error(this.formatEntry(entry));
  }
 
  // リクエストのタイミング計測
  startTimer(): () => number {
    const start = performance.now();
    return () => Math.round(performance.now() - start);
  }
}
 
export const serverLogger = new ServerLogger();
 
// 使用例: API Route でのロギング
// app/api/orders/route.ts
import { serverLogger } from '@/lib/server-logger';
 
export async function POST(req: NextRequest) {
  const timer = serverLogger.startTimer();
 
  try {
    const body = await req.json();
    await serverLogger.info('Order creation started', {
      userId: body.userId,
      itemCount: body.items.length,
    });
 
    const order = await createOrder(body);
 
    const duration = timer();
    await serverLogger.info('Order created successfully', {
      orderId: order.id,
      duration,
    });
 
    return NextResponse.json(order, { status: 201 });
  } catch (error) {
    const duration = timer();
    await serverLogger.error('Order creation failed', error as Error, {
      duration,
    });
    throw error;
  }
}