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.

Practice

1. What is the primary purpose of the @Catch() decorator in NestJS?

easy

A. To mark a class as an exception filter that handles errors

B. To define a route handler for HTTP requests

C. To inject dependencies into a service

D. To create a middleware function

Solution

1. Step 1: Understand the role of @Catch()

   The @Catch() decorator is used to mark a class as an exception filter in NestJS, which means it handles errors thrown in the application.

2. Step 2: Differentiate from other decorators

   Other decorators like route handlers or dependency injections serve different purposes, so @Catch() specifically relates to error handling.

3. Final Answer:

   To mark a class as an exception filter that handles errors -> Option A

4. Quick Check:

   Error handling = @Catch() [OK]

Hint: Catch decorator marks error handlers in NestJS classes [OK]

Common Mistakes:

• Confusing @Catch() with route or middleware decorators
• Thinking @Catch() injects dependencies
• Assuming @Catch() handles normal requests

2. Which of the following is the correct syntax to create an exception filter that catches all exceptions using the @Catch() decorator?

easy

A. @Catch()\nexport class AllExceptionsFilter implements ExceptionFilter { ... }

B. @Catch(Error)\nexport class AllExceptionsFilter implements ExceptionFilter { ... }

C. @Catch(HttpException)\nexport class AllExceptionsFilter implements ExceptionFilter { ... }

D. @Catch(Exception)\nexport class AllExceptionsFilter implements ExceptionFilter { ... }

Solution

1. Step 1: Understand @Catch() usage without parameters

   Using @Catch() with no arguments means the filter will catch all exceptions.

2. Step 2: Check other options

   Options A, C, and D specify particular exception types, so they do not catch all exceptions.

3. Final Answer:

   @Catch()\nexport class AllExceptionsFilter implements ExceptionFilter { ... } -> Option A

4. Quick Check:

   No argument = catch all exceptions [OK]

Hint: Empty @Catch() catches all exceptions [OK]

Common Mistakes:

• Passing incorrect exception types to @Catch()
• Using @Catch() with a non-error class
• Confusing @Catch() with middleware syntax

3. Given the following exception filter code, what will be the output when a NotFoundException is thrown?

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

@Catch(NotFoundException)
export class NotFoundFilter implements ExceptionFilter {
  catch(exception: NotFoundException, host: ArgumentsHost) {
    const response = host.switchToHttp().getResponse();
    response.status(404).json({ message: 'Resource not found' });
  }
}

medium

A. HTTP response with status 404 and default NestJS error message

B. HTTP response with status 500 and default error message

C. No response sent, request hangs

D. HTTP response with status 404 and JSON { message: 'Resource not found' }

Solution

1. Step 1: Analyze the exception filter behavior

   The filter catches only NotFoundException and sends a 404 status with a custom JSON message.

2. Step 2: Understand the response sent

   The response is explicitly set to status 404 with JSON { message: 'Resource not found' }, overriding default behavior.

3. Final Answer:

   HTTP response with status 404 and JSON { message: 'Resource not found' } -> Option D

4. Quick Check:

   Custom 404 JSON response = HTTP response with status 404 and JSON { message: 'Resource not found' } [OK]

Hint: Filter sends custom response for caught exception type [OK]

Common Mistakes:

• Assuming default error message is sent
• Thinking status 500 is returned
• Missing the JSON response in output

4. Identify the error in the following exception filter code:

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

@Catch()
export class MyFilter implements ExceptionFilter {
  catch(exception, host: ArgumentsHost) {
    const ctx = host.switchToHttp();
    const response = ctx.getResponse();
    response.status(500).send('Internal Server Error');
  }
}

medium

A. The response object is not correctly retrieved

B. The exception parameter lacks a type annotation

C. The catch method should return a value

D. The @Catch() decorator must specify an exception type

Solution

1. Step 1: Check method signature

   The catch method's first parameter exception should have a type annotation, typically unknown or any.

2. Step 2: Verify other parts

   The @Catch() decorator can be empty to catch all exceptions, returning void is allowed, and response retrieval is correct.

3. Final Answer:

   The exception parameter lacks a type annotation -> Option B

4. Quick Check:

   Missing parameter type = The exception parameter lacks a type annotation [OK]

Hint: Always type the exception parameter in catch method [OK]

Common Mistakes:

• Forgetting to type the exception parameter
• Thinking @Catch() requires arguments
• Expecting catch to return a value

5. You want to create a single exception filter that handles both BadRequestException and UnauthorizedException with different custom messages. Which is the correct way to use the @Catch() decorator to achieve this?

hard

A. @Catch()\nexport class MultiExceptionFilter implements ExceptionFilter { ... }

B. @Catch([BadRequestException, UnauthorizedException])\nexport class MultiExceptionFilter implements ExceptionFilter { ... }

C. @Catch(BadRequestException, UnauthorizedException)\nexport class MultiExceptionFilter implements ExceptionFilter { ... }

D. Create two separate filters each with @Catch() for one exception

Solution

1. Step 1: Understand how to catch multiple exceptions

   The @Catch() decorator accepts multiple exception classes as separate arguments to catch them in one filter.

2. Step 2: Evaluate options

   @Catch(BadRequestException, UnauthorizedException)\nexport class MultiExceptionFilter implements ExceptionFilter { ... } correctly passes multiple exceptions as separate arguments. @Catch([BadRequestException, UnauthorizedException])\nexport class MultiExceptionFilter implements ExceptionFilter { ... } incorrectly passes an array. @Catch()\nexport class MultiExceptionFilter implements ExceptionFilter { ... } catches all exceptions. Create two separate filters each with @Catch() for one exception uses multiple filters, not one.

3. Final Answer:

   @Catch(BadRequestException, UnauthorizedException)\nexport class MultiExceptionFilter implements ExceptionFilter { ... } -> Option C

4. Quick Check:

   Multiple exceptions as arguments = @Catch(BadRequestException, UnauthorizedException)\nexport class MultiExceptionFilter implements ExceptionFilter { ... } [OK]

Hint: Pass multiple exceptions as separate arguments to @Catch() [OK]

Common Mistakes:

• Passing exceptions as an array to @Catch()
• Using multiple filters instead of one
• Using empty @Catch() to catch specific exceptions