DEV Community: Željko Šević

HTTP timeout with Axios

Željko Šević — Wed, 25 Sep 2024 23:29:23 +0000

Setting up a timeout for HTTP requests can prevent the connection from hanging forever, waiting for the response. It can be set on the client side to improve user experience, and on the server side to improve inter-service communication.

axios package provides a timeout parameter for this functionality.

const HTTP_TIMEOUT = 3000;
const URL = 'https://www.google.com:81';

(async () => {
  try {
    await axios(URL, {
      timeout: HTTP_TIMEOUT,
    });
  } catch (error) {
    console.error('Request timed out', error.cause);
  }
})();

Use this snippet also to simulate aborted requests.

Course

Build your SaaS in 2 weeks - Start Now

RabbitMQ container with Docker Compose

Željko Šević — Mon, 02 Sep 2024 21:57:30 +0000

Docker Compose facilitates spinning up a container for the RabbitMQ broker without installing it locally.

Prerequisites

Docker Compose installed

Configuration

The following configuration spins up the RabbitMQ container with the management UI tool.

The connection string for the RabbitMQ broker with local virtual host is amqp://localhost:5672/local.

RabbitMQ management UI is available at the http://localhost:15672 link. Default credentials are guest as username and guest as password.

# docker-compose.yml
version: '3.8'

services:
  rabbitmq:
    image: rabbitmq:3-management
    ports:
      - 5672:5672
      - 15672:15672
    environment:
      - RABBITMQ_DEFAULT_VHOST=local
    volumes:
      - 'rabbitmq_data:/data'

volumes:
  rabbitmq_data:

Run the following command to spin up the container.

docker-compose up

Course

Build your SaaS in 2 weeks - Start Now

Simulating keyboard typing with JavaScript

Željko Šević — Wed, 21 Aug 2024 18:33:32 +0000

Simulating keyboard typing in JavaScript can be useful for automating tasks or testing applications. The KeyboardEvent API allows developers to trigger keyboard events programmatically.

Examples

The snippet below simulates pressing the Ctrl + Enter command. The bubbles flag ensures the event moves up through the DOM, so any elements higher up in the document can also detect and respond to it.

const event = new KeyboardEvent('keydown', {
  key: 'Enter',
  ctrlKey: true,
  bubbles: true,
});

document.dispatchEvent(event);

The snippet below simulates pressing the Shift + Enter command on a specific input field.

const event = new KeyboardEvent('keydown', {
  key: 'Enter',
  shiftKey: true,
  bubbles: true,
});

document.querySelector('input').dispatchEvent(event);

Course

Build your SaaS in 2 weeks - Start Now

Profiling Node.js apps with Chrome DevTools profiler

Željko Šević — Fri, 05 Jul 2024 00:22:43 +0000

Profiling refers to analyzing and measuring an application's performance characteristics.

Profiling helps identify performance bottlenecks in a Node.js app, such as CPU-intensive tasks like cryptographic operations, image processing, or complex calculations.

This post covers running a profiler for various Node.js apps in Chrome DevTools.

Prerequisites

Google Chrome installed
Node.js app bootstrapped

Setup

Run node --inspect app.js to start the debugger.
Open chrome://inspect, click Open dedicated DevTools for Node and then navigate to the Performance tab. Start recording.
Run load testing via autocannon package using the following command format npx autocannon <COMMAND>.
Stop recording in Chrome DevTools.

Profiling

On Perfomance tab in Chrome DevTools open Bottom-Up subtab to identify which functions consume the most time.

Look for potential performance bottlenecks, such as synchronous functions for hashing (pbkdf2Sync) or file system operations (readFileSync).

Course

Build your SaaS in 2 weeks - Start Now

Load and stress testing with k6

Željko Šević — Fri, 10 May 2024 20:47:16 +0000

k6 is a performance testing tool. This post explains types of performance testing and dives into k6 usage, from configuration to running tests.

Load and stress testing

Load and stress testing are two types of performance testing used to evaluate how well a system performs under various conditions.

Load testing determines how the system performs under expected user loads. The purpose is to identify performance bottlenecks.

Stress testing assesses how the system performs when loads are heavier than usual. The purpose is to find the limit at which the system fails and to observe how it recovers from such failures.

Prerequisites

k6 installed
Script (Node.js) file with configuration and execution function

Configuration

Configuration is stored inside options variable, which allows you to set up different testing scenarios:

constant user load, the number of virtual users (vus) remains constant throughout the test period

export const options = {
  vus: 30,
  duration: '10m'
};

variable user load, the number of users increases and decreases over time

export const options = {
  stages: [
    {
      duration: '1m',
      target: 30
    },
    {
      duration: '10m',
      target: 30
    },
    {
      duration: '5m',
      target: 0
    }
  ]
};

