Feat/expose metrics endpoint

app/lib/metrics.server.ts

@@ -0,0 +1,49 @@
+import client from 'prom-client'
+
+type Metrics = {
+	register: client.Registry
+	httpRequestsTotal: client.Counter<'method' | 'status_code'>
+	httpRequestDurationSeconds: client.Histogram<'method' | 'status_code'>
+}
+
+function createMetrics(): Metrics {
+	const register = new client.Registry()
+
+	register.setDefaultLabels({
+		application: 'osem_frontend',
+	})
+
+	client.collectDefaultMetrics({
+		register,
+		prefix: 'osem_',
+	})
+
+	const httpRequestsTotal = new client.Counter({
+		name: 'osem_http_requests_total',
+		help: 'Total number of HTTP requests handled by the React Router server',
+		labelNames: ['method', 'status_code'],
+		registers: [register],
+	})
+
+	const httpRequestDurationSeconds = new client.Histogram({
+		name: 'osem_http_request_duration_seconds',
+		help: 'HTTP request duration in seconds for requests handled by the React Router server',
+		labelNames: ['method', 'status_code'],
+		buckets: [0.005, 0.01, 0.025, 0.05, 0.1, 0.25, 0.5, 1, 2.5, 5, 10],
+		registers: [register],
+	})
+
+	return {
+		register,
+		httpRequestsTotal,
+		httpRequestDurationSeconds,
+	}
+}
+
+declare global {
+	var __osemMetrics: Metrics | undefined
+}
+
+export const metrics = globalThis.__osemMetrics ?? createMetrics()
+
+globalThis.__osemMetrics = metrics

app/middleware/metrics.server.ts

@@ -0,0 +1,40 @@
+import { metrics } from '~/lib/metrics.server'
+
+export async function prometheusMetricsMiddleware(
+	{ request }: { request: Request },
+	next: () => Promise<Response>,
+) {
+	const url = new URL(request.url)
+
+	// Do not count Prometheus scrapes as application traffic.
+	if (url.pathname === '/metrics') {
+		return next()
+	}
+
+	const end = metrics.httpRequestDurationSeconds.startTimer({
+		method: request.method,
+	})
+
+	try {
+		const response = await next()
+		const statusCode = String(response.status)
+
+		end({ status_code: statusCode })
+
+		metrics.httpRequestsTotal.inc({
+			method: request.method,
+			status_code: statusCode,
+		})
+
+		return response
+	} catch (error) {
+		end({ status_code: '500' })
+
+		metrics.httpRequestsTotal.inc({
+			method: request.method,
+			status_code: '500',
+		})
+
+		throw error
+	}
+}

app/middleware/tos-ui.server.ts

@@ -19,6 +19,10 @@ export async function tosUiMiddleware(
 ) {
 	const url = new URL(request.url)
 
+	if (url.pathname === '/metrics') {
+		return next()
+	}
+
 	if (url.pathname.startsWith('/api')) {
 		// handled by tos-api middleware
 		return next()

app/root.tsx

@@ -21,9 +21,11 @@ import { updateUserlocale } from './db/models/user.server'
 import { getEnv } from './lib/env.server'
 import { getLocale, i18nCookie, i18nextMiddleware } from './middleware/i18next'
 import { tosUiMiddleware } from './middleware/tos-ui.server'
+import { prometheusMetricsMiddleware } from './middleware/metrics.server'
 import { getUser } from './services/session-service.server'
 
 export const middleware: Route.MiddlewareFunction[] = [
+	prometheusMetricsMiddleware,
 	i18nextMiddleware,
 	tosUiMiddleware,
 ]

app/routes/metrics.ts

@@ -0,0 +1,11 @@
+import { metrics } from '~/lib/metrics.server'
+
+export async function loader() {
+	return new Response(await metrics.register.metrics(), {
+		status: 200,
+		headers: {
+			'Content-Type': metrics.register.contentType,
+			'Cache-Control': 'no-store',
+		},
+	})
+}

package.json

@@ -106,6 +106,7 @@
     "nodemailer": "^8.0.9",
     "pg": "^8.20.0",
     "postgres": "^3.4.9",
+    "prom-client": "^15.1.3",
     "radix-ui": "^1.4.3",
     "react": "^19.2.6",
     "react-chartjs-2": "^5.3.1",