DEV Community: Sarwar Hossain

🧭 How to Exclude a Route from Global Prefix & Versioning in NestJS

Sarwar Hossain — Sun, 29 Jun 2025 13:43:00 +0000

In NestJS apps, it's common to use global route prefixes and versioning like /api/v1. But sometimes you need a public-facing endpoint — such as a payment gateway callback — that must live outside those constraints.

Here’s how to expose routes like /payment/callback without the global /api/v1 prefix.

🔧 Problem
You're using global prefixing and versioning like this:

main.ts:

app.setGlobalPrefix('api');
app.enableVersioning({
  type: VersioningType.URI,
  defaultVersion: '1',
});

✅ Resulting in routes like:

/api/v1/auth/login

/api/v1/user/profile

❌ But now you need /payment/callback to be exposed at:

http://localhost:3000/payment/callback

Instead of:

http://localhost:3000/api/v1/payment/callback

✅ Solution Overview
You need to do two things:

⛔ Exclude the route from the global prefix

⛔ Mark the route as version-neutral

Exclude the Route from Global Prefix Update main.ts:

import { RequestMethod } from '@nestjs/common';

app.setGlobalPrefix('api', {
  exclude: [{ path: 'payment/callback', method: RequestMethod.GET }],
});

This tells NestJS to ignore prefixing for GET /payment/callback

🚫 No leading slash in path (correct: payment/callback)

Mark Route as Version-Neutral Update your controller:

import { Controller, Get, Version, VERSION_NEUTRAL } from '@nestjs/common';

@Controller('payment')
export class PaymentController {
  @Get('callback')
  @Version(VERSION_NEUTRAL)
  callback() {
    return 'Payment callback hit!';
  }
}

✅ VERSION_NEUTRAL tells NestJS: “do not apply any version prefix”

🧪 Final Result
http://localhost:3000/payment/callback ✅

http://localhost:3000/api/v1/payment/callback ❌

All other routes still work normally under /api/v1.

🧵 Conclusion
NestJS makes it easy to maintain clean API versioning — but when you need an exception like a public payment callback, it only takes

two steps:

Exclude the path in setGlobalPrefix()

Add @version(VERSION_NEUTRAL) to the controller

Solving NestJS Dependency Injection Errors – A Real-World Example

Sarwar Hossain — Thu, 29 May 2025 12:20:41 +0000

Recently, I ran into this error while developing a module. Here's how I diagnosed and solved it step by step.
WHen the Application grow much module Dependency Injection (DI) errors can become frustrating—especially when modules or services are not wired correctly.

🚨 The Error

embed Nest can't resolve dependencies of the UserOnboardingService (?, ?, ?).
Please make sure that the argument at index [X] is available in the UserOnboardingModule context.

🔍 Root Cause

A service depends on another provider or repository that hasn’t been properly registered.
A required module hasn’t been imported.
There is a circular dependency between modules.
You forgot to use @InjectRepository for custom repositories.
You forgot to export a service from a module when used elsewhere.

✅ My Scenario

