prom-client would be able to expose server metrics, but that could work if you use your API route to collect the client metrics for Prometheus to scrape. Have been thinking about this as well

Yeah, this all happily worked for me. Main blocker is that I can't get the route path (asPath?) in the custom server which causes a lot of useless metrics for each possible page e.g. /posts/2323331 instead of /posts/[id].

@weyert stumbled upon this blog post that you might find interesting! https://danlaush.biz/posts/dynamic-routes-prometheus

@jellebouwman Cool, going to check it out :D

Do you have any links to blog posts or documentation that helped you integrate Prometheus with Next.js?

Nice, I have been working on it too. The problem I am having that any pages of Next.js are counted as * in Prometheus. That's the last problem for me to solve.

Personally, not getting to excited about needing to use a custom server

I see no other option, if you want to keep it in the "NextJS way" of working you need to make the endpoint public. And thats nice for simple sites (for example i see health check in public api, it works but thats it).

For routes and prometheus, i think (didnt see any router exposing in next) you just need the complete middleware for express https://www.npmjs.com/package/express-prometheus-middleware my team doesnt use it for route, just health of the node itself (using other metrics for the rest). Good luck.

Newbie question, but how did you get it to run? What does your dependencies look like? I can't get it to run, as prom-client complains about missing core Node modules, such as cluster and child-process.

You run the express server to boot your next app? The above file is exactly what we use. Using latest next but worked with 8 for sure too. Maybe its possible to have it working in the Default api setup of next, but in my case i needed the express so didnt really look into it.

Just coming back here to update on the solution. I just realized Prometheus works flawlessly and out of the box on NextJS if you're using that inside your custom server, such as in this example, or inside the APIs. What me and my team were trying to do was actually monitor the time it took to run, for instance, getServerSideProps. When trying to do that we were struggling a lot, due to problems with importing it strictly in the server side.
The solution was to fallback to using Prometheus only on the custom server file, and monitor all incoming requests. express-prom-bundle is what we're using, as it makes the process really easy.

Yeah, you could probably use something like Opentelemetry to instrument http / express automatically by running it with node -r opentelemetry-tracing.js only the metrics part of Opentelemetry is still in the beta phase but appears to work alright for me. Only I haven't used node -r myself yet but I can iimagine it to work.

In my case, I had to await the register(). Unless I got {}.
Minimal reproduction: https://codesandbox.io/s/next-js-api-prom-client-forked-ono9j?file=/pages/api/metrics.ts

In my case, I had to await the register(). Unless I got {}. Minimal reproduction: https://codesandbox.io/s/next-js-api-prom-client-forked-ono9j?file=/pages/api/metrics.ts

this exactly the way to use it in NextJS. Thank you, it helps to me.

I have the same problem. any solution?

Awesome @ciandt-crodrigues, one remark; I would parse the query parameters off as it now also creates a counter for all ?_rsc= requests

Same problem here, the HttpInstrumentation output doesn't show up in production, only in dev. Using next 14.0.4

It works for me in production build with standalone output. I used the code above. I just adjusted next.config.mjs for nextjs 15.

const nextConfig = {
  output: 'standalone',
  serverExternalPackages: ['@opentelemetry/instrumentation'],
};

export default nextConfig;

It is also working with @vercel/otel

import { registerOTel } from '@vercel/otel';
import { envDetector, hostDetector, processDetector } from '@opentelemetry/resources';
import { PrometheusExporter } from '@opentelemetry/exporter-prometheus';
import { RuntimeNodeInstrumentation } from '@opentelemetry/instrumentation-runtime-node';
import { HttpInstrumentation } from '@opentelemetry/instrumentation-http';
import { getRPCMetadata, RPCType, setRPCMetadata } from '@opentelemetry/core';
import { context } from '@opentelemetry/api';

const exporter = new PrometheusExporter({
  port: 9464,
  endpoint: '/metrics',
  host: '0.0.0.0',
});

registerOTel({
  serviceName: 'app',
  resourceDetectors: [envDetector, processDetector, hostDetector],
  metricReader: exporter,
  instrumentations: [
    new HttpInstrumentation({
      requestHook: (span, request) => {
        const route = request?.url;
        if (route) {
          if (route && (route.endsWith('.json') || !route.includes('.'))) {
            const rpcMetadata = getRPCMetadata(context.active());
            if (rpcMetadata) {
              if (rpcMetadata?.type === RPCType.HTTP) {
                rpcMetadata.route = route;
              }
            } else {
              setRPCMetadata(context.active(), {
                type: RPCType.HTTP,
                route,
                span,
              });
            }
          }
        }
      },
    }),
    new RuntimeNodeInstrumentation(),
  ],
});

You tried to publish this on vercel? I have this logs locally, but on vercel still empty (Just two lines).

You tried to publish this on vercel? I have this logs locally, but on vercel still empty (Just two lines).

No, I never deploy this on vercel.

I did some search, look like prom-client did NOT support vercel egde. There are some discussion on siimon/prom-client#584. I think some ppl found workaround, take a look if in need.

Good luck !!

I am completely new to Prometheus, but I think we can do something like this.

import { NextApiResponse } from "next";
import client from "prom-client";

const collectDefaultMetrics = client.collectDefaultMetrics;
const Registry = client.Registry;
const register = new Registry();
collectDefaultMetrics({ register });


export default async function handle(_, res: NextApiResponse) {
  const metrics = await register.metrics()
  res.setHeader("Content-type", register.contentType);
  res.send(metrics);
};

Is the result correct ?

Where did you place this code @flameddd

Where did you place this code @flameddd

https://nextjs.org/docs/pages/building-your-application/routing/api-routes

For App Router you need to slightly modify my example code

After few months, I realized that my solution is significantly different with Express.js solution.

My solution only provides basic information, like CPU or memory.

On the other hand, Expressjs collects information for all routes. If you need to gather data on all APIs or endpoints, you should use the Expressjs solution.

I haven't tried the OpenTelemetry solution yet, but it seems similar to the Expressjs one.

cc @victorhdchagas @jhgeluk

thanks for all