DEV Community: krishna-Tiwari

Understanding the Importance of Kafka in High-Volume Data Environments

krishna-Tiwari — Fri, 30 Aug 2024 13:24:15 +0000

Introduction

In today's world, many applications in banking, insurance, telecom, manufacturing, and other industries have large numbers of users. These users generate huge amounts of data in real-time. Storing and processing this data for real-time analytics can be difficult and challenging. Traditional databases struggle to handle this because they can’t process and store data quickly enough. To address these issues, Apache Kafka plays an important role.

According to the official Kafka website, "more than 80% of all Fortune 100 companies trust and use Kafka" to manage their data streams.

Apache Kafka Official Website

This highlights how important Kafka is for organizations. Let’s explore some scenarios to understand how Kafka helps organizations and how it works through practical examples.

Real-Time Messaging: How Kafka Powers Instant Communication

Imagine the pressure of delivering messages instantly while ensuring they’re securely stored for future reference. In a real-time chat system like WhatsApp or Slack, users constantly send and receive messages in various groups. These messages must be delivered instantly and also stored in a database for future reference. The massive amount of data generated by users in real time can create significant traffic and load on the database. Traditional databases(SQL, NoSQL) often have low throughput, which means they struggle to handle a large number of transactions simultaneously. This is where Kafka is beneficial.

Throughput: The amount of data processed by a system in a specific time, 
usually measured in transactions or messages per second(TPS).
 High throughput means the system can handle many operations efficiently.

Real-Time Analytics in Ride-Sharing

Let’s consider another example involving Pathao. Pathao has numerous drivers providing services by picking up passengers from one location and dropping them off at another. To perform effective analytics, the system must capture detailed information about every trip, including location data (potentially updated every second), the speed of the vehicle, and the time taken for each journey. However, traditional databases often struggle with the massive amounts of data generated in real-time. This is where Kafka efficiently manages the data flow.

Disclaimer: I do not have detailed knowledge of the internal architecture of Pathao. This example is intended to illustrate a use case for Kafka.

Enhancing Food Delivery Services

As a food delivery app like Foodmandu, customers place orders and get real-time updates on the delivery person's location. The location data needs to be updated every second, along with other details like the time taken and the generated location. This information is important for storing in the database for future analysis and improvements. However, traditional databases often can't handle the large amounts of data generated at the same time by many users. This is where Kafka is essential, efficiently managing and processing this data to ensure a smooth and responsive experience for both customers and delivery personnel.

Disclaimer: I do not have detailed knowledge of the internal architecture of Foodmandu. This example is intended to illustrate a use case for Kafka.

The Dual Role of Kafka in Real-Time Data Management

From these examples, we can conclude that Kafka not only serves as a messaging system but also functions as a data store. It offers very high throughput, meaning it can handle a significantly larger volume of transactions simultaneously compared to traditional databases. This capability makes Kafka an ideal solution for applications that require real-time data processing and analytics.

Why Use Kafka Alongside Traditional Databases?

However, a question may arise: why not use Kafka instead of a traditional database?

While Kafka provides high throughput, meaning it can handle a large number of operations for storing and retrieving data, but it is not designed for long-term data storage. Kafka retains data for a limited time, which makes it less suitable for applications that require persistent historical data storage. Therefore, it is often used alongside traditional databases, where Kafka manages real-time data processing, stores data temporarily, and sends the processed outcomes to the database. The traditional database then stores this data for long-term access and analysis.

Conclusion and Next Steps

Thank you for joining me on this exploration of Apache Kafka! I hope you found the information on Apache Kafka and its applications valuable. In my next piece, I will take a closer look at the key terms used in Kafka and provide practical implementation examples through code. If you have experiences with Kafka or questions about its applications, I’d love to hear your thoughts in the comments below. Your feedback is invaluable as I continue to learn and share.

Stay tuned for my upcoming article, where we’ll explore essential Kafka terminologies that can enhance your understanding and usage of this powerful tool. Don’t forget to follow me for updates!