`
src/
│
├── user/
│ ├── user.module.ts
│ └── repositories/
│ ├── user.repository.ts
│ └── user-preference.repository.ts
│
├── auth/
│ ├── auth.module.ts
│ └── auth.service.ts
│
├── user-onboarding/
├── user-onboarding.module.ts
├── user-onboarding.service.ts
└── user-onboarding.controller.ts

🧠 The Fix: Step by Step

Import Needed Modules in UserOnboardingModule

// user-onboarding.module.ts
import { Module, forwardRef } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { UserRepository } from '../user/repositories/user.repository';
import { UserPreferenceRepository } from '../user/repositories/user-preference.repository';
import { UserOnboardingController } from './user-onboarding.controller';
import { UserOnboardingService } from './user-onboarding.service';
import { AuthModule } from '../auth/auth.module';
import { UserModule } from '../user/user.module';

@Module({
  imports: [
    TypeOrmModule.forFeature([
      UserRepository,
      UserPreferenceRepository,
    ]),
    forwardRef(() => AuthModule),
    forwardRef(() => UserModule),
  ],
  controllers: [UserOnboardingController],
  providers: [UserOnboardingService],
  exports: [UserOnboardingService],
})
export class UserOnboardingModule {}

2. Inject Dependencies Correctly in the Service

// user-onboarding.service.ts
import { Injectable, Inject, forwardRef } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { UserRepository } from '../user/repositories/user.repository';
import { UserPreferenceRepository } from '../user/repositories/user-preference.repository';
import { AuthService } from '../auth/auth.service';
import { UserService } from '../user/user.service';

@Injectable()
export class UserOnboardingService {
  constructor(
    @InjectRepository(UserRepository)
    private readonly userRepository: UserRepository,

    @InjectRepository(UserPreferenceRepository)
    private readonly userPreferenceRepository: UserPreferenceRepository,

    @Inject(forwardRef(() => AuthService))
    private readonly authService: AuthService,

    @Inject(forwardRef(() => UserService))
    private readonly userService: UserService,
  ) {}

  // ... business logic
}

Export Services in the Providing Modules in your auth.module.ts and user.module.ts

🧩 What If You Have Circular Dependencies?

Use forwardRef() in both modules and service:

// In auth.module.ts and user.module.ts
imports: [forwardRef(() => UserOnboardingModule)],

// in your service file 
@Inject(forwardRef(() => SomeService)) private someService: SomeService

✅ Conclusion

Dependency injection in NestJS is powerful—but it requires precision. Always verify:

Module imports

Repository injections

Circular dependency handling

This small fix saved me hours of frustration, and I hope it helps you too!

Fixing Getter/Setter Issues in TypeORM Entity(The Clean Way with transformer)

Sarwar Hossain — Tue, 27 May 2025 17:19:00 +0000

👀 Overview:

Have you tried to implement getter/setter in your entity of TypeORM?
But Not found exact though use of AI.

🐞 The Problem :

I try to map a private _userType to a public userType getter/setter.
TypeORM still reads/writes the raw _userType field without calling get/set.
The conversion code inside get userType() / set userType() is never applied

❌ Have you tried like below ?
And getting the
"Error: Missing column value in entity for: user_type
"
❌

@Entity()
export class User {
  @Column({ name: 'user_type', type: 'int' })
  private _userType: number;

  // These will NOT be used by TypeORM:
  get userType(): string {
    return this._userType === 1 ? 'ADMIN' : 'USER';
  }
  set userType(val: string) {
    this._userType = val === 'ADMIN' ? 1 : 0;
  }
}

✅ The Fix: Use transformer

Works perfectly — no more errors, and clean transformations. Instead of getters/setters, use TypeORM’s built-in transformer option on the column

@Entity()
export class User {
  @Column({
    name: 'user_type',
    type: 'int',
    transformer: {
     to(role: string): number {
       return role === 'ADMIN' ? 1 : 0;
     }
     from(value: number): string {
       return value === 1 ? 'ADMIN' : 'USER';
     }
   };
  })
}

View & Download 🧮 Excel File in React from a URL

Sarwar Hossain — Sun, 09 Feb 2025 06:58:33 +0000

Displaying Excel data in a React application dynamically from a URL is a powerful feature

Prerequisites:

Before we begin, make sure you have the following installed:

React (Latest version)
XLSX.js (for parsing Excel files)

Create a new component ExcelView.tsx to fetch and parse the Excel file.


import * as XLSX from 'xlsx';
const ExcelView = () => {
  const excelFile =
    'https://res.cloudinary.com/dt7w8y7xj/image/upload/v1695779773/text_wzqj5r.xlsx';

  const parseExcelFile = () => {
    // Fetch the Excel file from the imported path
    fetch(excelFile)
      .then((response) => response.arrayBuffer()) // Read file as ArrayBuffer
      .then((fileBuffer) => {
        const workbook = XLSX.read(fileBuffer, { type: 'array' });
        const sheetName = workbook.SheetNames[0]; // Get the first sheet
        const sheet = workbook.Sheets[sheetName];
        const data = XLSX.utils.sheet_to_json(sheet); // Convert the sheet to JSON
        return data;
      })
      .catch((error) => console.error('Error parsing Excel file:', error));
  };

  // Parse the file immediately when the component is rendered

  return (
    <div className=" p-2 md:p-6 bg-gray-100 min-h-screen">
      <h1 className="text-3xl font-bold text-gray-700 text-center mb-8">
        View Excel File
      </h1>

      {parseExcelFile().length > 0 ? (
        <div className="overflow-x-auto">
          <table className="min-w-full bg-white border border-gray-300 rounded-lg shadow-md">
            <thead>
              <tr className="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
                {Object.keys(parseExcelFile()[0]).map((key) => (
                  <th key={key} className="py-3 px-6 text-left">
                    {key}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody className="text-gray-700 text-sm">
              {parseExcelFile().map((row, index) => (
                <tr
                  key={index}
                  className={`border-b border-gray-300 ${
                    index % 2 === 0 ? 'bg-gray-50' : 'bg-white'
                  }`}
                >
                  {Object.values(row).map((cell, i) => (
                    <td key={i} className="py-3 px-6 text-left">
                      {cell}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : (
        <p className="text-gray-500 text-center mt-8">Loading Excel data...</p>
      )}
    </div>
  );
};

export default ExcelView;

Download an Excel File in React with Proper MIME Types


const handleDownload = async (url: string, filename: string) => {
  try {
    if (!url) {
      message.error('Download URL not found');
      return;
    }

    const response = await fetch(url, {
      headers: {
        Accept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/pdf, video/mp4',
      },
    });

    if (!response.ok) {
      throw new Error('Download failed');
    }

    const contentType = response.headers.get('content-type');
    const blob = await response.blob();

    // Set the correct MIME type for Excel files
    const blobOptions = {
      type:
        contentType ||
        (filename.endsWith('.xlsx')
          ? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
          : blob.type),
    };
    const downloadUrl = window.URL.createObjectURL(new Blob([blob], blobOptions));

    const link = document.createElement('a');
    link.href = downloadUrl;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

    // Clean up the URL object
    window.URL.revokeObjectURL(downloadUrl);
    message.success('Download started successfully');
  } catch (error) {
    console.error('Error downloading file:', error);
    message.error('Failed to download file. Please try again.');
  }
};

Now use it in your component


<button onClick={() => handleDownload('https://example.com/sample.xlsx', 'sample.xlsx')}>
  Download Excel File
</button>

Conclusion:

This approach allows you to dynamically load and display Excel data in a React app using XLSX.js and downloaded correctly in a React application

⛔MongoDB Transactions Error: "Transaction numbers are only allowed on a replica set member or mongos

Sarwar Hossain — Mon, 16 Dec 2024 06:45:35 +0000

If you're using Transaction rollback with Mongoose in a Node.js application and encounter the error "Transaction numbers are only allowed on a replica set member or mongos".

Reasons for the Error 🤔:

Local MongoDB is not a Replica Set.
Standalone MongoDB Instance: By default, MongoDB in a standalone configuration does not support multi-document transactions.
Missing Transaction Support: Transactions are only available in replica set members or in clusters managed by mongos (sharded MongoDB).

🖥️ Solution Steps (On Windows):

✅ stop your mongodb service and edit the C:\Program Files\MongoDB\Server{version}\bin\mongod.cfg file

# ⏹️ stop the service
net stop MongoDB

# 📝 edit below file
C:\Program Files\MongoDB\Server\{version}\bin\mongod.cfg

# set replica 
replication:
  replSetName: "rs0" # any name can set

#  🔄 start the service

net start MongoDB

# 🔧 open mongo SHell  & init the the rs

rs.initiate()

# check the status
rs.status()

🐧Solution Steps (On Linux/Ubuntu server):

#⏹️  mongodb service stop
sudo service mongod stop

#🔧 access the mongod.config
 sudo chmod -R 777 /etc/mongod.conf

#edit the cofigurationh
 nano /etc/mongod.conf

 #add now

# 🔧 Mongo db replica for Mongoose Transaction rollback.

replication:
  replSetName: "rs0"

 #  🔄 start the service
 sudo service mongod start


# now go to mongo shell
mongosh

# now update the 
rs.initiate()

# verify  status

 rs.status()

 # start the mongod

 sudo service mongod start

🎯 Conclusion:

By following these steps, you'll be able to fix the "Transaction numbers are only allowed on a replica set member or mongos" error and leverage MongoDB transactions effectively in your Node.js application on Windows or Linux.

MongooseServerSelectionError: 🚨Server selection timed out after 30000 ms

Sarwar Hossain — Thu, 14 Nov 2024 09:31:44 +0000

If you’ve encountered this frustrating timeout error while working with MongoDB, you’re not alone! The "Server selection timed out after 30000 ms" message indicates that MongoDB couldn’t connect within the expected time.

Solution-1 : ( if you use mongoose)>
you can update your mongoDB connection url with replicaSet=rs0 query.

Solution-2 : (if you use docker-compose service)>
_you can update your mongo service with the "mongod replSet rs0". you can also include entrypoint in your service.

Solution-3 : (if you use SSH shell)>
just use the bellow command to solve the issue by set replca.

 docker exec -it your_mongo_service mongosh

then set the bellow commands

rs.initiate()

rs.status()

Create a Share Button for Social Media Links in React (Without Any Package) 📤

Sarwar Hossain — Sat, 05 Oct 2024 06:13:14 +0000

Sharing your content on social media directly from your React app to WhatsApp, Messenger, Twitter, and LinkedIn, without using any third-party packages. 📱💻

🌟 Core Idea

Opens a new tab for each social media platform with a pre-filled message containing text and a URL.
Uses native Clipboard API to allow users to copy the link.
Avoids the complexity of installing additional npm packages for social sharing.
Re usable react component.

💻 Let's Dive into the Code:


import React, { useState } from "react";
import {
  FaWhatsapp,
  FaFacebookMessenger,
  FaTwitter,
  FaLinkedin,
  FaRegClipboard,
  FaClipboardCheck,
  FaShare,
} from "react-icons/fa";

const ShareButton = ({ text, url }) => {
  const [shareNow, setShareNow] = useState(false);
  const message = encodeURIComponent(`${text} ${url}`);

  // Social media share handlers
  const handleWhatsAppShare = () => {
    window.open(`https://wa.me/?text=${message}`, "_blank");
  };

  const handleMessengerShare = () => {
    window.open(
      `fb-messenger://share/?link=${encodeURIComponent(url)}&app_id=YOUR_APP_ID`,
      "_blank"
    );
  };

  const handleTwitterShare = () => {
    window.open(`https://twitter.com/intent/tweet?text=${message}`, "_blank");
  };

  const handleLinkedInShare = () => {
    window.open(
      `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(
        url
      )}`,
      "_blank"
    );
  };

  // Clipboard functionality
  const [copied, setCopied] = useState(false);
  const handleCopy = () => {
    navigator.clipboard.writeText(url).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    });
  };

  return (
    <div>
      {/* Main Share Button */}
      <button
        className="px-3 py-1 text-white rounded-md flex gap-1 bg-blue-400 font-semibold mx-auto"
        onClick={() => setShareNow(!shareNow)}
      >
        <span> Share {!shareNow && <span> Now </span>} </span>
        <FaShare size={24} />
      </button>

      {/* Share Options Section */}
      {shareNow && (
        <section className="my-2">
          <div className="flex flex-col items-center justify-center bg-gray-100 py-2 ">
            <h1 className="text-2xl font-bold mb-4">Share this content</h1>
            <div className="flex space-x-4 py-3">
              <button
                onClick={handleWhatsAppShare}
                className="flex items-center justify-center p-2 bg-green-500 text-white rounded-full hover:bg-green-600"
              >
                <FaWhatsapp size={24} />
              </button>
              <button
                onClick={handleMessengerShare}
                className="flex items-center justify-center p-2 bg-blue-500 text-white rounded-full hover:bg-blue-600"
              >
                <FaFacebookMessenger size={24} />
              </button>
              <button
                onClick={handleTwitterShare}
                className="flex items-center justify-center p-2 bg-blue-400 text-white rounded-full hover:bg-blue-500"
              >
                <FaTwitter size={24} />
              </button>
              <button
                onClick={handleLinkedInShare}
                className="flex items-center justify-center p-2 bg-blue-700 text-white rounded-full hover:bg-blue-800"
              >
                <FaLinkedin size={24} />
              </button>
            </div>
          </div>

          {/* Copy URL Section */}
          <div className="flex flex-col items-center justify-center bg-gray-100 mb-2 py-2">
            <h1 className="text-xl font-bold mb-4">Copy this URL</h1>
            <div className="flex items-center justify-center">
              <button
                onClick={handleCopy}
                className={`flex items-center justify-center p-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200 ${
                  copied ? "bg-green-600 hover:bg-green-700" : ""
                }`}
              >
                {copied ? (
                  <FaClipboardCheck size={24} />
                ) : (
                  <FaRegClipboard size={16} />
                )}
                <span className="ml-2">{copied ? "Copied!" : "Copy URL"}</span>
              </button>
            </div>
          </div>
        </section>
      )}
    </div>
  );
};

