如何添加Prometheus到next.js?

Question

我应该在我的nextjs应用程序中使用prom-client .但我不知道它。我找不到任何例子

我想添加Prometheus与prom-client到我的下一个js应用程序。我应该使用直方图在getServerSideProps函数。这是我当前的代码:

// api/metrics.js
import { promRegister } from "Utils/promClient";
export default async function handler(req, res) {
const client = await import("prom-client");
const register = new client.Registry();
const collectDefaultMetrics = client.collectDefaultMetrics;
collectDefaultMetrics({ register });
res.setHeader("Content-Type", promRegister.contentType);
res.status(200).send(await promRegister.metrics());

// Utils/promClient.js
import { register, Histogram, collectDefaultMetrics } from "prom-client";
register.clear();
export const performanceMeasurHistogram = new Histogram({
name: "getData",
help: "getData",
labelNames: ["status", "controller", "pageUrl"],
buckets: [0.5 ,1, 5, 10, 20, 50, 100],
});
const collectDefault = collectDefaultMetrics;
collectDefault();
export const promRegister = register;

// page/index.js
export async function getServerSideProps({ res, req }) {
const timer = performanceMeasurHistogram.startTimer();
const data = await axios.get(...)
timer({
status: data.status,
controller: data.request.path,
pageUrl:"/",
});
}

Answer 1

你可以尝试安装npm包:

npm install prom-client

然后，您可以尝试在Next.js pages目录中创建一个名为prometheus.js的新文件:

import { register, collectDefaultMetrics } from 'prom-client';
// Create a custom counter metric for counting HTTP requests
const httpRequestCount = new Counter({
name: 'http_requests_total',
help: 'Total number of HTTP requests',
labelNames: ['method', 'route', 'statusCode'],
});
// Initialize Prometheus metrics collection
collectDefaultMetrics();
// Export a middleware function to expose a /metrics endpoint
export default function (req, res) {
res.set('Content-Type', register.contentType);
res.end(register.metrics());
}
// Export the custom counter metric for use in your application
export { httpRequestCount };

然后导入httpRequestCount:

import { httpRequestCount } from './prometheus';
export default function handler(req, res) {
// Increment the httpRequestCount metric for this request
httpRequestCount.inc({
method: req.method,
route: req.url,
statusCode: res.statusCode,
});
// Handle the request and send the response
// ...

在next.config.js文件中为/metrics端点添加一条路由:

module.exports = {
async rewrites() {
return [
{
source: '/metrics',
destination: '/prometheus',
},
];
},
};

那么你完成了!

你可以启动你的Next.js应用程序并导航到http://localhost:3000/metrics来查看Prometheus的指标。

Answer 2

上面的答案将不起作用，因为pages目录下的每个文件都期望在客户端运行。我将修改如下:

处理函数应该在api/metrics

import { NextApiRequest, NextApiResponse } from "next";
import { register, collectDefaultMetrics } from "prom-client";
collectDefaultMetrics({});
export default async function handler(_: NextApiRequest, res: NextApiResponse<any>) {
res.setHeader('Content-type', register.contentType);
res.send(await register.metrics());
}

，而配置应该更改为以下内容:

module.exports = {
async rewrites() {
return [
{
source: '/metrics',
destination: '/api/metrics',
},
];
},
};