Balancing Data Deletion and Historical Accuracy in E-Commerce with MongoDB

krishna-Tiwari — Sun, 11 Aug 2024 15:39:26 +0000

Introduction

Hello friends! I’m working on an e-commerce project using MongoDB, Node.js, Express, and React. The project has been progressing smoothly and worked perfectly as my expectations. However, a critical challenge arises: how to handle product data deletion while maintaining historical accuracy. In this article, I’ll share some effective strategies for managing this issue.

Essential Modules for E-Commerce

As we know, Every e-commerce platform needs fundamental modules such as products, sellers, customers, and orders. I believe these modules are the minimum required for any e-commerce platform.

Managing Product and Order Data

In the product module, I have included all the product-related attributes, while the orders module contains the history of ordered items.

While managing CRUD operations for the Product and orders, a scenario came to mind regarding product deletion. What if a product that has already been ordered needs to be deleted? How should we handle this situation?

We need to keep the historical data consistent, but how can we retrieve the product details if the product has been deleted?

This has been a real challenge for me.

I consulted my respected teacher about this situation and arrived at some conclusions that might be suitable.

Soft Delete

We can implement a soft delete instead of physically deleting a product from the collection. I think this is the simple approach. This involves adding a boolean field, such as is_deleted, to the product collection. When a product is deleted, we set this flag to true instead of removing the whole document from the collection.

By retaining the product data in the database, we can reference it for historical orders. However, if we want to retrieve products for normal queries, make sure to only fetch those where the is_deleted flag is set to be false.

Example:

{
  "_id": "12345",
  "product_name": "Example Product",
  "price": 29.99,
  "image_link": "image_link or Url",
  "is_deleted": true
}

Archiving

In this scenario, instead of physically deleting products, we can move the product data to a separate archive collection. This means we maintain an active product collection for current items and an archive collection for deleted products. This approach keeps the original product table clean and focused on active products while still preserving historical data in a separate product_archive collection.

Separating active and archived data can enhance performance and simplify the management of large datasets. However, it's important to note that this approach may require handling more complex queries to retrieve data from the archived collection.

Example:

Active Products Collection:

{
  "_id": "12345",
  "product_name": "Example Product",
  "price": 29.99,
  "image_link": "image_link or URL"
}

Archived Products Collection:

{
  "_id": "12345",
  "product_name": "Example Product",
  "price": 29.99,
  "image_link": "image_link or URL",
  "archived_date": "2024-06-20"
}

Details in order collection

In this approach, we store essential product details directly in the orders collection at the time of purchase. This includes information such as product_name, price, image_link, and other relevant attributes. By doing this, we ensure that even if the product is later deleted from the main product collection, the order will still have all the necessary data. This method helps keep our order records complete and accurate, regardless of any changes to the product collection.
This simplifies the structure, as product data is already present in order collection.

example

{
  "order_id": "67890",
  "customer_id": "54321",
  "products": [
//Might contain more products here what purchased
    {
      "product_name": "Example Product",
      "price": 29.99,
      "image_link": "image_link or URL"
    }
  ]
}

However, this approach does introduce data redundancy!!, Don't worry 😊a common occurrence in MongoDB due to its flexible schema design. 😁😁 The advantage of MongoDB’s flexibility is that you don’t need to normalize your tables, which can make handling data more straightforward in many scenarios.

What did I implement?
I implemented the soft delete technique first, as a single is_deleted key effectively solves all my problems. You can explore other techniques as well, depending on your use case and what works best for you.

Feel free to share your thoughts in the comments and suggest to me any other techniques you've found helpful. Let's collaborate and learn from each other's experiences! If you found this article useful, don't hesitate to share it with your friends and colleagues. Together, we can build even better solutions!
Thank you

Nodemailer and Mailtrap Integration: The Perfect Solution for Easy Email Testing

krishna-Tiwari — Tue, 06 Jun 2023 16:08:17 +0000

Introduction

As a developer, I have experienced many such situations where SMTP [email services] services are required. Some of the most common cases are:

