Forem: Mohammad Ismail Mirza

The Silent Killer: How One Django Signal Can Crashed your AI Support Platform ?

Mohammad Ismail Mirza — Mon, 01 Dec 2025 11:42:12 +0000

You've been coding for hours.
The feature is elegant.
Tests pass.
Code review looks great.
You hit merge.

Forty-five minutes later, your Slack lights up. Not a polite ping—an explosion.

🚨 Red alerts.
😤 Customer complaints.
😰 Your CEO asking, "What's happening?"

Your AI support agents—the ones customers love—are frozen.

Conversations stuck.
ChromaDB timing out.
Database maxed out.

Everything you built is collapsing in real time.

By the end, you'll trace it to three innocent lines of code you wrote on a quiet Tuesday morning.

TL;DR — The One-Line Disaster

Calling .save() inside a Django signal caused:

Recursive writes
Triggered related signals
Overwhelmed the database
Blocked Celery workers
Full system meltdown under load

The fix:

Signals should never modify models. Use them only to queue async work after commit.

The Setup: Everything Looked Perfect

We built a clean pipeline:

Users send support questions
LangGraph agents (OpenAI-powered) respond
Messages get stored
Embeddings added to ChromaDB for semantic search

Our models were straightforward:

class SupportConversation(models.Model):
    customer_id = models.CharField(max_length=100)
    agent_name = models.CharField(max_length=50)
    status = models.CharField(max_length=20, default='active')
    updated_at = models.DateTimeField(auto_now=True)

class ConversationMessage(models.Model):
    conversation = models.ForeignKey(SupportConversation, on_delete=models.CASCADE)
    role = models.CharField(max_length=20)  # 'user' or 'assistant'
    content = models.TextField()
    embedding_id = models.CharField(max_length=255, null=True)

Then one Tuesday morning, a developer added this:

@receiver(post_save, sender=ConversationMessage)
def handle_message_saved(sender, instance, created, **kwargs):
    if created and instance.role == 'assistant':
        generate_embeddings_task.delay(instance.id)
        instance.conversation.save()  # ← The ticking time bomb

It seemed harmless.
Tests passed.
Staging worked.
10 users? No problem.

And then Friday happened.

The Meltdown: How It All Fell Apart

11:35 AM — Marketing launches a flash promo.

"Try our AI support agents—free for 24 hours."

Within 60 seconds, 500 fresh chat sessions flood in.

What happens next:

A user sends a message →
AI responds →
ConversationMessage saves →
Signal fires →
Celery task queued →
conversation.save() triggers →
Another signal fires →
Database write →
Repeat… and repeat… and repeat.

Each conversation generates multiple unexpected writes.

The chain reaction unfolds:

11:36:00 — DB connection pool: 48/50 in use
11:36:10 — Celery workers blocking, waiting for DB
11:36:20 — ChromaDB calls backing up behind DB queue
11:36:30 — 5,000 tasks in queue
11:36:50 — 25,000 tasks queued
11:37:00 — Everything is stuck

Messages stop saving.
Requests time out.
ChromaDB errors.

And then Slack explodes:

@oncall: "AI support is frozen."

@product: "Customers can't get replies."

@infra: "Why are Celery workers dead?"

@devops: "DB CPU at 100%, restarting now..."

The platform collapses.

Recovery time: 4+ hours.

The root cause? Nested signals triggering recursive .save() calls.

Root Cause: The Recursive Death Spiral

ConversationMessage.save()
    ↓
post_save signal fires
    ↓
instance.conversation.save()  ← nested save
    ↓
post_save (SupportConversation) fires
    ↓
Model writes again
    ↓
Triggers more signals
    ↓
More writes under load = exponential explosion

Under high concurrency, this becomes an accidental DDoS against your own database.

The Four Fixes That Saved Us

1. Always Guard with `created`

Ensure the handler fires only once:

from django.db.models.signals import post_save
from django.dispatch import receiver
from django.db import transaction

@receiver(post_save, sender=ConversationMessage)
def queue_message_processing(sender, instance, created, **kwargs):
    # ✅ Only run on NEW messages
    if not created:
        return

    if instance.role == 'assistant':
        # ✅ Queue AFTER transaction commits (no nested saves)
        transaction.on_commit(
            lambda: generate_embeddings_task.delay(instance.id)
        )