Environment variables can be passed through the command line and are accessible within the script via the __ENV object.

k6 -e TOKEN=token run script.js

Execution function

This function defines what virtual users will do during the test. This function is called for each virtual user and typically includes steps that simulate user actions on the app.

export default function() {
  http.get(URL);
  // Add more actions as required
}

Test report

k6 generates a report that provides detailed insights into various benchmarks, such as the number of virtual users, requests per second, request durations and error rates.

Example

This example utilizes k6 to conduct a load test using a variable user load approach:

User simulation: The script ramps up to 1,000 users, maintains that level to simulate sustained traffic, and gradually reduces to zero.
Request handling: During the test, each virtual user sends a POST request to an API, with pauses between requests to mimic real user behavior.
Performance insights: After the test, k6 provides a report that shows key information, such as how fast the app responds and how many requests fail.

Run it via k6 -e TOKEN=1234 run script.js command.

// script.js
import { check, sleep } from 'k6';
import { scenario } from 'k6/execution';
import http from 'k6/http';

export const options = {
  stages: [
    // Ramp up to 1000 users over 10 minutes
    {
      duration: '10m',
      target: 1000
    },
    // Hold 1000 users for 30 minutes
    {
      duration: '30m',
      target: 1000
    },
    // Ramp down to 0 users over 5 minutes
    {
      duration: '5m',
      target: 0
    }
  ]
};

export default () => {
  const response = http.post(
    URL,
    JSON.stringify({
      iteration: scenario.iterationInTest
    }),
    {
      headers: {
        Authorization: __ENV.TOKEN,
        'Content-Type': 'application/json'
      }
    }
  );

  check(response, {
    'response status was 200': (res) => res.status === 200
  });

  sleep(1);
};

Course

Build your SaaS in 2 weeks - Start Now

Node Version Manager (nvm) overview

Željko Šević — Wed, 08 May 2024 23:31:11 +0000

nvm facilitates switching between different Node versions across projects. This post covers its overview from installation to version management.

Installation

To install nvm, execute the following commands in your terminal. This example uses zsh, but the process is similar for other shells like bash.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.zshrc

Version management

Install the specific version. Including the v prefix is optional.

nvm install v21.7.2

Install the latest version

nvm install node

Install the latest one for the specified major version

nvm install 22

Switch to a specific installed version

nvm use 21

Add .nvmrc file inside the project directory and run nvm use command to use the specified installed version.

v21.7.2

Get the list of locally installed versions

nvm ls

Get the list of available versions for installation

nvm ls-remote

Course

Build your SaaS in 2 weeks - Start Now

Debugging Node.js apps with Chrome DevTools debugger

Željko Šević — Thu, 11 Apr 2024 23:59:52 +0000

Debugging with a debugger and breakpoints is recommended rather than using console logs. Chrome provides a built-in debugger for JavaScript-based apps.

This post covers configuring and running a debugger for various Node.js apps in Chrome DevTools.

Prerequisites

Google Chrome installed
Node.js app bootstrapped

Setup

Open chrome://inspect, click Open dedicated DevTools for Node and open the Connection tab. You should see a list of network endpoints for debugging.

Run node --inspect-brk app.js to start the debugger, it will log the debugger network. Choose the network in Chrome to open the debugger in Chrome DevTools.

Debugging basics

The variables tab shows local and global variables during debugging.

The step over next function call option goes to the following statement in the codebase, while the step into next function call option goes deeper into the current statement.

Add logs in the debug console via logpoints by selecting the specific part of the codebase so it logs when the selected codebase executes.

Course

Build your SaaS in 2 weeks - Start Now

Sending e-mails with Sendgrid

Željko Šević — Sat, 30 Mar 2024 00:44:02 +0000

To send e-mails in a production environment, use services like Sendgrid.

Verify the e-mail address on the Sender Management page and create the SendGrid API key on the API keys page.

import nodemailer from 'nodemailer';

(async () => {
  const emailConfiguration = {
    auth: {
      user: process.env.EMAIL_USERNAME, // 'apikey'
      pass: process.env.EMAIL_PASSWORD
    },
    host: process.env.EMAIL_HOST, // 'smtp.sendgrid.net'
    port: process.env.EMAIL_PORT, // 465
    secure: process.env.EMAIL_SECURE, // true
  };

  const transport = nodemailer.createTransport(emailConfiguration);

  const info = await transport.sendMail({
    from: '"Sender" <sender@example.com>',
    to: 'recipient1@example.com, recipient2@example.com',
    subject: 'Subject',
    text: 'Text',
    html: '<b>Text</b>'
  });

  console.log('Message sent: %s', info.messageId);
})();

Course

