DEV Community: Ahad Birang

Monitor your application with Prometheus

Ahad Birang — Sun, 07 Jun 2020 17:53:23 +0000

Monitoring applications over time is messy thing to do; you must collect state of the applications, store them in time series and finally create an efficient way to run query and analyze them. I love Prometheus, because it makes monitoring applications very easy. Prometheus is an open-source system monitoring and alerting toolkit originally built at SoundCloud.

With Prometheus anyone can create their own monitoring system with custom metrics and reports. The great thing about Prometheus is that you don't need to think about how to store and query data, all you need to do is to collect data from current state of the system and Prometheus takes care of the rest for you.

Prometheus repeatedly fetches the states of your application and stores them in a time series database. With Prometheus's rich API you can make queries and create reports over the time as simple as possible.

In this article we will use prom-client to provide our simple application's metrics. prom-client is a Prometheus client developed for node.js. You can find a client for your programming languages in Prometheus client libraries.

Create a simple node application

Install hapijs

yarn add @hapi/hapi

Create index.js and create simple Hapi server

'use strict';

const Hapi = require('@hapi/hapi');

const init = async () => {

    const server = Hapi.server({
        port: 3000,
        host: 'localhost'
    });

    server.route({
        method: 'GET',
        path: '/',
        handler: (request, h) => {

            return 'Hello World!';
        }
    });

    await server.start();
    console.log('Server running on %s', server.info.uri);
};

process.on('unhandledRejection', (err) => {

    console.log(err);
    process.exit(1);
});

init();

Collect application state

Let's create metrics.js and initiate simple counter metrics.

const client = require("prom-client");

const visitors = new client.Counter({
    name: "server_visits_count",
    help: "server_visits_count"
})


module.exports = {
    visit: function visit() {
        visitors.inc();
    }
};

Ok, We have a counter that counts page visits, now we need to register /metrics in server to show our metric. Prometheus will fetch /metrics periodically and store values.

In index.js

const client = require("prom-client");

...

server.route({
    method: 'GET',
    path: '/metrics',
    handler: (request, h) => {
        return h
            .response(client.register.metrics())
            .type(client.register.contentType);
    }
});

Finally lets call hit function every time a user visits our web application, In index.js:

const metrics = require('./metrics')
...
server.route({
    method: 'GET',
    path: '/',
    handler: (request, h) => {
        metrics.visit();
        return 'Hello World!';
    }
});