Why it works:

No repeated firing
No nested writes
The async task runs only after the DB transaction commits
Clean separation of concerns

2. Let Celery Update Models Safely

Use update_fields to skip signal handlers:

from celery import shared_task

@shared_task
def generate_embeddings_task(message_id):
    message = ConversationMessage.objects.get(id=message_id)

    # Call OpenAI API
    embedding = openai.embeddings.create(
        model="text-embedding-3-small",
        input=message.content
    ).data[0].embedding

    # Store in ChromaDB
    chroma_client.add(
        ids=[f"msg_{message_id}"],
        embeddings=[embedding]
    )

    # ✅ CRITICAL: Use update_fields to skip the signal handler
    ConversationMessage.objects.filter(id=message_id).update(
        embedding_id=f"msg_{message_id}"
    )

Update your handler to recognize this:

@receiver(post_save, sender=ConversationMessage)
def queue_message_processing(sender, instance, created, update_fields=None, **kwargs):
    if not created:
        # ✅ If only embedding_id changed, skip entirely
        if update_fields and update_fields == {'embedding_id'}:
            return
        return

    # ... rest of handler

Why it works:

Celery can safely modify models
Queryset updates with update_fields bypass post_save signals
No recursive loops even under heavy load

3. Use QuerySet Updates for Parent Stats

❌ DON'T do this:

conversation.message_count = 5
conversation.save()  # ❌ triggers another signal!

✅ DO this instead:

SupportConversation.objects.filter(id=conversation.id).update(
    message_count=conversation.conversationmessage_set.count()
)

Why:

QuerySet operations bypass signals entirely
No cascade
Atomic database operation
10x faster

4. Batch Updates Instead of Per-Message

Instead of firing stats updates on every message, batch them:

from celery import shared_task
from django.db.models import Count

@shared_task
def batch_update_conversation_stats():
    """
    Run every 30 seconds via Celery Beat.
    Update all active conversations at once.
    """
    conversations = SupportConversation.objects.filter(
        status='active'
    ).annotate(msg_count=Count('conversationmessage'))

    for conv in conversations:
        SupportConversation.objects.filter(id=conv.id).update(
            message_count=conv.msg_count
        )

# In celery.py, schedule with:
# 'batch-update-stats': {
#     'task': 'myapp.tasks.batch_update_conversation_stats',
#     'schedule': crontab(minute='*/1'),  # Every minute
# }

The math:

500 concurrent messages = 500 individual updates (❌ cascades)
500 concurrent messages = 1 batch update every 30 seconds (✅ efficient)

Testing for Signal Cascades (Critical!)

You must test this:

from django.test import TestCase
from django.test.utils import CaptureQueriesContext
from django.db import connection

class ConversationSignalTests(TestCase):

    def test_message_creation_is_silent(self):
        """
        Verify: Creating ONE message = ONE database write.
        If this fails, you have a signal loop.
        """
        conv = SupportConversation.objects.create(customer_id="test_user")

        with CaptureQueriesContext(connection) as ctx:
            ConversationMessage.objects.create(
                conversation=conv,
                role='user',
                content="Help!",
                tokens_used=1,
                response_time_ms=10
            )

        writes = [q for q in ctx.captured_queries 
                  if q['sql'].startswith(('INSERT', 'UPDATE'))]

        self.assertEqual(len(writes), 1, 
            f"Expected 1 write, got {len(writes)}. Signal loop detected!")

    def test_load_no_cascade(self):
        """
        Simulate production load: 100 concurrent messages.
        Verify no cascade explosion.
        """
        convs = [
            SupportConversation.objects.create(customer_id=f"user_{i}")
            for i in range(100)
        ]

        with CaptureQueriesContext(connection) as ctx:
            for conv in convs:
                ConversationMessage.objects.create(
                    conversation=conv,
                    role='user',
                    content="Question",
                    tokens_used=3,
                    response_time_ms=15
                )

        writes = [q for q in ctx.captured_queries 
                  if q['sql'].startswith(('INSERT', 'UPDATE'))]

        self.assertLess(len(writes), 150,
            f"Too many writes: {len(writes)}. Cascade detected!")

