全链路性能监控体系

// plugins/web-vitals.client.ts
export default defineNuxtPlugin(() => {
  onNuxtReady(async () => {
    const { onLCP, onCLS, onINP, onFCP, onTTFB } = await import('web-vitals')
 
    function reportMetric(metric: any) {
      const body = {
        name: metric.name,
        value: metric.value,
        rating: metric.rating,       // 'good' | 'needs-improvement' | 'poor'
        delta: metric.delta,
        id: metric.id,
        navigationType: metric.navigationType,
        url: window.location.href,
        userAgent: navigator.userAgent,
        timestamp: Date.now(),
      }
 
      // 使用 sendBeacon 确保页面关闭前发送
      if (navigator.sendBeacon) {
        navigator.sendBeacon('/api/analytics/vitals', JSON.stringify(body))
      } else {
        fetch('/api/analytics/vitals', {
          method: 'POST',
          body: JSON.stringify(body),
          keepalive: true,
        })
      }
    }
 
    onLCP(reportMetric)
    onCLS(reportMetric)
    onINP(reportMetric)
    onFCP(reportMetric)
    onTTFB(reportMetric)
  })
})

// app/composables/usePerformanceMark.ts
export function usePerformanceMark(name: string) {
  const startTime = ref(0)
 
  function start() {
    startTime.value = performance.now()
    performance.mark(`${name}:start`)
  }
 
  function end() {
    performance.mark(`${name}:end`)
    const measure = performance.measure(name, `${name}:start`, `${name}:end`)
 
    // 上报自定义指标
    reportCustomMetric(name, measure.duration)
  }
 
  return { start, end }
}
 
// 使用示例
const { start, end } = usePerformanceMark('video-player-init')
start()
await initPlayer(container, options)
end()  // 上报播放器初始化耗时

// plugins/error-monitor.client.ts
export default defineNuxtPlugin((nuxtApp) => {
  // Vue 组件渲染错误
  nuxtApp.hook('vue:error', (error, instance, info) => {
    reportError({
      type: 'vue-error',
      message: error instanceof Error ? error.message : String(error),
      stack: error instanceof Error ? error.stack : undefined,
      componentName: instance?.$options?.name,
      info,
      url: window.location.href,
    })
  })
 
  // 未捕获的 Promise 拒绝
  window.addEventListener('unhandledrejection', (event) => {
    reportError({
      type: 'unhandled-rejection',
      message: event.reason?.message || String(event.reason),
      stack: event.reason?.stack,
      url: window.location.href,
    })
  })
 
  // 资源加载失败（图片、脚本、样式）
  window.addEventListener('error', (event) => {
    if (event.target instanceof HTMLElement) {
      reportError({
        type: 'resource-error',
        tagName: event.target.tagName,
        src: (event.target as any).src || (event.target as any).href,
        url: window.location.href,
      })
    }
  }, true)
})

// server/middleware/performance.ts
export default defineEventHandler((event) => {
  const start = performance.now()
  const method = event.method
  const path = event.path
 
  // 响应完成后记录
  event.node.res.on('finish', () => {
    const duration = performance.now() - start
    const statusCode = event.node.res.statusCode
 
    // 结构化日志
    console.log(JSON.stringify({
      type: 'api-performance',
      method,
      path,
      statusCode,
      duration: Math.round(duration),
      timestamp: new Date().toISOString(),
    }))
 
    // 慢请求告警
    if (duration > 1000) {
      console.warn(`[SLOW API] ${method} ${path} took ${Math.round(duration)}ms`)
    }
  })
})

// plugins/ssr-timing.server.ts
export default defineNuxtPlugin((nuxtApp) => {
  const start = performance.now()
 
  nuxtApp.hook('app:rendered', () => {
    const duration = performance.now() - start
    const event = useRequestEvent()
 
    // 添加 Server-Timing 头（可在 DevTools 的 Network 面板看到）
    if (event) {
      setResponseHeader(event, 'Server-Timing', `ssr;dur=${Math.round(duration)}`)
    }
 
    console.log(JSON.stringify({
      type: 'ssr-performance',
      path: event?.path,
      duration: Math.round(duration),
      timestamp: new Date().toISOString(),
    }))
  })
})