While sending verification mail to newly registered users.
Sending Once Time Password (OTP) to the user.
To send the same email to a group of users. [Broadcast 😊]
And so on.

I am here today to assist all of you [and it's a pleasure also] with, How to set up a mailing service with Express and Nodemailer.

For the testing purpose of the mailing service, I am using Mailtrap.
You can use other services like Gmail, outlook but they are premium and costly too.

Nodemailer

Nodemailer is a popular open-source library for sending emails using Node.js. It provides a straightforward way to send email messages programmatically from a Node.js application.

Additionally, Nodemailer supports features like sending bulk emails, handling attachments, embedding images, adding custom headers, and utilizing templates for dynamic content generation.

That's enough to understand. If you have further queries please check out the official website of Nodemailer.

Mailtrap

Mailtrap is a popular email testing and debugging tool used by developers and teams during the development and testing stages of their applications. It provides a simulated email inbox environment where you can send test emails without delivering them to real recipients.

If you have further queries on Mailtrap. Please check out the official website of Mailtrap.

I think you have a good understanding of the Nodemailer library and Mailtrap testing tool.

Note: You have to sign up for Mailtrap before diving into setup process

Setup Tutorial

1. Create and set Mailtrap Account

Go to the Mailtrap website and signup.

After successfully signing up, you will look at the screen below :

Click on the email testing and get your secret credentials. Select Nodemailer as the integration option and you will get your secret credentials.

Copy your secret credential code and Now it's oour time to setup Mailtrap with Nodemailer and Express.

Setting up Express server

Setup your folder and install packages as mentioned:

npm i express cors nodemailer dotenv mailgen

Create a .env file in a root directory. This is the place where we store the Mailtrap credentials we get earlier.

EMAIL=<sender's email address>
    USER=<mailtrap user key>
    PASSWORD=<mailtrap password>

The main step is to set up the server file. In our case name of the file is server.js and write code as mentioned below:

  import express from 'express';
    import cors from 'cors';
    import dotenv from 'dotenv';
    import nodemailer from 'nodemailer';
    import Mailgen from 'mailgen';

    dotenv.config()   // configure our app to use env variables
    const app = express();
    /** middlewares */
    app.use(express.json());
    app.use(cors());
    app.disable('x-powered-by'); // less hackers know about our stack

    const port = process.env.PORT || 8080;
    /** HTTP GET Request */
    app.get('/', (req, res) => {
        res.status(201).json("Health Check PASS");
    });


    // create reusable transporter object using the default SMTP transport
    const transporter = nodemailer.createTransport({
        host: 'smtp.mailtrap.io',
        port: 2525,
        auth: {
            user: process.env.USER, // generated mailtrap user
            pass: process.env.PASSWORD, // generated mailtrap password
        }
    });
    // generate email body using Mailgen
    const MailGenerator = new Mailgen({
        theme: "default",
        product : {
            name: "Test Email",
            link: 'https://mailgen.js/'
        }
    })
    // define a route for sending emails
    app.post('/send-email', (req, res) => {
        // get the recipient's email address, name and message from the request body
        const { to, name, message } = req.body;
        // body of the email
        const email = {
            body : {
                name: name,
                intro : message || 'Welcome to Test Mail! We\'re very excited to have you on board.',
                outro: 'Need help, or have questions? Just reply to this email, we\'d love to help.'
            }
        }
        const emailBody = MailGenerator.generate(email);
        // send mail with defined transport object
        const mailOptions = {
            from: process.env.EMAIL,
            to: to,
            subject: 'Test Email',
            html: emailBody
        };
        transporter.sendMail(mailOptions, (error, info) => {
            if (error) {
                console.log(error);
                res.status(500).send('Error sending email');
            } else {
                console.log('Email sent: ' + info.response);
                res.send('Email sent successfully');
            }
        });
    });
    // start the server
    app.listen(port, () => {
        console.log(`Server started on port ${port}`);
    });

Testing our email server

The final process and testing our email server,does it actually working or not? Postman api testing tool is useful for performing such API endpoint testing.

Conclusion

Hope this tutorial helps a lot and feel free to leave a comment. You have to perform Api testing and go to Mailtrap dashboard to ensure the application is working or not.

🌟🌟Thank you 🌟🌟

Redux Toolkit + React: A Perfect Combination for Smooth State Management - A Step-by-Step Tutorial

krishna-Tiwari — Tue, 25 Apr 2023 15:51:01 +0000

Introduction

Hey there 👋, I think you are trying to set up the Redux toolkit with React. Don't worry! it would be a little bit overwhelming but I'm here to help you through it!!

At first, the Redux toolkit is a library that simplifies the process of using Redux with your React application. It provides many tools and a convenient way to set up Redux with your React application, so you don't have to worry on huge boilerplate and repetitive tasks.

My view on Redux

I will not go on, to explain the concepts of Redux itself. [Check Redux Documentation for further information]. I am here to tell you some important points about Redux:

Redux is a global store for states.
Redux may not be compulsory for all projects.
You can avoid props drilling [Passing props too deep] using Redux toolkit (RTK).

Still confused 😖 on Redux-toolkit? Just think 💭 about the states in React. You remembered? , Redux provides states that can be accessed from anywhere.

Don't burn your head. Just remember that:

Redux is the global store of States.

What you have done with React states? Remember values and setValues like that:

//Initialize states
const [value,setValues]= useState(0); //initial Value


//accessing values
console.log(value);

//updating values 
setValues(1);

Have you remembered 😍 this Concept? Exactly like this, treat get as a selector and set as a dispatch.

I think this illustration helps you. For further information check out this Documentation.

Implementation

let's skip this theory apart. And as soon you do, Install devtools for redux.
Devtool plugin links for edge and chrome.

Installation

you need to install two packages:

 npm i @reduxjs/toolkit react-redux

Create a Redux store

src/app/store.js

import { configureStore } from '@reduxjs/toolkit';

export default configureStore({
  reducer: {},
});

configureStore

I want to explain configureStore a little bit. If you want full detailed explanation. Check out Documentation.
Steps for Configure Store.

configureStore has seven several attributes.

reducers
middleware (optional)
devtools (optional)
preloadedState (optional)
enhancers (optional)

I am not going to explain all of this. I have no experience with all of them.
reducers , devtools and preloadedstate are most essential and used frequently.

Redux devtools

Once you successfully installed redux dev tools on your browser. It looks like mentioned above.
Go and click on Redux tab.

It looks like this. If we implemented redux with our project.

Include the Redux store to App.jsx parent

This makes your whole app access the store.

// hidden for simplicity
import { Provider } from 'react-redux';
import store from './app/store';


// hidden for simplicity
  <Provider store={store}>
    <App />
  </Provider>
// hidden for simplicity

Create a redux state slice

The main idea of creating a slice will produce an action used for dispatch and reducer that we will use in configureStore.
features/counter/counterSlice.js

import { createSlice } from '@reduxjs/toolkit'

now let's define initial states for counterSlice and export it with reducers.

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

Note:Example from official redux-toolkit.

In above example we have created three reducers. I mean actions increment , decrement and incrementByAmount.

Now export all these actions (reducers) so that we can use them to change state values.

//all the above goes lies the same

export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

Add slice Reducers to the store.

Next, we need to import the reducer function from the counterSlice and add it to our store.

app/store.js

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
})

