I am trying to add prometheus metrics to an React app, which has a Switch Router wrapped in an ErrorBoundary. When I try to call with the localhost:3006/metrics path the ErrorBoundary is triggered. Redirect does not seem to apply here, since prometheus runs in this service. How do I make the router ignore the /metrics path and pass it onto the express-prom-bundle?
Code in index.tsx
const express = require("express");
const path = require("path");
const promBundle = require('express-prom-bundle');
const app = express();
app.use(express.static(path.join(__dirname, "../build")));
const metricsMiddleware = promBundle({
includeMethod: true,
includePath: true,
includeStatusCode: true,
metricType: 'histogram',
promClient: {
collectDefaultMetrics: {
timeout: 1000,
},
},
});
this.app.use(metricsMiddleware);
console.log(`Starting the collection of metrics, the metrics are available on /metrics`);
app.get("/*", (req, res) => {
res.sendFile(path.join(__dirname, "../build", "index.html"));
});
app.listen(process.env.PORT, () =>
console.log(
`Express server is running on ${process.env.PORT} Process ID: ${process.pid}`
)
);
Routing code
<ErrorBoundary
FallbackComponent={ErrorFallback}
onError={globalErrorHandler}
>
<Switch data-testid="switch">
<Route path="/" exact component={someForm} />
…
<Route component={NoMatch} />
</Switch>
</ErrorBoundary>