Best Practices Checklist

✔ Always Do:

✅ Use the created flag guard
✅ Use transaction.on_commit() for async work
✅ Keep signals pure—never modify models
✅ Use queryset.update(), never .save() in handlers
✅ Use update_fields when Celery updates models
✅ Batch expensive tasks (stats, aggregations)
✅ Stress test with concurrent load
✅ Monitor signal depth in production

✘ Never Do:

❌ Call .save() inside a signal handler
❌ Trigger parent model saves from child signals
❌ Assume "it works locally" means "it scales"
❌ Trust signals under load without testing
❌ Create circular signal dependencies

Final Lesson: The Signal Rule

Django signals are powerful.
They're also silent footguns.

One innocent .save() buried in a signal handler can:

💥 Hammer your database
🧊 Freeze your async workers
📉 Cascade into platform-wide downtime
😞 Ruin your Friday

The rule is simple:

Signals should queue async work—not change database state.
Celery should handle all updates.

Follow this, and you'll never meet the monster we met at 11:36 AM on a Friday.

Signal fires
  ↓
Queue Celery task
  ↓
Commit transaction
  ↓
Celery task runs safely
  ↓
Updates database (signal-free)
  ↓
✅ No cascade

Resources

Last updated: December 1, 2025

Have your own signal horror story? Drop it in the comments—you're not alone. 🚀

Top 10 ReactJs Books to Enhance Your Frontend Skills [2024]

Mohammad Ismail Mirza — Thu, 23 May 2024 19:10:36 +0000

1. Introduction

React JS is now one of the most liked JavaScript tools for making user parts on the web. If you want to get better at React, getting the best help is key. There are lots of books that can give deep know-how and help you get better at using React to its full. In this piece, we made a list of the top 10 books that will lift your web skills. No matter if you are new or good at this, these books can help you to get strong at React and stay up in the tech world that keeps on going.

2. Understanding the importance of continuous learning in web development

In the fast-changing world of tech, making your web-making skills better is very needed. As you get better at using React, it's key to know that non-stop learning is the main thing to get new ideas and keep up with others. Use web help, join short learning events, and talk with other code creators to keep up with the newest styles. In the next part, we'll look at why knowing the newest moves in the field is key and how this can make you much better at making things with React. Keep going through this to find out how learning all the time can lift your job in making websites to new high points.

3. Exploring the top React books for mastering the framework

Learn more about React and take a quick look at the top books to read to expand your knowledge. Here is a list of resources to continue learning, giving more detailed information, cases, and recommendations on how to make the most of using React. From fundamental to the most advanced web development issues, you will find all the boost you need to tackle some of the most advanced web development issues in these books. Are you looking to expand your understanding and get more proficient with React? Following is a list of ten most recommended books that will guide you towards gaining new heights in web development. As for recommendation, stick around and be ready to improve your knowledge on React!

3.1. Learning React: Modern Patterns for Developing React Apps by Alex Banks and Eve Porcello

If you want to learn how to build efficient React applications, this is your book. Ideal for web developers and software engineers who understand how JavaScript, CSS, and HTML work in the browser, this updated edition provides best practices and patterns for writing modern React code. No prior knowledge of React or functional JavaScript is necessary. With their learning road map, authors Alex Banks and Eve Porcello show you how to create UIs that can deftly display changes without page reloads on large-scale, data-driven websites. You'll also discover how to work with functional programming and the latest ECMAScript features. Once you learn how to build React components with this hands-on guide, you'll understand just how useful React can be in your organization. Download this book for free here.

3.2. Learn React with TypeScript: 2nd Edition by Carl Rippon (2023)

If you are a developer who is already familiar with either TypeScript or React and wants to understand how they can be used together effectively then this book is for you. Getting a handle on the challenges of modern React development is not easy. In this course, Carl Rippon helps by going beyond your first React app and by examining such issues as how to design useful components (and avoid overloading them), how to state manage with TypeScript without losing clear coupling between bits of data, hooks versus classes and what goes where in a real-world solution stack. Download this book for free or read online here.

