Global Error Handling

Abu Bakar Wase — Tue, 07 Apr 2020 17:41:36 +0000

There are several ways to handle error in Node application with express server in action, most famous of them is using try catch block

try {
  // some async code/execution
   } catch (err) {
  // throwing error like
  res.status(error_code).json({
     success: false,
     error: "any_custom_error_message" || err.message
  })
}

-:Issues with this approach:-

Usually in applications we have some very common errors which are appearing due to very same reason in multiple functions. Some examples are

Invalid object_Id (Cast Error)
Duplicate key (Duplicate entry/ unique field restraint)
Validation Errors (required field error)

Usually validation errors appear due to restraints which we put on keys in our model.

name: {
      required: [true, "Name is required}
      }

-:What we are going to do:-

We are going to make a global error handler which will handle these repeatedly occurring errors in a very DRY(Do not repeat yourself) way.
Steps we are going to follow

We are going to make an ErrorResponse class
We will pass err to the next function like next(err)
We will make a middle-ware function which will handle these errors

-:Lets do some code:-

class ErrorResponse extends Error {
  constructor(message, statusCode) {
    super(message); // we do this because Error class has its own error.message property and we are going to pass our message to that property
    this.statusCode = statusCode;
  }
}

module.exports = ErrorResponse;

You can create this class in utils or any helper folder. basically this will instantiate the global Error class of Javascript with our own custom message and status code.

Now second step is to make a error.js middle-ware which will handle responses on err properties like

const ErrorResponse = require("../utils/errorResponse");
const errorHandler = (err, req, res, next) => {
  let error = { ...err };
  error.message = err.message;
  // Log to console for developers
  console.log(err.stack.red);

  // Mongoose bad ObjectId
  if (err.name === "CastError") {
    const message = `Resource not found with id of ${err.value}`;
    error = new ErrorResponse(message, 404);
  }

  // Mongoose duplicate key
  if (err.code === 11000) {
    const message = "Duplicate field value entered";
    error = new ErrorResponse(message, 400);
  }

  // Mongoose validation error
  if (err.name === "ValidatorError") {
    const message = Object.values(err.error).map(val => val.message);
    error = new ErrorResponse(message, 400);
  }

  res.status(error.statusCode || 500).json({
    success: false,
    error: error.message || "Server Error"
  });
};

module.exports = errorHandler;

This is basically going to handle those three most repeatedly occurring responses on the base of err.name and err.code properties.

Third step is to change your controller methods like

try{
   //async code
} catch (err) {
   next(err)
}

and in the end mount error.js middle-ware after app.use(routes)

Now you don't need to handle these three most commonly occurring errors again and again in your controller functions. You can also use ErrorResponse class to handle case of no resource found and any other function.

if (!resource)
      return next(
        new ErrorResponse(`Resource not found with id of ${req.params.id}`, 404)
      );

The Best Way to make image/background responsive using CSS

Abu Bakar Wase — Wed, 01 Apr 2020 08:41:45 +0000

There are several ways to make image background responsive but I am going to tell you the very best way to get this done.

So before diving into those properties, I want to explain the thought process behind this. In general, our browsers try to fit the image inside the viewport. To get this done they try to fit the whole image according to viewport which makes the image lose its height to width ratio. Hence results in a poor image.

Due to this behavior, the mess of poor image started. To avoid this mess we need to figure out some behavior in which image starts to adjust itself according to the viewport by cropping out the extra part of the image.

To get this done we give these properties to the block having image/background-image

{ height: 100vh; background-image: url(../img/hero.jpg); background-size: cover; background-position: top; }

So what we are doing there? Let's discuss this one by one

height: 100vh this will make the image take full height of the viewport like it will adjust itself according to tot the height of the monitor/screen.

-background-image: url('path of your image')
just to give a path

background-size: cover;
The actual magic happens when you give cover as a size. Cover has the ability to crop out the extra part of the image to keep the image in its actual resolution.
But things are not this simple, cover actually clips the image from all the directions hence on the smaller screens only a very little part of the image will be available. To address this ratio base clipping issue we need to add another property.
background-position: top;
This will fix the image to the stated property, i.e top, bottom, left, right. This will crop the image with one side fix and help us to keep the main content of the image visible all the time.

Forem: Abu Bakar Wase

Global Error Handling

-:Issues with this approach:-

-:What we are going to do:-

The Best Way to make image/background responsive using CSS