DEV Community: Shimju David

How to properly catch Express-Validator errors returned by Axios

Shimju David — Thu, 09 Apr 2020 17:54:41 +0000

Many Express.js based API's extensively uses express-validator to validate their POST/ GET / PATCH requests and when we test it via postman, it normally returns proper error messages with status code. But when we call the endpoints via Axios in our client applications (Angular, React, Vue.js), it doesn't return the proper error messages as we expected.
To solve that issue we need to handle the error object returned by the Axios more precisely like below-

/*
 * Handling Errors using async/await
 * Has to be used inside an async function
 */
try {
    const response = await axios.post('http://your.site/api/signup', formData);

    // Success 🎉
    console.log(response);
} catch (error) {
    // Error 😨
    if (error.response) {
        /*
         * The request was made and the server responded with a
         * status code that falls out of the range of 2xx
         */
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
    } else if (error.request) {
        /*
         * The request was made but no response was received, `error.request`
         * is an instance of XMLHttpRequest in the browser and an instance
         * of http.ClientRequest in Node.js
         */
        console.log(error.request);
    } else {
        // Something happened in setting up the request and triggered an Error
        console.log('Error', error.message);
    }
    console.log(error);
}

useGeoPosition Hook - A Custom React Hook to grab latitude and longitude from a given address.

Shimju David — Wed, 13 Nov 2019 10:33:58 +0000

You might have encountered this requirement commonly where you want to display a google map on a listing details page and show a marker on it based on the address of the listing or a location. Here we want to pass the address of a listing or a location and you want the latitude and longitude as a return. Using Google's Geocoding API, we can extract this logic as a custom hook called useGeoPosition.

useGeoPosition hook-

This hook accepts two parameters -

key - that's your Google Geocoding API key
address- that's the address of your location where you want its latitude and longitude in return

import React, { useState, useEffect} from 'react'
    import axios from 'axios';

    const useGeoPosition = (key, address) => {
      const [position, setPosition] = useState({ lat: null, lng: null });
      const [error, setError] = useState(false);
      const [loading, setLoading] = useState(false);

      const fetchLatandLng = async () => {
        try {
              setLoading(true);
              const res = await axios.get(`https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=${key}`);
              const result = res.data.results[0].geometry.location;

              if (result.lat !== null && result.lng !== null) {
                setPosition({lat: result.lat, lng: result.lng})
              }
              else {
                setError(true);
              }
              setLoading(false);
          }
        catch (error) {
           setLoading(false);
           setError(true);
        }
      }


      useEffect(() => {
        fetchLatandLng();
      }, [address])

      return [position, loading, error]
    }

    export default useGeoPosition;

You can now call this hook in your React component as

 const [position, geoloading, geoerror] = useGeoPosition(<PassYourGoogleKey>,'Boyd St,Long Beach');

Storing config settings of a Node.js application in an elegant way.

Shimju David — Wed, 14 Aug 2019 09:12:46 +0000

This post explains how to store your config settings for your node.js application and overwriting each settings based on different environments. For example, in dev environment we will use different database and mail server than in production environment.

using a .env file

A popular solution to how you can organize and maintain your environment variables is to use a .env file. I really like this technique as it makes it super easy to have one place where I can quickly read and modify them.

Custom-Env package:

Custom env is a library built to make development more feasible by allowing multiple .env configurations for different environments. This is done by loading environment variables from a .env.env name file, into the node's process.env object.

npm i custom-env

Place this at the top of your application

// this will load .env file which is default dev mode
require('custom-env').env() 

// OR  this will load .env.staging file 
require('custom-env').env('staging')

// OR this will load .env.production file
require('custom-env').env('production')   

//OR this will load the current environment dynamically, but default to dev mode.
require('custom-env').env(true)

This by default loads configuration from the .env file and assumes the app is in development environment mode (dev).

Create a .env file in your app's root directory and add the environment variables each on new line:

APP_ENV=dev
DB_HOST=localhost
DB_USER=root
DB_PASS=root

Simple! The process.env is now loaded with the environment variables above.

//index.js
console.log(process.env.APP_ENV)
console.log(process.env.DB_HOST)
console.log(process.env.DB_USER)
console.log(process.env.DB_PASS)

/* output
dev
localhost
root
root
*/

Now create another .env for staging environment

Create a .env.staging file in your app's root directory and add the environment variables each on new line:

.env.staging
APP_ENV=staging
DB_HOST=staging.emaxsoftware.com
DB_USER=stage_user
DB_PASS=state_pwd

If you want to load from a particular environment, use:

//index.js
// This loads configuration from staging environment
require('custom-env').env('staging')

we can set environment variable using terminal

cd to project folder and

export NODE_ENV=staging

Remember your .gitignore File

A .env file is a great way to see all of your environment variables in one place. Just be sure not to put them into source control. Otherwise, your history will contain references to your secrets!

Create a .gitignore file (or edit your existing one, if you have one already) and add .env to it, as shown in the following image. The .gitignore file tells source control to ignore the files (or file patterns) you list.

Be careful to add .env to your .gitignore file and commit that change before you add your .env

Config file

If you want a dedicated config file to find the .env files, parse it, and read them into your Node.js app in an elegant way, then you will need one more npm package called dotenv.

npm i dotenv

Now let’s create a new module in a file named config.js under webroot or inside a config folder (your preference).

// config.js
const dotenv = require('dotenv');
dotenv.config();
module.exports = {
  mode: process.env.APP_ENV,
  db_host: process.env.DB_HOST,
  db_user: process.env.DB_USER,
  db_pass: process.env.DB_PASS
};

Now on index.js page on top

require('custom-env').env(true);
const { mode, db_host, db_user, db_pass } = require('./config');

console.log(`Your mode is ${mode}, dbhost is ${db_host} , dbuser is ${db_user} , dbpwd is ${db_pass} `);

Now based on environment changes, config file will also grab the respective configurations from the respective .env files, parse it and make it available in your Node.js app.