Getting started with nerd.vision in Node.js applications

For the last few weeks, I have been developing with node JS and the various frameworks and packages located in NPM. I covered in my previous blog Getting started with Node.js - How to debug your first node application the 3 common methods of debugging node and why I found nerd.vision to be a better alternative. However, I did not cover in this blog how to install nerd.vision in your node application.

Installing the nerd.vision agent in Node.js is a very quick and simple process. It will take a few minutes and once you have installed it, you will never need to take it out, add excess logging or add inspect arguments to your node app again.

The application I will be using as an example is the Nerdulator application, this is a simple calculator application with a front end and several back end servers written in node, Java and Python.



The node backend is written in Express and contains a known issue that performing a subtraction in the application returns the wrong result. 


In this blog, we are going to cover installing nerd.vision in our node application and debugging the issue.

How to install nerd.vision in Node.js?

Installing the nerd.vision agent is a 3 step process;

  1. Install the nerd.vision agent through NPM
  2. Initialize the nerd.vision agent in your node application
  3. Call the nerd.vision close command upon exit of your application


By following these 3 steps, the nerdvision agent will run as soon as your application launches.

There is no need to remove nerd.vision when you do not need to debug your application. Nerd.vision has a negligible performance impact, when a breakpoint is fired the data will be captured and the application will resume. Capturing the data is so quick, the user will not even realise a breakpoint fired.

Installing the nerd.vision agent through NPM

To install the nerd.vision agent through NPM simply run:

npm i @nerdvision/agent

This command should be run within the directory of your node application.

Initializing the nerd.vision agent in your node application

The agent should be initialized as soon as possible within the runtime of the application. We recommend placing the arguments at the top of the file you use to initialize your node application.

Initializing the nerd.vision agent requires 2 lines of code within the js files of your application. 

Depending on the version of node you are running, you can import the nerd.vision agent into your application using;

import {nerdvision} from '@nerdvision/agent'
Or
const {nerdvision} = require('@nerdvision/agent') 


When the agent has been imported, it can be initialized using the init command;

nerdvision.init('YOUR_API_KEY')

(Optional step) Tagging  and naming your clients

You can specify configuration options in the init command by putting an object into the init function such as;

nerdvision.init({
  'apiKey':'YOUR_API_KEY',
  'name':'My node application',
  'tags':{
          'env':'production',
          'app':'application 1',
          'owner':'mikey'
        }
}).then(() => console.log('lets get nerdy!'));


You can set a defined list of tags for your client. This could be tags such as  “environment=production”. A tag is made of a key-value pair and can be any combination of key/value you like.

These tags can be used to dictate if a breakpoint is fired on a particular client.

You can find the full list of configuration options for the node client here.

Calling the nerd.vision close command upon exit of your application

Upon the exit of your application, there is a function to clean up the nerd.vision connections within your application. 

The reason for this function is to ensure that when the application halts, there is no connection to nerd.vision services that could cause an unclean shutdown to occur. 

You can call the close command for the agent as part of the process exit functions, an example of this using the node process object would be;

process.on('exit', () => {
  nerdvision.close();
});

How to configure a breakpoint in your Node.js application?

With the agent installed, you can now create a workspace and begin debugging your application. 

To configure a breakpoint;

  1. Create a workspace in nerd.vision
  2. Set a breakpoint in the application code

Create a workspace in nerd.vision

In nerd.vision I will create a workspace using the Nerdulator public repository. 

To do this I simply need to search for “nerdulator” and select the project, then hit save.

Under advanced options, I will filter for the tag production so my breakpoint only fires with tags of this value. This is a step optional and only required if you do not wish to fire a breakpoint on all connected clients.

Set a breakpoint in the application code

Using the source code viewer I will navigate to Node > models > calculator.js and view the contents of the file. The code comes directly from the git repository and is not stored by nerd.vision.

We know the issue we are facing is specifically with the subtract functionality of the application, so we will set a breakpoint on line 8 of our file where the result of the subtraction is returned.


It is that easy!

How to debug your issue in Node.js

To trigger a breakpoint all we need to do is perform a subtraction in our nerdulator front end application. As soon as we do this a snapshot will appear in nerd.vision.

In the top frame of our snapshot, the application logic seems correct. However, the variables of int1 and int2 are not correct.



If we view the second frame, where the call to calculator.js was made we see our issue. The variables int1 and int2 are set correctly as local variables, but the values passed into the subtract function are incorrect.



Fixing the error on line 15 of router.js by switching the order of the parameters int1 and int 2 would solve this issue.

Conclusion

Getting started with nerd.vision in Node.js is a quick and painless process. Within a few minutes, you can have debugger setup in node that is ready to use 24/7.