Forem: Abhinav Sachdeva

Interactive debugging for NodeJS apps in Docker

Abhinav Sachdeva — Tue, 10 Sep 2024 09:12:21 +0000

Debugging can get hectic and with a bunch of console.logs you could still be missing that one variable that needs to be printed.
Interactive debugging is nothing new for NodeJS developers, the Node devtools has been around for quite a while and here's how you can work with it while running your app inside docker.

Inside the docker compose:

Expose the debugger port on your app
Start the app with the inspect flag



services:
  user-service:
    image: node:18-alpine
    ports:
      - '3000:3000'
      - '9228:9228' #Debugger port
    working_dir: /app
    volumes:
        - ./src:/app/src
        - ./node_modules:/app/node_modules
    environment:
      VAR1: value1
      VAR2: value2
    command: node --inspect=0.0.0.0:9228 ./src/index.js # Inspect mode

Head over to the Chrome browser and open up devtools, you should have the NodeJS devtools icon available.

If not, open chrome://inspect/ in Chrome and click on "Open dedicated DevTools for Node". Also, make sure that the URL and port you're connecting to are configured as discoverable.

BONUS TIP
If you'd like to have the VS Code debugging environment, add this file at the root of your workspace. Once added, goto the debugger panel and click on the play icon against the configuration name.



// .vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Docker: Node.js",
            "type": "node",
            "request": "attach",
            "port": 9228,
            "localRoot": "${workspaceFolder}/src",
            "remoteRoot": "/app/src",
            "restart": true
        }
    ]
}

A nifty hack to make compact DB records

Abhinav Sachdeva — Thu, 07 Mar 2024 17:35:53 +0000

The Problem

We recently ran into a situation where some of our DynamoDB documents were reaching their max size limits.

Thanks to the flexibility offered by DynamoDB, teams had been adding keys without ever thinking about the document size (which is a generous one - 400Kb).

We also noticed that the documents in question had a lot of boolean attributes, We could have made a different partition and moved these attributes but that would mean changing a lot of query and getItem calls to batchGetItems.

The Solution
We instead took a different route and used the same document and infact added one more attribute to it - flags.
The bits of this attribute (of a number type) would represent all the boolean attributes we wanted to replace.

OfCourse, we had to store the order of flags as a separate configuration so we knew which bit meant which attribute but this could be loaded and cached in-memory as it was guaranteed to not change.

Here's what the records looked like after the migration:

// The fat DB item
{
  "flags": 24
  ...
}

// The configuration DB item
{
  "pk": "config#flagPosition",
  "value": ["key-1", "key-2", "key-3", ...]
}

To find out whether the flag was true or false all we needed was the position of the flag bit.

const isEnabled = (val, bitPosition) => {
    if (bitPosition > 30 || bitPosition < 0)
        throw new Error('Invalid flag position');
    return (val & (1 << bitPosition)) === 0 ? false : true;
};

isEnabled(24, config.indexOf('key-2')); // false
isEnabled(24, config.indexOf('key-3')); // true

To enable a flag:

const setEnabled = (val, bitPosition) => {
    if (bitPosition > 30 || bitPosition < 0)    
        throw new Error('Invalid flag position');
    return val | (1 << bitPosition);
};

let flags = 24;
flags = setEnabled(flags, config.indexOf('key-2'));
isEnabled(flags, config.indexOf('key-2')); // true

To disable a flag:

const setDisabled = (val, bitPosition) => {
    if (bitPosition > 30 || bitPosition < 0)
        throw new Error('Invalid flag position');
    const mask = ~(1 << bitPosition);
    return val & mask;
};
let flags = 26;
flags = setEnabled(flags, config.indexOf('key-2'));
isDisabled(flags, (flags, config.indexOf('key-2')); // true

A react optimization that takes 2 minutes to implement

Abhinav Sachdeva — Sat, 15 May 2021 13:51:39 +0000

Our applications usually have a list component (which one doesn't?), even the todo apps have it, right?
There's a good proabability that something happens when the user clicks on a list item. There's also a good probabilty that the handler is not implemented the "right" way.

const handleClick = (item) => { }
return <div className="listContainer">
    <ul>
    {
      data.map((item,idx) => (
        <li key={idx} onClick={() => handleClick(item)}>{item}</li>
      ))
    }
    </ul>
  </div>;

Maybe you've already guessed it, we're attaching a new function to each list item. And what's more, it happens on each render!

We can make use of event bubbling here to fire a common handler for every list item.

Here's how to refactor :

Remove the onClick from the list.
The handler function would now receive the item index instead of the entire item, so we need to refactor any code inside the handler assuming we have access to the index, not the array element.
Attach a data attribute to each list item while rendering. Thee value of this attribute would be the array item index (or even any property from inside of the item itself!).
Attach an onClick to the parent of the list items, it could be the parent at any level.

Here's how our code looks after the refactor:

const handleClick = (item) => {console.log(item)}
return <div className="listContainer">
    <ul onClick={(e) => handleClick(e.target.dataset.id)}>
    {
      data.map((item,idx) => (
        <li key={idx} data-id={idx}>{item}</li>
      ))
    }
    </ul>
  </div>;

This didn't take too long but benefit get big especially with larger lists.

The time for VUI is here

Abhinav Sachdeva — Sat, 25 Jul 2020 06:09:46 +0000

Adversity brings along opportunity for the one's who keep their eyes open.

With processes becoming contact less each day, having the ever changing touch screen while does serve the purpose, but also makes the user skeptic.

To touch or not to touch, that is the question.
-User

These times that we're in provide an excellent opportunity for voice enabled apps and systems. The adoption of voice though has picked up steadily, it's still not a mainstream medium of interaction. The credit of which goes not to the NLU side of the app (trust me it's so much more accurate) but to the content half.

Creating user journeys that provide an intuitive way to input data, has more to do with an engaging and cleverly written script. Yes the visual aesthetics still play their part to a certain extent but for devices like the echo (which happen to be the leader in the race) its only words you have to offer.

Making users feel confident that the app will do what's asked of it is also a major driving force in VUI acceptance. Once hooked they'll not want to go back typing out their responses!

Have you got your hands dirty with intents slots and actions yet?

API Calls with retries

Abhinav Sachdeva — Tue, 12 May 2020 09:48:29 +0000

Have you run into a situation when you needed to call a buggy API that responds with an error ever so often?
What's the solution if you have no control over that API?
Retries to the rescue!

As it happens...

Our fetchDataWithRetries function takes in the maxReties (uses 3 as a default value)
When called, this function returns a function and we make use of closure to capture the value of tries and maxTries
The returned function - apicall - takes in the URL to be called.
1. If the response is a success - return it as is
2. If there's an error increment the tries, check for max retry limit and recursively call itself


    const fetch = require('node-fetch');

    function fetchDataWithRetries(maxTries) {
        maxTries = parseInt(maxTries);
        if(!maxTries) maxTries =  3;
        let tries =  0;
            return function apicall(url) {
                if (!url) return Promise.reject("URL required")
                console.log("APICALL " + (tries + 1));
                return fetch(url)
                    .then(function (res) {
                        console.log("fetch success");
                        return res.json();
                    })
                    .catch(e => {
                        console.log("Fetch Error")
                        if (++tries < maxTries)
                            return apicall(url);
                        return Promise.reject(e)
                    });
            }
   }

 const  retyCount = 2, APIURL = 'https://jsonplaceholder.typicode.com/users/1';

fetchDataWithRetries(retyCount)(APIURL)
    .then(data => console.log(data))
    .catch(err => console.log(err));

OAuth with Fastify

Abhinav Sachdeva — Sat, 02 May 2020 05:39:10 +0000

I was recently trying to setup authentication using OAuth2 for the first time and chose my fastify as my web server. Honestly the amount of information about OAuth on the web is huge and some of it is obsolete, hence this post.

Pre-requisite

Register your app at Google Cloud Platform
Enable the Google+ API
Generate credentials - Client ID, Client secret
Setup the authorized origin(front-ends) and redirect(server-routes) URIs like so:

User-interface
Serve a basic HTML page on port 3002. Tip: use Live server for a quick start.

<body>
    <!-- Fastify server runs on localhost:3000 -->
    <a href="http://localhost:3000/api/auth/google>
        Google Login
    </a>
</body>

Setup
Install the fastify plugins required

npm i fastify-cors fastify-oauth2

Create a fastify server

const fastify = require("fastify")({});

fastify.register(require("fastify-cors"), {
    origin: "*" // allow all origins (BAD)
});

Regster the OAuth2 plugin (using Google OAuth in this example)

const oauthPlugin = require('fastify-oauth2');

fastify.register(oauthPlugin, {
    // Can be any valid variable name you prefer
    // Fastify instance will now have this as a property
    name: 'googleOAuth2', 

    // Gets user's full name, email and profile picture URL
    scope: ['profile email'], 

    credentials: {
        client: {
            id: process.env.GOOGLE_OAUTH_CLIENT_ID,
            secret: process.env.GOOGLE_OAUTH_CLIENT_SECRET
        },

        // plugin-provided configurations for Google OAuth
        auth: oauthPlugin.GOOGLE_CONFIGURATION, 
    },

    // This is automatically registered as a 
    // GET route in your app
    startRedirectPath: '/api/auth/google', 

    // Can be a relative path that serves HTML 
    // or an absolute URL to your front-end app
    callbackUri: 'http://localhost:3000/api/auth/google/callback'
});

fastify.get("api/auth/google/callback", {}, async  function (req, res) {
    // Fastify instance gets decorated with this method on OAuth plugin initialization
    const token =  await fastify.googleOAuth2.getAccessTokenFromAuthorizationCodeFlow(req);

    console.log({ token }); // Just for debugging

    // Redirect to a route serving HTML or to your front-end
    res.redirect("http://localhost:3002/?token="  + token.access_token)
})

And that's it!
Start the server. Launch the UI in a browser and click the link.