3.3. Mastering React by Adam Horton and Ryan Vice (2016)

Master the art of building modern web applications using React. Write a complete application in React using an array of supporting libraries, both specifically React-related and general purpose. Understand what makes React stand apart from the vast majority of JS frameworks available through detailed explanations and concise examples. Explore the React ecosystem and how to integrate React with other modern web technologies. This book is ideal for web developers possessing strong core JavaScript fundamentals who are also interested in learning what React brings to the architectural table. Download this book for free here.

3.4. Mastering Reactive JavaScript by Erich de Souza Oliveira (2017)

Expand your boundaries by creating applications empowered with real-time data using ReactJS without compromising performance. Handle an infinite stream of incoming data using ReactJS without going crazy. Explore important ReactJS operators that can help you improve your code readability. Get acquainted with the different techniques and operators used to handle data traffic, which occurs when you receive data faster than you can process. If you're a web developer with some basic JavaScript programming knowledge who wants to implement the reactive programming paradigm with JavaScript, then this book is for you. Download this book for free here.

3.5. React Cookbook By David Griffiths

React helps you create and work on an app in just a few minutes. But learning how to put all the pieces together is hard. How do you validate a form? Or implement a complex multistep user action without writing messy code? How do you test your code? Make it reusable? Wire it to a backend? Keep it easy to understand? The React Cookbook delivers answers fast. Many books teach you how to get started, understand the framework, or use a component library with React, but very few provide examples to help you solve particular problems. This easy-to-use cookbook includes the example code developers need to unravel the most common problems when using React, categorized by topic area and problem. Download this book for free here.

3.6. Mastering React Native: Beginners Guide

Mastering React Native helps the reader master the React Native framework for faster and more robust mobile app development. React Native is an open-source JavaScript framework that allows you to create applications for many platforms, including iOS, Android, and the web, all with the same code base. It is built on the React framework, and it provides all of React's power to mobile app development. React Native was a natural continuation of React. It is a mobile framework that includes JavaScript to create near-native apps. JSX, a hybrid of JavaScript and XML-like markup, is used to make React Native applications. The React Native "bridge" then calls the native rendering APIs in Objective-C (for iOS) or Java (for Android) behind the scenes. Download this book for free here.

3.7. Mastering React Test-Driven Development: 2nd Edition

Learn test-driven and behavior-driven development techniques that will give you greater confidence when building React applications. Explore the TDD process, how it works, and why it will help you write maintainable React apps. Develop a component testing framework from scratch, which will help you understand the mechanics of good unit testing. Reduce complexity by using unit tests and end-to-end acceptance tests to drive the design of your apps. Test-driven development (TDD) is a programming workflow that helps you build your apps by specifying behavior as automated tests. The TDD workflow future-proofs apps so that they can be modified without fear of breaking existing functionality. Download this book for free here.

3.8. React Key Concepts by Maximilian Schwarzmüller (2022)

Build the understanding, skills, and experience to confidently implement React in your next project with this fast-paced overview of React fundamentals. A clear, concise explanation of core React 18 functionalities to promote quick, easy reference. Gain a deep understanding of key React concepts with the help of step-by-step derivations. Work with practical exercises that challenge you to apply your new skills and build your own simple apps. As the most popular JavaScript library for building modern, interactive user interfaces, React is an in-demand framework that'll bring real value to your career or next project. Download this book for free here.

3.9. Micro State Management with React Hooks

Understand the essential concepts and features of micro state management. Discover solutions to common problems faced while implementing micro state management. Explore the different libraries, their coding style, and the optimum approach to rendering optimization. State management is one of the most complex concepts in React. Traditionally, developers have used monolithic state management solutions. Thanks to React Hooks, micro state management is something tuned for moving your application from a monolith to a microservice. Download this book for free here.

3.10. Modern Full-Stack Development: Second Edition

Discover how to build and deploy full-stack applications with modern technologies like React, Node.js, and GraphQL. This comprehensive guide covers everything from setting up your development environment to deploying your application. Learn how to build scalable and maintainable applications by following best practices and using the latest tools and frameworks. Download this book for free here.