Implementing useSelector and useDispatch in React Components

Now we can read data from store using useSelector and dispatch actions using useDispatch.

Let's create a component called Counter.jsx , then render this component to App.jsx.

components/Counter.js

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'

export function Counter() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

Now let's import and render at App.jsx.
App.jsx

import './App.css'
import { Counter } from './components/Counter'

export default function App() {
  return (
    <main>
      <Counter />
    </main>
  )
}

Congratulation 🎉🎉 You have completed the complete redux-toolkit setup with react.

AND FINAL PROJECT LOOKS LIKE THIS.....

Now any time you click the Increment and Decrement buttons:

The corresponding redux action will be dispatched to the store.
The counter slice reducer will see the actions and update it's state.
The <Counter> component will see the new state value from the store and re-render itself with the new data.

Source Code
Feel Free to ask any questions 🙋‍♂️ and leave your comment🗨️🗨️.

Mastering Form Validation with Yup and Hook Form: Password and Confirm Password

krishna-Tiwari — Sun, 16 Apr 2023 10:59:22 +0000

Hello Everyone 👋, Don't worry 😓 about validation. Today iam going put my 100% effort so you can easily understand what actually is:

Form validation📝
Why it is important 🔐
How we perform form validation in react using yup and hook form.

Hurray, Let's start

