搭建前端性能监控平台采集 FMP 数据在技术上可通过 Performance API 实现，但需注意该指标在主流评分体系中已被 LCP 取代。若因存量系统维护或特定业务对比需求必须采集，需锁定 web-vitals 旧版本并配套完整的后端接收与存储方案。

核心警告与版本选择

web-vitals 库在 v3.0.0 版本后移除了 getFMP 方法，直接安装最新版会导致代码运行报错。若需采集 FMP，必须锁定特定版本。

# 锁定支持 FMP 的最后版本
npm install web-vitals@2.5.4

同时，Google 官方已明确建议优先使用 LCP 作为核心加载指标，FMP 仅作为历史数据兼容。新搭建平台建议以 LCP 为主，FMP 为辅。

前端采集实操

前端监控采集本质是监听浏览器性能接口并将数据发送至服务端。以下代码包含 URL 脱敏处理及 sendBeacon 大小限制检查。

import { getFMP, getLCP } from 'web-vitals';

// 1. URL 脱敏处理，防止敏感信息泄露
function sanitizeUrl(url) {
  try {
    const urlObj = new URL(url);
    // 移除可能包含 token 或隐私的查询参数
    const sensitiveParams = ['token', 'secret', 'phone', 'id'];
    sensitiveParams.forEach(param => urlObj.searchParams.delete(param));
    return urlObj.toString();
  } catch (e) {
    return url;
  }
}

// 2. 数据上报函数
function sendToAnalytics(metric) {
  const payload = {
    name: metric.name,
    value: metric.value,
    url: sanitizeUrl(window.location.href),
    device: navigator.userAgent,
    time: Date.now()
  };
  const body = JSON.stringify(payload);

  // 3. sendBeacon 有 64KB 限制，超出则降级为 fetch
  if (navigator.sendBeacon && body.length < 65536) {
    navigator.sendBeacon('/api/performance', body);
  } else {
    fetch('/api/performance', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body,
      keepalive: true
    }).catch(() => {
      // 可选：失败写入 localStorage 待下次重试
      console.warn('Performance report failed');
    });
  }
}

// 同时采集 FMP 和 LCP
getFMP(sendToAnalytics);
getLCP(sendToAnalytics);

后端接收服务搭建

后端需提供一个接收 POST 请求的接口，并配置 CORS 允许前端跨域上报。以下基于 Node.js Express 的最小化实现：

const express = require('express');
const app = express();

app.use(express.json());

// 配置 CORS 允许前端域名访问
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

app.post('/api/performance', (req, res) => {
  const data = req.body;
  // 异步写入数据库或消息队列，避免阻塞响应
  // db.insert('performance_metrics', data);
  console.log('Received metric:', data.name, data.value);
  res.status(200).send('OK');
});

app.listen(3000, () => console.log('Monitor service running on port 3000'));

数据存储与可视化

上报数据包含 name、value、url 等字段。存储时需按 url、device_type 打标签，方便后续分组查询。以下是 MySQL 表结构参考：

CREATE TABLE performance_metrics (
  id INT AUTO_INCREMENT PRIMARY KEY,
  metric_name VARCHAR(50) NOT NULL,
  metric_value FLOAT NOT NULL,
  page_url VARCHAR(255) NOT NULL,
  user_agent TEXT,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  INDEX idx_name (metric_name),
  INDEX idx_time (created_at)
);

在 Grafana 中展示时，建议按 P75 或 P90 分位数展示数据，避免平均值被极端值掩盖。SQL 查询示例：

SELECT 
  percentile_cont(0.75) WITHIN GROUP (ORDER BY metric_value) AS p75_value
FROM performance_metrics
WHERE metric_name = 'FMP' 
  AND created_at > NOW() - INTERVAL '1 hour';

验证与排查

• 本地调试：打开 Chrome DevTools 的 Network 面板，筛选 performance 或你的接口关键词，刷新页面后查看是否有请求发出。
• 数据核对：在 Performance 面板录制页面加载，查看 FMP 时间点是否与上报的 value 值接近。注意 DevTools 中的数值可能与真实用户环境有差异，仅作参考。
• 服务端日志：检查后端接收到的日志字段是否完整，特别是 url 信息是否已脱敏，确保能定位到具体页面且不泄露隐私。

常见坑

• 单页应用（SPA）路由变更：传统 FMP 采集通常只针对首次加载。在 SPA 中，路由切换不会触发页面刷新，需监听路由变化并重新初始化监控，否则后续页面数据缺失。
• Beacon 丢失与限制：sendBeacon 有 64KB 数据大小限制，且在网络极差或浏览器进程被杀时仍可能丢失。建议在前端做本地缓存，待网络恢复后重试。
• CORS 跨域问题：若监控域名与业务域名不一致，后端必须配置 Access-Control-Allow-Origin，否则浏览器会拦截上报请求。
• 指标含义混淆：部分旧文档仍将 FMP 等同于 FCP。FCP 是首次绘制任何内容，FMP 是首次绘制主要内容，两者数值不同，分析时不要混用。

参考来源

• Google Developers - Web Vitals：介绍 Web Vitals 指标及 FMP 状态变更。
• MDN Web Docs - Performance API：提供浏览器性能接口的标准定义。
• GitHub - GoogleChrome/web-vitals：官方提供的 Web Vitals JavaScript 库源码及文档。