如何在Next.js中集成Prometheus？基于prom-client的实现求助

问题说明 #

需要在Next.js应用中通过prom-client集成Prometheus，核心需求是在getServerSideProps函数中使用Histogram指标统计数据请求的性能，但现有代码无法正常收集指标。

现有代码的核心问题 #

1. api/metrics.js中重复创建了新的Registry实例，未使用全局共享的promRegister，导致getServerSideProps中记录的指标无法被采集
2. page/index.js未导入performanceMeasurHistogram，会直接抛出引用错误
3. Next.js开发环境热重载会重复执行模块代码，未处理指标重复注册的问题

修正后的完整代码 #

1. 工具类：Utils/promClient.js #

处理单例Registry和热重载问题，确保指标只注册一次：

import { register, Histogram, collectDefaultMetrics } from "prom-client";

// 处理Next.js热重载导致的重复注册问题
if (process.env.NODE_ENV !== 'production') {
  if (global.__promRegistry) {
    register.setMetrics(global.__promRegistry.getMetrics());
  } else {
    register.clear();
    global.__promRegistry = register;
  }
} else {
  register.clear();
}

export const performanceMeasurHistogram = new Histogram({
  name: "get_data_duration_seconds", // 符合Prometheus命名规范（下划线、小写）
  help: "Duration of data fetch operations in getServerSideProps",
  labelNames: ["status", "controller", "page_url"], // 统一命名风格
  buckets: [0.1, 0.5, 1, 2.5, 5, 10], // 调整桶范围更贴合常见接口耗时
});

// 收集默认系统指标
collectDefaultMetrics({ register });

export const promRegister = register;

2. Metrics API：api/metrics.js #

直接使用全局Registry，避免重复创建：

import { promRegister } from "../Utils/promClient";

export default async function handler(req, res) {
  res.setHeader("Content-Type", promRegister.contentType);
  res.status(200).send(await promRegister.metrics());
}

3. 页面组件：pages/index.js #

正确导入Histogram，处理成功/失败场景的指标记录：

import axios from "axios";
import { performanceMeasurHistogram } from "../Utils/promClient";

export async function getServerSideProps({ res, req }) {
  let status = "success";
  let controllerPath = "";

  const timer = performanceMeasurHistogram.startTimer();
  try {
    const data = await axios.get("YOUR_API_ENDPOINT_HERE");
    status = String(data.status);
    controllerPath = data.request.path;
  } catch (error) {
    status = "error";
    controllerPath = error.config?.url || "unknown";
  } finally {
    timer({
      status,
      controller: controllerPath,
      page_url: "/",
    });
  }

  return {
    props: {}, // 返回页面需要的props
  };
}

export default function Home() {
  return <div>Home Page</div>;
}

验证步骤 #

1. 启动Next.js应用：npm run dev
2. 访问首页http://localhost:3000，触发getServerSideProps执行
3. 访问Metrics接口http://localhost:3000/api/metrics，查找get_data_duration_seconds相关指标，确认已成功收集

内容的提问来源于stack exchange，提问作者Kamran Davar