Part 2: Setup Dashboard with grafana and nestjs

With the help of this blog,where we'll walk you through using Grafana to create a dynamic dashboard and NestJS to export data with ease. In just a few easy steps, up your data visualisation game and simplify backend development. Are you ready to turn unstructured data into meaningful dashboards? Let's get started! 🚀🏊

Part One:

In the initial phase, we'll configure Prometheus with our Nest app. This ensures that the app can export data via specific endpoints. Prometheus will then scrape this data and seamlessly export it to Grafana.

1/

we need to install willsoto:

yarn add @willsoto/nestjs-prometheus prom-client

or

npm install @willsoto/nestjs-prometheus prom-client

2/

In the app module imports, be sure to include the following:



PrometheusModule.register({

path: '/app-metrics',

}),



this specifies the endpoint where the Prometheus metrics will be exposed.

Similarly, in the AppModule providers, make sure to include:

 makeCounterProvider({

      name: 'count',

      help: 'metric_help',

      labelNames: ['method', 'origin'] as string[],

    }),

 makeGaugeProvider({

      name: 'gauge',

      help: 'metric_help',

    }),

FEEL FREE TO CUSTOMIZE THEM ACCORDING TO YOUR PREFERENCES.

makeCounterProvider is likely a function or method provided by the @willsoto/nestjs-prometheus library to create a Prometheus Counter metric

• name: Specifies the name of the metric. In this case, it's set to "count"




• help: Provides a description or help text for the metric.




• labelNames: Specifies label names for the metric. Labels are key-value pairs that allow you to differentiate between different dimensions of the metric. In this case, labels for 'method' and 'origin' are defined.

3/

In order to capture all requests, we must add intercepts to our root application

export class AppModule {

  configure(consumer: MiddlewareConsumer) {

   //forRoutes('yourRootapi')

    consumer.apply(MetricsMiddleware).forRoutes('/api');

  }

}

We must include something similar to this in our interceptors:

two essential steps are necessary. First, define our metrics, and second, explore them to export significant data

@Injectable()

export class CustomMetricsMiddleware implements NestMiddleware {



  public customDurationGauge: Gauge<string>;

  public customErrorsCounter: Counter<string>;



  constructor(

    // Must be identical to those declared in our AppModule

    @InjectMetric('count') public appCounter: Counter<string>,

    @InjectMetric('gauge') public appGauge: Gauge<string>,

  )

{

 // Customizing the names and help messages for metrics

    this.customDurationGauge = new Gauge<string>({

      name: 'app_duration_metrics',

      help: 'app_concurrent_metrics_help',

      labelNames: ['app_method', 'app_origin', 'le'],

    });

    this.customErrorsCounter = new Counter<string>({

      name: 'app_error_metrics',

      help: 'app_usage_metrics_to_detect_errors',

      labelNames: ['app_method', 'app_origin', 'app_status'],

    });

}

In this example, I utilize counter metrics to count the number of requests based on method and origin, and gauge metrics to calculate the duration of each request.

 use(req: Request, res: Response, next: NextFunction) {

    // Incrementing custom counter and gauge

    this.appCounter.labels(req.method, req.originalUrl).inc();

    this.appGauge.inc();



    // Recording start time for measuring duration

    const startTime = Date.now();



    // Setting up a callback for when the response finishes

    res.on('finish', () => {

      // Calculating the duration and recording it in the custom duration gauge

      const endTime = Date.now();

      const duration = endTime - startTime;

      this.customDurationGauge

        .labels(req.method, req.originalUrl, (duration / 1000).toString())

        .set(duration);



      // Incrementing the custom errors counter based on the response status code

      this.customErrorsCounter.labels(req.method, req.originalUrl, res.statusCode.toString()).inc();

    });



    // Continuing with the middleware chain

    next();

  }

Part Two:

In the next section, we'll shift our focus to Grafana aiming to consume metrics and visually them in a meaningful way:

• So the initial step is to log in using admin/admin for the first sign-in and configure the data source like the example below :

Now, we will begin with our dashboard:

visit Grafana dashboards and search for "Node Exporter Full"

and copy the ID:

You need to choose a datasource that matches the name you used before:

and BOOM NOW WE HAVE A DASHBOARD :

YOU CAN CUSTOMIZE YOUR DASHBOARD AS YOU WANT FOR EXAMPLE FOR THE COUNTER THAT WE EXPORT FROM OUR NESTJS APP WE CAN VISUALIZE IT THERE LIKE THIS WAY :

And here we can say that we have reached the end of our blog. I hope you find it useful and informative.