export default ShareButton;

Firebase push Notification Error: ⚠️ Auth error from APNS or Web Push Service

Sarwar Hossain — Wed, 28 Aug 2024 10:32:38 +0000

When Push Notification from Nodejs Express server by firebase -admin.

Your Error::

(node:internal/process/task_queues:95:5) {
  errorInfo: {
    code: 'messaging/third-party-auth-error',
    message: 'Auth error from APNS or Web Push Service'
  },
  codePrefix: 'messaging'
}

Old Code::

import * as admin from 'firebase-admin';
// import path from 'path';
import ApiError from '../../../errors/ApiError';
import httpStatus from 'http-status';
import config from '../../../config';

admin.initializeApp({
  credential: admin.credential.cert(
    // path.join(
    //   __dirname,
    //   './jornee-66109-firebase-adminsdk-tf0wd-f34c47323d.json',
    // ),
    firebaseConfig as any,
  ),
});

type NotificationPayload = {
  title: string;
  body: string;
  data?: { [key: string]: string };
};

export const sendNotification = async (
  fcmToken: string,
  payload: NotificationPayload,
): Promise<any> => {
  // console.log(fcmToken, 'fcmTokenfcmToken');
  // console.log(payload, 'payload');
  try {
    const response = await admin.messaging().send({
      token: fcmToken,
      notification: {
        title: payload.title,
        body: payload.body,
      },
      // data: payload?.data,
    });
    // console.log('Successfully sent message:', response);
    return response;
  } catch (error: any) {
    console.error('Error sending message:', error);
    if (error?.code === 'messaging/third-party-auth-error') {
      // console.error('Skipping iOS token due to auth error:', error);
      return null;
    } else {
      console.error('Error sending message:', error);
      throw new ApiError(
        httpStatus.NOT_IMPLEMENTED,
        'Failed to send notification',
      );
    }
  }
};