4. Conclusion

If you want to download more books on React, you can visit this site pdfbard.

Thanks for reading this, stay tuned for more.

Thanks for reading; if you liked my content and want to support me, the best way is to -

Join our telegram channel to get the latest books as soon as possible.
Connect with me on Facebook, where I keep sharing such free content to become more productive at your life.
Follow me on X (Twitter) and Medium to get instant notifications for everything new.
Join my Pinterest for upcoming insightful content.

Authenticate nextjs application with hanko frontend auth.

Mohammad Ismail Mirza — Sun, 07 Jan 2024 14:54:59 +0000

Hanko is a lightweight, open source user authentication solution that takes you on the journey beyond passwords.
Integrate Hanko with Next.js
Learn how to quickly add authentication and user profile in your Next.js app using Hanko.
First Create New Nextjs app

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter BLOGapp"

Now install hanko frontend-elements

yarn add @teamhanko/hanko-elements

now run development server

yarn dev

Now go to https://cloud.hanko.io and signup for api access.

enter suitable project name and in app url enter http://localhost:3000 you can access hanko frontend elements from this url only.
Now create .env file in app directory and copy Hanko api url to .env file.

NEXT_PUBLIC_HANKO_API_URL = <Hanko api url from general setting>

Now go to supabase.com create a project and signup and create a project
Now go to project setting and click database on right side
Go to Nodejs and copy the database url and now add this in .env file

DATABASE_URL = postgresql://postgres:[YOUR-PASSWORD]@db.dshyzhthijimhivhaeyq.supabase.co:5432/postgres

Replace password with the password of the project that you entered during the creation of the project...
Now this a good to go.
Install prisma

yarn add -d prisma

Finally, set up Prisma with the init command of the Prisma CLI:

yarn prisma init

Now navigate to prisma folder and open schema.prisma file

Add this code top of schema file to connect with frontend provider of db client

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

Now connect with postgresql database

datasource db {
  provider     = "postgresql"
  url          = env("DATABASE_URL")
  relationMode = "prisma"
}

Create model named user to store the login user in backend



model User {
  id    String @id @unique 
  email String @unique

}

Now run this command to migrate database.

yarn prisma migrate dev --name init

Now create a folder named db in src folder
In index.js copy and paste this code. Here we imported PrismaClient and setup the db for using in backend.

import { PrismaClient } from '@prisma/client'

declare global {
  // eslint-disable-next-line no-var
  var cachedPrisma: PrismaClient
}

let prisma: PrismaClient
if (process.env.NODE_ENV === 'production') {
  prisma = new PrismaClient()
} else {
  if (!global.cachedPrisma) {
    global.cachedPrisma = new PrismaClient()
  }
  prisma = global.cachedPrisma
}

export const db = prisma

Now app/api/auth/route.ts. In order to serialize cookie we will use

import { db } from "@/db";
import { serialize } from "cookie";




export  async function POST(request:Request) {

    // Handle the POST request here
    // You can access request data using req.body
    const data = await request.json();
    const {id,email} = data;
    if (!id || !email){
        return Response.json({
            message:"Missing Data in body",

        },{
            status:404
        })
    }

    const already_user = await db.user.findFirst({
      where:{
        id:id
      }
    })
    if (already_user)
    { 

      const ck = serialize("user_id",id,{
        secure:process.env.NODE_ENV === "production",
        httpOnly:true,
        path:"/",
      })
      const resp = Response.json({
        message:"User already existed and init login",

    },{
        status:200
    })

    resp.headers.set("Set-Cookie",ck)
    return resp
    }
    try {
        const user = await db.user.create({
          data: {
            id: id,
            email: email,
          },
        });
        const ck = serialize("user_id",user.id,{
          secure:process.env.NODE_ENV === "production",
          httpOnly:true,
          path:"/",
        })
        const resp = Response.json(
          {
              message:"Account is created",
              user: user
          },
          {
              status:201
          }
      )
      resp.headers.set('Set-Cookie',ck);

        return resp
      } catch (error) {
        console.log(error)
        return Response.json({ message: 'Failed to save user' },{status:400})
      }






}