// server/plugins/otel.ts
import { NodeSDK } from '@opentelemetry/sdk-node'
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'
import { getNodeAutoInstrumentations } from '@opentelemetry/auto-instrumentations-node'
 
export default defineNitroPlugin(() => {
  const sdk = new NodeSDK({
    serviceName: 'ai-video-platform',
    traceExporter: new OTLPTraceExporter({
      url: process.env.OTEL_EXPORTER_OTLP_ENDPOINT,
    }),
    instrumentations: [getNodeAutoInstrumentations()],
  })
 
  sdk.start()
})

// server/utils/db.ts
import { drizzle } from 'drizzle-orm/node-postgres'
 
export const db = drizzle(pool, {
  logger: {
    logQuery(query, params) {
      const start = performance.now()
      // Drizzle 的 logger 在查询前调用
      // 需要配合 OTel 或自定义 wrapper 获取耗时
      console.log(JSON.stringify({
        type: 'db-query',
        query: query.substring(0, 200),  // 截断，避免日志过长
        timestamp: new Date().toISOString(),
      }))
    },
  },
})

// server/utils/cache-monitor.ts
const stats = { hits: 0, misses: 0 }
 
export async function monitoredCache<T>(
  key: string,
  queryFn: () => Promise<T>,
  ttl = 60
): Promise<T> {
  const storage = useStorage('cache')
  const cached = await storage.getItem<T>(key)
 
  if (cached) {
    stats.hits++
    return cached
  }
 
  stats.misses++
  const result = await queryFn()
  await storage.setItem(key, result, { ttl })
 
  // 定期输出命中率（每 100 次请求）
  if ((stats.hits + stats.misses) % 100 === 0) {
    const hitRate = stats.hits / (stats.hits + stats.misses) * 100
    console.log(JSON.stringify({
      type: 'cache-stats',
      hits: stats.hits,
      misses: stats.misses,
      hitRate: `${hitRate.toFixed(1)}%`,
    }))
  }
 
  return result
}

// server/api/ai/generate.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  const taskId = generateId()
  const startTime = Date.now()
 
  // 记录任务开始
  console.log(JSON.stringify({
    type: 'ai-task-start',
    taskId,
    model: body.model,
    promptLength: body.prompt.length,
    timestamp: new Date().toISOString(),
  }))
 
  try {
    const result = await generateVideo(body)
 
    // 记录任务完成
    console.log(JSON.stringify({
      type: 'ai-task-complete',
      taskId,
      duration: Date.now() - startTime,
      model: body.model,
      outputSize: result.fileSize,
      timestamp: new Date().toISOString(),
    }))
 
    return result
  } catch (error) {
    // 记录任务失败
    console.error(JSON.stringify({
      type: 'ai-task-error',
      taskId,
      duration: Date.now() - startTime,
      model: body.model,
      error: error instanceof Error ? error.message : String(error),
      timestamp: new Date().toISOString(),
    }))
    throw error
  }
})

// server/middleware/server-timing.ts
export default defineEventHandler((event) => {
  const timings: string[] = []
  const start = performance.now()
 
  // 记录各阶段耗时
  event.context.timing = {
    mark(name: string) {
      timings.push(`${name};dur=${Math.round(performance.now() - start)}`)
    },
  }
 
  event.node.res.on('finish', () => {
    timings.push(`total;dur=${Math.round(performance.now() - start)}`)
    setResponseHeader(event, 'Server-Timing', timings.join(', '))
  })
})

// 统一的日志接口
interface PerformanceLog {
  type: 'api-performance' | 'ssr-performance' | 'db-query' | 'cache-stats' | 'ai-task-start' | 'ai-task-complete'
  timestamp: string
  duration?: number
  [key: string]: any
}