Solve-1 :

Update your code for multiple users fcmToken.

Get a better response without error::

Solve-2 :

check your Firebase app settings and create Android and iOS apps.
enable cloud messaging
to provide correct fcmToken
generate fcmToken from the production iOs app.

Error: P1003 : Prisma Migrate could not create the shadow database.

Sarwar Hossain — Tue, 30 Jul 2024 17:17:02 +0000

Fix your Prisma Migration error:

1. Update your .env config .

DATABASE_URL="postgresql://postgres:asdf4321@127.0.0.1:5432/postgres"
SHADOW_DATABASE_URL="postgresql://postgres:asdf4321@127.0.0.1:5432/postgres"

2. Update schema.prisma file.

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider          = "postgresql"
  url               = env("DATABASE_URL")
  shadowDatabaseUrl = env("SHADOW_DATABASE_URL")
}

That's solved now.

3. Now migrate your Database.

 npx prisma migrate dev

🔍 Unleashing the Potential of useBlocker Hook in React Router 🚀

Sarwar Hossain — Mon, 13 May 2024 13:30:39 +0000

In the dynamic landscape of React development, ensuring smooth navigation and data integrity is key. Enter the useBlocker hook in React Router, a powerful tool that enhances user experience by preventing accidental data loss during navigation transitions. 💡