And done, run your server (node index.js) and open application in your browser (http://localhost:3000), then open /metrics route (http://localhost:3000/metrics) you'll see your counter metrics current value, try refreshing application home and see what happens on metrics

Install Prometheus and register your application

Go to Prometheus official download page and download proper binary file. Extract binary file open prometheus.yml in your favorite editor.

You need to add your application in scrape_configs section:

scrape_configs:
  # ...
  - job_name: 'sample'
    static_configs:
      - targets: ['localhost:3000']

Save the file and start prometheus, the executable file exists in the root directory.

Prometheus provides a web UI for running queries, visit http://localshot:3000. You can see the registered services (including your applications) in Status > Service Discovery section in web UI.

Start running queries and drawing some graphs in Graph section. For instance, in Graph section enter server_visits_count (this is the name of your application visitor counter metric).

You can find codes at Github

Hash your passwords with scrypt using Nodejs crypto module

Ahad Birang — Thu, 28 May 2020 20:50:00 +0000

From Nodejs v10, crypto module has a built-in implementation of scrypt algorithm that can be used as a password hashing algorithm. To the best of my knowledge, the state-of-art algorithm to hash and store passwords in Nodejs is bcrypt. bcrypt is a very popular module in NPM with nearly half a million downloads per week. I'm not a security expert to tell which one is better, but if you want to use Scrypt as another powerful hash algorithm, its simple:

Hash Password

Scrypt is a salted hashing algorithm. In order to hash passwords using Scrypt you need to create a unique salt on every hash.

The salt should be as unique as possible. It is recommended that a salt is random and at least 16 bytes long. See NIST SP 800-132 for

const crypto = require("crypto")

async function hash(password) {
    return new Promise((resolve, reject) => {
        // generate random 16 bytes long salt
        const salt = crypto.randomBytes(16).toString("hex")

        crypto.scrypt(password, salt, 64, (err, derivedKey) => {
            if (err) reject(err);
            resolve(salt + ":" + derivedKey.toString('hex'))
        });
    })
}

It is important to save generated salt with your hash, because without the salt there is no way to verify the password, and yes, you can store the salt in plaintex.

Check Password

As I said before we need salt to verify password. The salt can be extraced from result of hash function.

async function verify(password, hash) {
    return new Promise((resolve, reject) => {
        const [salt, key] = hash.split(":")
        crypto.scrypt(password, salt, 64, (err, derivedKey) => {
            if (err) reject(err);
            resolve(key == derivedKey.toString('hex'))
        });
    })
}

Putting all together

const crypto = require("crypto")

async function hash(password) {
    return new Promise((resolve, reject) => {
        const salt = crypto.randomBytes(8).toString("hex")

        crypto.scrypt(password, salt, 64, (err, derivedKey) => {
            if (err) reject(err);
            resolve(salt + ":" + derivedKey.toString('hex'))
        });
    })
}

async function verify(password, hash) {
    return new Promise((resolve, reject) => {
        const [salt, key] = hash.split(":")
        crypto.scrypt(password, salt, 64, (err, derivedKey) => {
            if (err) reject(err);
            resolve(key == derivedKey.toString('hex'))
        });
    })
}

(async function run () {
    const password1 = await hash("123456")
    const password2 = await hash("123456")
    console.log("password1", await verify("123456", password1));
    console.log("password2", await verify("123456", password2));
    console.log("password1 == password2", password1 == password2);   
})()

And here is the result:

password1 true
password2 true
password1 == password2 false

As you can see from the result, hashing single string with different salts results different outputs, but they both can verified.

Reveal hidden capabilities of Nuxt router

Ahad Birang — Thu, 12 Mar 2020 16:38:48 +0000

Simplicity is a double-edged sword, most of the time I enjoy what simplicity gave to me, but other times it annoys me, I want to have more control over my product and do things like God.

Over the past year, I spent most of my time working on Vue and especially with Nuxtjs. Nuxtjs is a great framework to create a universal Vue application. It is very simple to build a website with Nuxt. But, like everything else simplicity has cost. Within the last year, we use Nuxt to develop our new website and everything seems perfect. But something lacks.

Our legacy website has two pages, /hotel/HOTEL_SLUG and /hostel/HOSTEL_SLUG. These two pages have the same structure but different content, Using Nuxt we have to create two separate page file to create these web pages. But there are tens of pages like this and creating multiple pages is not an option.

What we need is multiple aliases to a single page, but supporting the full functionality of vue-router isn’t what Nuxt build for. Nuxt tries to keep everything simple to use, this cause to omit some capabilities of vue-router. Take a look at vue-router Docs.

Nuxt.js automatically generates the vue-router configuration based on your file tree of Vue files inside the pages directory.

We can’t create a single page for each of URLs, on the other hand creating multiple files for pages that do the same work and have the same functionality was annoying. All do we need is creating an alias to a page with different data. This simple problem leads us to build Router Extras Module.

Router extras reveal hidden capabilities of vue-router with simple JSON/YAML config. With router extras manipulate Nuxt router config. Router extras can:

Change page path (regardless of its directory structure)
Pass custom props to page components
Add meta fields to a route
Create one or multiple aliases for a page
Pass custom props to page aliases per alias
Write beforeEnter route guard for a single page

Usage

Install @nuxtjs/router-extras with your favorite package manager

yarn add @nuxtjs/router-extras
# or
npm i @nuxtjs/router-extras

{
 modules: [
   '@nuxtjs/router-extras'
 ]
}

Create <router> block in page and define routes

<router>
{
  path: "/hotel/:slug",
  props: {
    placeType: "hotel"
  },
  alias: [
    {
      path: "/hostel/:slug",
      props: [
        {
          placeType: "hostel"
        }
      ]
    }
  ]
}
</router>

Or if you want to do it in YAML

<router lang="yaml">
  path: /hotel/:slug
  props:
    placeType: hotel
  alias:
    -
      path: /hostel/:slug
      props:
        placeType: hostel
</router>

<router> is not a predefined tag in Vue files, so if you want syntax highlighting look at module docs.

Gitlab: Create merge requests from cli

Ahad Birang — Tue, 04 Feb 2020 20:22:54 +0000

Me and my co-workers are working on a single project. Each one of us creates a branch for a specific task and after doing some magic we had to create a merge request to the project's main branch. Merge request will be merged after another folk did approve its changes.
One thing that bothers me, is that I have to open Gitlab and create a new merge request to the main branch, every time.

I had an idea to create a merge request in CLI, and without having to visit the Gitlab website. And thanks to the Gitlab's team it is really easy to create a merge request from CLI.

As the documentation says:

GitLab supports using Git push options to perform various actions at the same time as pushing changes.

Currently, there are push options available for:

Skipping CI jobs

Merge requests

NOTICE: You need to have Git 2.10 or newer to use push options.

Using Gitlab's push options we can create a merge request just by pushing our new branch to the remote repository. All we have to do is to add -o merge_request.create option to git push command

git push -o merge_request.create origin my-branch

Executing this command will push my-branch to the remote repository and create a new merge request from out branch to the main branch of the project.

There an option to specify the target branch of the merge request. -o merge_request.target=my-target-branch will do the magic.

git push \
    -o merge_request.create \
    -o merge_request.target=my-target-branch \
    origin my-branch

Also, we can change the title of the merge request's

git push -o merge_request.title="<title>"

Set the description of the merge request.

git push -o merge_request.description="The description I want"

And set the merge request to remove the source branch when it’s merged.

git push -o merge_request.remove_source_branch

Gitlab push options are awesome and solved my problem. However, I'm too lazy to write all these options every time. I needed to create a script to do it with ease.

I have created a little js file to execute this command, let's call it .create-merge-request.js

var exec = require('child_process').exec;

var targetBranch = process.argv[2] || "develop"

exec("git push origin HEAD \
        -o merge_request.create \
        -o merge_request.remove_source_branch \
        -o merge_request.target=" + targetBranch,
    (error, stdout, stderr) => {
        stdout && console.log(`[stdout]\n${stdout}`);
        stderr && console.log(`[stderr]\n${stderr}`);
        if (error !== null) {
            console.log(`exec error: ${error}`);
        }
    }
);

After this I've updated the project's package.json file and added new script.

{
  "scripts": {
    "merge": "node .create-merge-request.js",
  }
}

Finally, I've created a merge request using this simple command.

yarn merge my-target-branch

NOTICE: Do not push your branch before this command. If you push your branch before this command it will not work. Git will response with Everything up-to-date and merge request will not be created

How to disable Nuxt's progress bar for specific pages?

Ahad Birang — Fri, 31 Jan 2020 23:42:48 +0000

Nuxtjs has a global progress bar that shows up while navigating between two routes. It is fully customizable. Its color, height, size, and duration can be easily changed using Nuxt's config file. Take a look at Nuxt's documentation.
If the progress bar's default style does not fit your application, you can simply create a loading component and tell Nuxt to load your component instead of the default progress bar.

export default {
  loading: '~/path/to/custom-loading-component.vue',
}

Custom components should have two methods start and finish. Before every route change, Nuxt calls the start function of component and after the new page is completely loaded, the finish function is called. Take a look at official documentation
Nuxt's loading bar is awesome and handy, but it has limitations in controlling its visibility. The progress bar can be disabled for all the pages or none of the pages, there isn't any config to customize the progress bar's visibility for a specific page. But nothing is impossible, especially in Nuxt. It takes a couple of hours to find a solution.
In order to disable loading bar to a specific page, you need three things:

Global flag to control the progress bar's visibility.

Create a boolean property in store/index.js

export const state = () => ({
  routerLoadingEnable: true
})
export const mutations = {
  setRouterLoadingEnable (state, payload) {
    state.routerLoadingEnable = payload
  }
}

Global mixin

Create a global mixin to register beforeRouteLeave hook for each page in order to modify the control flag. Create and register a plugin in nuxt.config.js

export default {
  plugins: [
    '~/plugins/loading-brain',
  ]
}

Inside plugins/loading-brain.js register global mixin and implement beforeRouteLeave hook.

import Vue from 'vue'
const disabledPages = [
  '/trips',
  '^/$', // exact match for homepage
  '/profile/.*'
].map(r => new RegExp(r))
Vue.mixin({
  beforeRouteLeave (to, from, next) {
    if (disabledPages.find(p => p.test(to.path))) {
      this.$store.commit('setRouterLoadingEnable', false)
    }
    next()
  }
})

Custom loading component

Create a custom component for loading, to show loading based on control flag in components/loading.vue

<template lang="html">
  <div class="loading-page" v-if="loading">
    <p>Loading...</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: false
  }),
  methods: {
    start () {
      if (this.$store.state.routerLoadingEnable === true) {
        this.loading = true
      }
    },
    finish () {
      this.loading = false 
      this.$store.commit('setRouterLoadingEnable', true)
    }
  }
}
</script>

<style scoped>
.loading-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding-top: 200px;
  font-size: 30px;
  font-family: sans-serif;
}
</style>

At the end, update nuxt.config.js to tell Nuxt to use our component.

export default {
  loading: '~/components/loading.vue'
}