Catch decorator in NestJS - Performance & Optimization

Performance: Catch decorator

MEDIUM IMPACT

This affects how errors are handled during request processing, impacting response time and user experience.

Handling errors in HTTP request processing

NestJS

import { Catch, ExceptionFilter, ArgumentsHost } from '@nestjs/common';

@Catch()
export class GlobalCatch implements ExceptionFilter {
  catch(exception: any, host: ArgumentsHost) {
    const ctx = host.switchToHttp();
    const response = ctx.getResponse();
    // offload heavy work asynchronously
    setImmediate(() => {
      // logging or cleanup
    });
    response.status(500).json({ message: 'Internal error' });
  }
}

Offloading heavy tasks asynchronously prevents blocking the main thread, improving response time and input responsiveness.

📈 Performance GainNon-blocking error handling improves INP by reducing input delay by 50-100ms

Handling errors in HTTP request processing

NestJS

import { Catch, ExceptionFilter, ArgumentsHost } from '@nestjs/common';

@Catch()
export class GlobalCatch implements ExceptionFilter {
  catch(exception: any, host: ArgumentsHost) {
    // heavy synchronous processing or logging
    for (let i = 0; i < 1000000; i++) { /* expensive loop */ }
    const ctx = host.switchToHttp();
    const response = ctx.getResponse();
    response.status(500).json({ message: 'Internal error' });
  }
}

Heavy synchronous work inside the catch blocks blocks the event loop, delaying response and user interaction.

📉 Performance CostBlocks rendering and response for 50-100ms depending on workload

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Synchronous heavy work in Catch decorator	Minimal	0	Blocks main thread delaying paint	[X] Bad
Asynchronous error handling with deferred work	Minimal	0	Non-blocking, smooth paint and interaction	[OK] Good

Rendering Pipeline

When an error occurs, the Catch decorator intercepts it before sending a response. Synchronous heavy work here blocks the event loop, delaying the Layout and Paint stages. Asynchronous handling frees the event loop, allowing faster rendering and interaction.

→JavaScript Execution

→Layout

→Paint

⚠️ BottleneckJavaScript Execution blocking event loop

Core Web Vital Affected

INP

This affects how errors are handled during request processing, impacting response time and user experience.

Optimization Tips

1Avoid heavy synchronous work inside Catch decorators to keep the event loop free.

2Use asynchronous or deferred operations for logging and cleanup in error handlers.

3Efficient error handling improves input responsiveness and user experience.

Performance Quiz - 3 Questions

What is the main performance risk of doing heavy synchronous work inside a NestJS Catch decorator?

A It blocks the event loop, delaying response and user interaction

B It increases the bundle size significantly

C It causes layout shifts on the page

D It improves Largest Contentful Paint (LCP)

DevTools: Performance

How to check: Record a performance profile during a request that triggers an error. Look for long tasks in the Main thread related to error handling.

What to look for: Long blocking JavaScript tasks indicate synchronous heavy work in the Catch decorator. Short tasks with idle time show good async handling.