1. Introduction

📝✅👀 Form validation is the process of checking whether the data entered by the user in the web form is correct ✔️ or not❌.

It ensures that the data entered by the user is correct or not such as valid email address, valid phone format, password and confirm password match ...etc

In react ecosystem, we have several options to validate the form. Thanks god, we have a huge options 💖🤗 but many libraries have huge boilerplate which leads them to difficult for use and performance issues.

Keeping all these points in mind, I always looked for a soltution that is very simple 🤗 and easy to use. Not only that searching 🔎 for great performace.

That's why i always go for react hook form and for schema validation always with yup.

let's see how easily you understand form validation.

Easy peasy

2. setting up a Form with `hook form` and `yup`

First, we need to add the following dependencies in our react app:



npm install react-hook-form @hookform/resolvers yup

let's create a form at App.jsx :



import React from "react";

const App = () => {
  return (
    <form>
      <h2>Lets sign you in. </h2>
      <br />

      <input placeholder="email" type="email" required />
      <br />

      <input
        placeholder="password"
        type="password"
        required
      />
      <br />
 <input
        placeholder="Confirm Password"
        type="password"
        required
      />
      <br />

      <button type="submit">Submit Form</button>
    </form>
  );
};

export default App;

let's import hook form here at app.jsx :



import React from "react";
import { useForm } from "react-hook-form";
//all code below remains same and hidden for simplicity

Let's get these things from useForm :



import React from "react";
import { useForm } from "react-hook-form";


const App = () => {
const { register, handleSubmit, formState: { errors }, reset } = useForm();
return (
//remains same and hidden for simplicity
)}

export default App;

useForm

register: This method allow to registration form elements and used for applying validation.
handleSubmit : This method takes all the form data after Submission.
reset : This methods resets the form.
formState: {errors} : We are using formStateto return errors in easier way.

Now, it's time to import yup in our project and make create form schema using this:



//app.jsx
//hidden for simplicity
import * as yup from "yup";

const formSchema = yup.object().shape({
email:yup.string().email().required("Email is required"),
  password: yup.string()
            .required('Password is required')
            .min(6, 'Password must be at least 6 characters'),
        confirmPassword: yup.string()
            .required('Confirm Password is required')
            .oneOf([yup.ref('password')], 'Passwords must match')
//custom error message inside function like "passwords must match"
// "Confirm password is required"
//password must be at least 6 characters
//Email is required
});

//hidden for simplicity
const App = () =>{
//hidden for simplicity
}

export default App;

Don't be confused here. We create a schema for three form fields email, password and confirmPassword. The message inside the function indicates a custom error message.

we have to import @hookform/resolvers so that we can use formSchema with hook form.



import { yupResolver } from "@hookform/resolvers/yup";
//hidden for simplicity

const App = ()=>{
 const { register, handleSubmit, formState: { errors }, reset } = useForm({
    resolver: yupResolver(formSchema),
  });

return(
//hidden for simplicity
)}

export default App;

Now we have to create a function that executes after form submission.



//hidden for simplicity

const App = ()=>{

const onSubmitHandler = (formData)=>{
console.log(formData);
}

return(
<form onSubmit={handleSubmit(onSumbitHandler)}>
      // Hidden for simplicity
    </form>
)
}

export default App;