💬 Description:
The useBlocker hook in React Router intercepts navigation attempts while there are unsaved changes on the page, displaying a confirmation dialog to prevent accidental data loss. This feature not only enhances the user experience but also instills confidence in your application's reliability. 🛡️

import { useBlocker } from 'react-router';

const CreatePostPage = () => {
  const [isBlocking, setIsBlocking] = useState(false);

  // Prompt user before leaving the page if there are unsaved changes
  useBlocker(
    (tx) => {
      if (isBlocking) {
        tx.prompt('You have unsaved changes. Are you sure you want to leave?');
      }
    },
    [isBlocking]
  );

  const handleInputChange = (event) => {
    // Detect changes and set isBlocking accordingly
    setIsBlocking(event.target.value.length > 0);
  };

  const handleSaveDraft = () => {
    // Logic to save draft
    console.log('Draft saved!');
    setIsBlocking(false); // Reset isBlocking after saving
  };

  return (
    <div>
      <h1>Create Post</h1>
      <input type="text" onChange={handleInputChange} />
      <button onClick={handleSaveDraft}>Save Draft</button>
    </div>
  );
};

export default CreatePostPage;

🔍 Why it Matters:
While the useBlocker hook is deprecated in recent versions of React Router, fear not! You can achieve similar functionality using vanilla JavaScript's window object. Simply utilize the beforeunload event listener to prompt users before leaving the page with unsaved changes. 💼

