React Router intercepts prometheus /metrics path and causes ErrorBoundary error

Viewed 122

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>
0 Answers
Related