The next and most important move is to register our input fields according to our formSchema :



//hidden imported modules for simplicity


const App = () => {
  // Hidden for simplicity
  return (
    <form onSubmit={handleSubmit(onSubmitHandler)}>
      <h2>Lets sign you in.</h2>
      <br />

      <input {...register("email")} placeholder="email" type="email" required />
      <br />

      <input
        {...register("password")}
        placeholder="password"
        type="password"
        required
      />
      <br />

<input
        {...register("confirmPassword")}
        placeholder="Confirm Password"
        type="password"
        required
      />
      <br />

      <button type="submit">Submit Form</button>
    </form>
  );
};

Last show the error message if any validation failed according to our formSchema defined:



const App = () => {
  // Hidden for simplicity
  return (
    <form onSubmit={handleSubmit(onSubmitHandler)}>
      <h2>Lets sign you in.</h2>
      <br />

      <input {...register("email")} placeholder="email" type="email" required />
      <p>{errors.email?.message}</p>
      <br />

      <input
        {...register("password")}
        placeholder="password"
        type="password"
        required
      />
      <p>{errors.password?.message}</p>
      <br />
 <input
        {...register("confirmPassword")}
        placeholder="Confirm Password"
        type="password"
        required
      />
      <p>{errors.confirmPassword?.message}</p>
      <br />

      <button type="submit">Submit Form</button>
    </form>
  );
};

export default App;

Thank God 🙏, It's finished now.
The code 👨‍💻 should look like this:



import React from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

const formSchema = yup.object().shape({
  email: yup.string().email().required("Email is required"),
  password: yup.string()
    .required('Password is required')
    .min(6, 'Password must be at least 6 characters'),
  confirmPassword: yup.string()
    .required('Confirm Password is required')
    .oneOf([yup.ref('password')], 'Passwords must match')
})

const App = () => {
  const { register, handleSubmit, formState: { errors }, reset } = useForm({
    resolver: yupResolver(formSchema),
  });
  const onSubmitHandler = (data) => {
    console.log({ data });
    reset();
  };
  return (
    <form onSubmit={handleSubmit(onSubmitHandler)}>
      <h2>Lets sign you in.</h2>
      <br />

      <input {...register("email")} placeholder="email" type="email" required />
      <p>{errors.email?.message}</p>
      <br />

      <input
        {...register("password")}
        placeholder="password"
        type="password"
        required
      />
      <p>{errors.password?.message}</p>
      <br />

      <input
        {...register("confimPassword")}
        placeholder="Confirm Password"
        type="password"
        required
      />

      <p>{errors.confirmPassword?.message}</p>

      <br />

      <button type="submit">Submit Form</button>
    </form>
  );
};

export default App;

Final touch looks like this 🤗🤗.

Thank you everyone. Please feel free to leave 🤗 a comment. It motivates me too.

How to handle custom error handling in express js

krishna-Tiwari — Mon, 06 Mar 2023 14:50:24 +0000

what is error handler

an error handler is a function that is called when an error occurs in an application. In the context of web development with Node.js and Express, an error handler is a middleware function that is used to handle errors that occur during the request-response cycle.

purpose of error handler

The purpose of an error handler is to ensure that errors are properly handled and that the user is presented with an appropriate error message or response. An error handler can also be used to log error details, debug the application, and prevent the application from crashing.

error handling in express

In Express, error handlers are defined as middleware functions that have an extra parameter for the err object. If an error occurs in any middleware function or route handler, Express will automatically call the error handler with the err object as the first parameter. The error handler can then inspect the err object and take appropriate action based on the error type and context.

Haha,😂😂 I think you got some confusion. Ok 👌 Don't worry i am here to help you right 👉 .
Ok let's dive into the example and procedure

How to write Custom Error Handler Middleware in Express.js using JavaScript🚀

Boom 💥

### Create Custom ErrorHandler middleware

Don't worry here's a code