By leveraging React Router's useBlocker hook or JavaScript's window object, you can create seamless and intuitive web experiences that prioritize user satisfaction and data integrity. 🌟

ReactRouter #FrontendDevelopment #UserExperience #CodeSnippet #ReactHooks #WebDevelopment 🚀

Pass/navigate full data to any react-router

Sarwar Hossain — Tue, 23 Apr 2024 08:16:21 +0000

In React, passing data between components using React Router is a common practice, especially when navigating from one page to another. Let's break down the process of passing and receiving data using React Router with some sample code:

Setting Up Navigation Link: Use the Link component from React Router to create a link to the target page and pass the data through the state object.

import { Link } from "react-router-dom";

<Link
  to={{
    pathname: `/seller/product-management/edit`,
    state: product,
  }}
>
  Details
</Link>

2.Accessing State Data:
Use the useLocation hook to access the state object containing the passed data.

import { useLocation } from "react-router-dom";

const ProductDetails = () => {
  const { state } = useLocation();

  // Accessing the received data
  const { productName, price, img, status } = state;

  return (
    <div>
      <h2>Product Details</h2>
      <img src={img} alt={productName} />
      <p>Name: {productName}</p>
      <p>Price: {price}</p>
      <p>Status: {status}</p>
    </div>
  );
};

export default ProductDetails;

Navigation Blocking in Navigation Blocking in React in Other Locations: Preventing Unsaved Changes

Sarwar Hossain — Sat, 20 Apr 2024 19:46:11 +0000

Implementing Navigation Blocking with React Router:

React Router provides the useBlocker hook, which allows us to block navigation programmatically.
We can use it to conditionally block navigation based on specific criteria, such as unsaved form data or user authentication status.

Example: Blocking Navigation with Unsaved Changes:

import React, { useState, useEffect } from 'react';
import { useBlocker } from 'react-router-dom';

const FormComponent = () => {
  const [formData, setFormData] = useState({});
  const [draftSaved, setDraftSaved] = useState(false);

  const blocker = useBlocker(({ currentLocation, nextLocation }) =>
    draftSaved && currentLocation.pathname !== nextLocation.pathname
  );



return (<>
 {blocker.state === "blocked" ? (
          <div>
            <p>Are you sure you want to leave?</p>
            <button onClick={() => blocker.proceed()}>Proceed</button>
            <br />
            <button onClick={() => blocker.reset()}>Cancel</button>
          </div>
        ): null}
<>)
};