Build your SaaS in 2 weeks - Start Now

MongoDB containers with Docker Compose

Željko Šević — Fri, 02 Feb 2024 20:31:00 +0000

Docker Compose facilitates spinning up a container for the MongoDB database without installing MongoDB locally.

Prerequisites

Docker Compose installed

Configuration

The following configuration spins up the MongoDB container with the UI tool (Mongo Express).

The connection string for the MongoDB database is mongodb://localhost:27018.

Mongo Express is available at the http://localhost:8082 link. Use the below Basic auth credentials to log in to Mongo Express.

# docker-compose.yml
version: '3.8'

services:
  mongo:
    image: 'mongo:7.0.5'
    ports:
      - 27018:27017
    volumes:
      - my-data:/var/lib/mongodb/data

  mongo-express:
    image: 'mongo-express:1.0.2'
    ports:
      - 8082:8081
    environment:
      ME_CONFIG_BASICAUTH_USERNAME: username
      ME_CONFIG_BASICAUTH_PASSWORD: password

volumes:
  my-data:

Run the following command to spin up the containers.

docker-compose up

Course

Build your SaaS in 2 weeks - Start Now

Web scraping with cheerio

Željko Šević — Fri, 19 Jan 2024 19:11:30 +0000

Web scraping means extracting data from websites. This post covers extracting data from the page's HTML tags.

Prerequisites

cheerio package is installed
HTML page is retrieved via an HTTP client

Usage

create a scraper object with load method by passing HTML content as an argument
- set decodeEntities option to false to preserve encoded characters (like &) in their original form

  const $ = load('<div><!-- HTML content --></div>', { decodeEntities: false });

find DOM elements by using CSS-like selectors

  const items = $('.item');

iterate through found elements using each method

  items.each((index, element) => {
    // ...
  });

access element content using specific methods

text $(element).text()
HTML $(element).html()
attributes
- all $(element).attr()
- specific one $(element).attr('href')
child elements
- first $(element).first()
- last $(element).last()
- all $(element).children()
- specific one $(element).find('a')
siblings
- previous $(element).prev()
- next $(element).next()

Disclaimer

Please check the website's terms of service before scraping it. Some websites may have terms of service that prohibit such activity.

Course

Build your SaaS in 2 weeks - Start Now

Integration with GitHub GraphQL API

Željko Šević — Fri, 22 Dec 2023 17:26:41 +0000

GitHub provides GraphQL API to create integrations, retrieve data, and automate workflows.

Prerequisites

GitHub token (Settings → Developer Settings → Personal access tokens)

Integration

Below is an example of retrieving sponsorable users by location.

export async function getUsersBy(location) {
  return fetch('https://api.github.com/graphql', {
    method: 'POST',
    body: JSON.stringify({
      query: `query {
        search(type: USER, query: "location:${location} is:sponsorable", first: 100) {
          edges {
            node {
              ... on User {
                bio
                login
                viewerCanSponsor
              }
            }
          }
          userCount
        }
      }`,
    }),
    headers: {
      ContentType: 'application/json',
      Authorization: `Bearer ${process.env.GITHUB_TOKEN}`
    }
  })
    .then((response) => response.json())
    .then((response) => response.data?.search?.edges || []);
}

Course

Build your SaaS in 2 weeks - Start Now

Web scraping with jsdom

Željko Šević — Wed, 13 Dec 2023 23:25:37 +0000

Web scraping means extracting data from websites. This post covers extracting data from the page's HTML when data is stored in JavaScript variable or stringified JSON.

The scraping prerequisite is retrieving an HTML page via an HTTP client.

Examples

The example below moves data into a global variable, executes the page scripts and accesses the data from the global variable.

import jsdom from 'jsdom';

fetch(URL)
  .then((res) => res.text())
  .then((response) => {
    const dataVariable = 'someVariable.someField';
    const html = response.replace(dataVariable, `var data=${dataVariable}`);

    const dom = new jsdom.JSDOM(html, {
      runScripts: 'dangerously',
      virtualConsole: new jsdom.VirtualConsole(),
    });

    console.log('data', dom?.window?.data);
  });

The example below runs the page scripts, and access stringified JSON data.

import jsdom from 'jsdom';

fetch(URL)
  .then((res) => res.text())
  .then((response) => {
    const dom = new jsdom.JSDOM(response, {
      runScripts: 'dangerously',
      virtualConsole: new jsdom.VirtualConsole(),
    });

    const data = dom?.window?.document?.getElementById('someId')?.value;

    console.log('data', JSON.parse(data));
  });

Disclaimer

Please check the website's terms of service before scraping it. Some websites may have terms of service that prohibit such activity.

Course

Build your SaaS in 2 weeks - Start Now