// ErrorHandler.js
const ErrorHandler = (err, req, res, next) => {
    console.log("Middleware Error Hadnling");
    const errStatus = err.statusCode || 500;
    const errMsg = err.message || 'Something went wrong';
    res.status(errStatus).json({
        success: false,
        status: errStatus,
        message: errMsg,
        stack: process.env.NODE_ENV === 'development' ? err.stack : {}
    })
}

export default ErrorHandler

NOTE: _ err.stack shows the exact which file and where the error comes from. This is only needed in developement mode to debug your code. It becomes dangerous when your project structure is exposed on production. Always use NODE_ENV to development during development.

### Attach Custom Error Handler as The Last Middleware to Use

Note that the error handling middleware function should always be the last middleware function registered in the app, so that it can catch any errors thrown by other middleware functions or route handlers.



const express = require('express);

//initializing server instanse
const app = express();

const ErrorHandler = require(./middlewares/ErrorHandler.j)
//routes and other middlewares

//eroor hanlder middleware at last middleware
app.use(ErrorHandler);

3. How to Call the ErrorHandler then 😕

To call an error handler in a custom Express application, you can define a middleware function that passes an error object to the next middleware function using the next() function.
Here's an example:



// Define an error handling middleware function
function errorHandler(err, req, res, next) {
  res.status(err.statusCode || 500);
  res.json({
    error: {
      message: err.message,
    },
  });
}

use middlewares as



// Register middleware functions in the Express app
const express = require("express");
const app = express();
app.use(myMiddleware);
app.use(errorHandler);

In this example, the myMiddleware function throws a custom error by creating a new instance of the MyCustomError class and passing it to the next middleware function using the next() function.

The errorHandler function is then called because the error was passed to the next middleware function with the next() function. The errorHandler function inspects the error object, sets the HTTP status code and returns a JSON response with an error message.

why should i use custom error handler in web application

Improved error messages: By defining your own error classes and error messages, you can provide more specific and informative error messages to your users, which can help them understand and resolve errors more easily.

Consistent error handling: By using a custom error handler, you can ensure that errors are handled consistently across all parts of your application. This can help to avoid confusion and improve the overall user experience.

Error logging: By defining a custom error handler, you can log error details to a file or a logging service, which can help you to identify and fix errors more quickly.

Prevent application crashes: By properly handling errors in your application, you can prevent your application from crashing or behaving unpredictably. This can help to ensure that your application remains stable and reliable, even in the face of unexpected errors.

DEV Community: krishna-Tiwari

Understanding the Importance of Kafka in High-Volume Data Environments

Introduction

Real-Time Messaging: How Kafka Powers Instant Communication

Real-Time Analytics in Ride-Sharing

Enhancing Food Delivery Services

The Dual Role of Kafka in Real-Time Data Management

Why Use Kafka Alongside Traditional Databases?

Conclusion and Next Steps

Balancing Data Deletion and Historical Accuracy in E-Commerce with MongoDB

Soft Delete

Archiving

Details in order collection

Nodemailer and Mailtrap Integration: The Perfect Solution for Easy Email Testing

Introduction

Nodemailer

Mailtrap

Setup Tutorial

1. Create and set Mailtrap Account

Setting up Express server

Testing our email server

Conclusion

Redux Toolkit + React: A Perfect Combination for Smooth State Management - A Step-by-Step Tutorial

Introduction

My view on Redux

Implementation

Installation

Create a Redux store

configureStore

Redux devtools

Include the Redux store to App.jsx parent

Create a redux state slice

Add slice Reducers to the store.

Implementing useSelector and useDispatch in React Components

Mastering Form Validation with Yup and Hook Form: Password and Confirm Password

1. Introduction

let's see how easily you understand form validation.

Easy peasy

2. setting up a Form with hook form and yup

useForm

How to handle custom error handling in express js

what is error handler

purpose of error handler

error handling in express

How to write Custom Error Handler Middleware in Express.js using JavaScript🚀

3. How to Call the ErrorHandler then 😕

why should i use custom error handler in web application

2. setting up a Form with `hook form` and `yup`