前端监控与可观测性：RUM 采集、Sourcemap 错误还原、性能采样与告警闭环

// rum.ts — 最小可运行 RUM 采集器
const ENDPOINT = 'https://monitor.example.com/collect'

type Metrics = {
  lcp?: number
  cls?: number
  inp?: number
  ttfb?: number
  fp?: number
  url: string
  ua: string
  ts: number
  vitals?: Record<string, string>
}

function report(payload: Record<string, unknown>) {
  // 页面卸载/切后台时也要发出去 → sendBeacon 不被中断
  if (navigator.sendBeacon) {
    navigator.sendBeacon(
      ENDPOINT,
      new Blob([JSON.stringify(payload)], { type: 'application/json' }),
    )
  } else {
    fetch(ENDPOINT, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
      // keepalive：允许在页面卸载时继续发送
      keepalive: true,
    })
  }
}

// 1) 收集 Web Vitals
let cls = 0
const metrics: Metrics = {
  url: location.href,
  ua: navigator.userAgent,
  ts: Date.now(),
}

new PerformanceObserver((list) => {
  const entries = list.getEntries()
  metrics.lcp = entries[entries.length - 1]?.startTime
  report({ type: 'lcp', ...metrics })
}).observe({ type: 'largest-contentful-paint', buffered: true })

new PerformanceObserver((list) => {
  for (const e of list.getEntries()) {
    if (!e.hadRecentInput) cls += e.value
  }
  metrics.cls = cls
}).observe({ type: 'layout-shift', buffered: true })

// INP 需要等会话结束或兜底上报
window.addEventListener('pagehide', () => {
  report({ type: 'page', ...metrics })
}, { once: true })

// 2) TTFB：navigation entry
const nav = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming
if (nav) {
  metrics.ttfb = nav.responseStart
  report({ type: 'ttfb', ...metrics })
}

// 3) 错误采集
window.addEventListener('error', (ev) => {
  report({ type: 'error', message: ev.message, stack: ev.error?.stack })
}, true) // 捕获阶段捕获资源加载错误

window.addEventListener('unhandledrejection', (ev) => {
  report({ type: 'error', message: String(ev.reason) })
})

// next.config.js
module.exports = {
  productionBrowserSourceMaps: false, // 不给浏览器
  experimental: {
    // 构建后把 map 文件交给脚本上传（如 Sentry/自建符号化服务）
  },
  webpack(config, { isServer, dev }) {
    if (!dev && !isServer) {
      config.devtool = 'hidden-source-map'
    }
    return config
  },
}

# 构建后上传 sourcemap（示例脚本）
npx sentry-cli sourcemaps upload --org=... --project=... ./out/_next/static/chunks

// symbolicate.ts — 用 source-map 库还原堆栈
import { SourceMapConsumer } from 'source-map'

export async function symbolicate(stack: string, sourcemaps: Map<string, Buffer>) {
  const consumer = await new SourceMapConsumer(await sourcemaps.get(url).json())
  return stack.split('\n')
    .map((line) => {
      const m = line.match(/at .* \(.*?:(\d+):(\d+)\)/)
      if (!m) return line
      const pos = consumer.originalPositionFor({
        line: +m[1], column: +m[2],
      })
      if (pos.source && pos.line) {
        const source = pos.source.split('/').pop()
        return `    at ${pos.name ?? '<anonymous>'} (${source}:${pos.line}:${pos.column})`
      }
      return line
    })
    .join('\n')
}

// 错误签名：message + 首帧源码文件:行号 → 决定聚合桶
function signature(err: { message: string; stack?: string }) {
  const file = err.stack?.match(/\(?([^:)]+\.(tsx?|jsx?|js)):(\d+):\d+\)?/)
  return `${err.message}|${file?.[1] ?? 'unknown'}:${file?.[3] ?? '0'}`
}

// 分布式采样：按 user id / session id 哈希，保证同一用户一致性
const SAMPLE_RATE = 0.1 // 10%
function shouldSample(seed: string) {
  // 简单一致性哈希，同一 seed 始终同结果
  let hash = 0
  for (let i = 0; i < seed.length; i++) {
    hash = (hash * 31 + seed.charCodeAt(i)) | 0
  }
  return (hash & 0xffff) / 0xffff <= SAMPLE_RATE
}

-- ClickHouse 或 PostgreSQL 聚合示例（P75）
SELECT
  url,
  count() AS n,
  quantile(0.75)(lcp) AS lcp_p75,
  quantile(0.90)(inp) AS inp_p90,
  quantile(0.75)(cls) AS cls_p75
FROM rum_events
WHERE ts >= now() - INTERVAL 1 HOUR
GROUP BY url
ORDER BY lcp_p75 DESC

// replay.ts — 最小 DOM 变异采集
import { patch } from 'rrweb' // 业界常用库

patch((event) => {
  // 批量缓存，按时间片打包发送
  buffer.push(event)
  if (buffer.length >= 50) flush()
})

// 只在出问题时才保留完整 replay
if (errorSignature) {
  persistReplay(sessionId, replayStream) // 标记保留
} else {
  discardReplay(sessionId)
}

// 自建告警：滑动窗口 + 环比
const ratio = errorsInWindow / sessionsInWindow
if (ratio > 0.02 && ratio > baseline * 2) {
  await notify({ channel: 'oncall', msg: `JS Error 率 ${ratio.toFixed(3)}` })
}

# 关联发布：给部署打 tag，监控里按 version 过滤
git tag release-2026-09-27 && git push origin release-2026-09-27
# 前端 SDK 带上版本
navigator.sendBeacon(ENDPOINT, new Blob([JSON.stringify({
  version: __BUILD_VERSION__,  // 构建注入
})]))

// 把 trace id 透传给后端，打通前后端链路
const traceId = crypto.randomUUID()
fetch(url, {
  headers: { 'x-trace-id': traceId },
})
// 后端日志带同一 trace-id，前端报错也带 → 一次请求全链路可查