Functional middleware in NestJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a functional middleware that logs the request method.

NestJS

export function loggerMiddleware(req, res, next) {
  console.log(req.[1]);
  next();
}

Drag options to blanks, or click blank then click option'

Amethod

Burl

Cbody

Dheaders

Attempts:

3 left

💡 Hint

Common Mistakes

Using req.url instead of req.method

Forgetting to call next() to continue middleware chain

The method property of the request object contains the HTTP method (GET, POST, etc.). Logging it shows which type of request was made.

2fill in blank

medium

Complete the code to apply the functional middleware globally in a NestJS app.

NestJS

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { loggerMiddleware } from './logger.middleware';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.[1](loggerMiddleware);
  await app.listen(3000);
}
bootstrap();

Drag options to blanks, or click blank then click option'

AuseGlobalGuards

Buse

CuseGlobalInterceptors

DuseGlobalFilters

Attempts:

3 left

💡 Hint

Common Mistakes

Using useGlobalGuards instead of use

Not importing the middleware function correctly

The use method is used to apply functional middleware globally in NestJS.

3fill in blank

hard

Fix the error in the functional middleware to correctly handle asynchronous operations.

NestJS

export async function asyncLoggerMiddleware(req, res, [1]) {
  await new Promise(resolve => setTimeout(resolve, 100));
  console.log('Async log:', req.method);
  next();
}

Drag options to blanks, or click blank then click option'

Anext

Bdone

Ccallback

Dhandle

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong parameter name for the third argument

Not calling next() after async code

The third parameter in middleware functions is conventionally called next. Calling next() continues the request cycle.

4fill in blank

hard

Fill both blanks to create a functional middleware that adds a custom header and calls next.

NestJS

export function customHeaderMiddleware(req, res, [1]) {
  res.setHeader('[2]', 'NestJS');
  next();
}

Drag options to blanks, or click blank then click option'

Anext

Bdone

CX-Custom-Header

DContent-Type

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong parameter name instead of next

Setting standard headers instead of custom ones

The third parameter is next to continue the middleware chain. The header X-Custom-Header is a common custom header name.

5fill in blank

hard

Fill all three blanks to create a functional middleware that logs the URL, sets a header, and calls next.

NestJS

export function fullMiddleware(req, res, [1]) {
  console.log('URL:', req.[2]);
  res.setHeader('[3]', 'Active');
  next();
}

Drag options to blanks, or click blank then click option'

Anext

Burl

CX-Status

Dmethod

Attempts:

3 left

💡 Hint

Common Mistakes

Using req.method instead of req.url for logging URL

Forgetting to call next()

The third parameter is next. The request URL is in req.url. The custom header X-Status is set to indicate status.

Practice

1. What is the main purpose of functional middleware in NestJS?

easy

A. To run code before the route handler to modify requests or add features

B. To define database models for the application

C. To create UI components for the frontend

D. To compile TypeScript code into JavaScript

Solution

1. Step 1: Understand middleware role

   Middleware runs before route handlers to process requests or add features like logging or authentication.

2. Step 2: Identify correct purpose

   Options A, B, and D relate to other parts of development, not middleware.

3. Final Answer:

   To run code before the route handler to modify requests or add features -> Option A

4. Quick Check:

   Middleware runs before routes = C [OK]

Hint: Middleware runs before routes to add features [OK]

Common Mistakes:

• Confusing middleware with database models
• Thinking middleware creates UI components
• Believing middleware compiles code

2. Which of the following is the correct way to define a functional middleware in NestJS?

easy

A. function logger(req, res) { console.log(req.url); }

B. class Logger { log(req, res) { console.log(req.url); } }

C. const logger = () => { console.log('log'); }

D. function logger(req, res, next) { console.log(req.url); next(); }

Solution

1. Step 1: Check middleware signature

   Functional middleware must accept (req, res, next) and call next() to continue.

2. Step 2: Validate options

   function logger(req, res, next) { console.log(req.url); next(); } matches this pattern. class Logger { log(req, res) { console.log(req.url); } } is a class, not functional middleware. const logger = () => { console.log('log'); } lacks parameters and next call. function logger(req, res) { console.log(req.url); } misses next parameter and call.

3. Final Answer:

   function logger(req, res, next) { console.log(req.url); next(); } -> Option D

4. Quick Check:

   Middleware needs (req, res, next) and calls next() [OK]

Hint: Middleware needs (req, res, next) and calls next() [OK]

Common Mistakes:

• Omitting the next parameter
• Not calling next() inside middleware
• Using class instead of function for functional middleware

3. Given this middleware code, what will be logged when a request to '/home' is made?

function logger(req, res, next) {
  console.log('Request URL:', req.url);
  next();
}

medium

A. Request URL: undefined

B. Request URL: /home

C. No output because next() stops logging

D. Error: req.url is not defined

Solution

1. Step 1: Understand req.url property

   In middleware, req.url contains the path of the incoming request, here '/home'.

2. Step 2: Analyze console.log output

   The middleware logs 'Request URL:' followed by req.url, so it prints 'Request URL: /home'.

3. Final Answer:

   Request URL: /home -> Option B

4. Quick Check:

   req.url logs request path = A [OK]

Hint: req.url holds the request path string [OK]

Common Mistakes:

• Assuming next() stops console.log
• Thinking req.url is undefined
• Confusing middleware with route handler output

4. Identify the error in this functional middleware code:

function auth(req, res, next) {
  if (!req.headers.authorization) {
    res.status(401).send('Unauthorized');
  }
  next();
}

medium

A. res.status should be res.sendStatus

B. Missing req parameter in function signature

C. next() is called even after sending response, causing errors

D. Authorization header check is incorrect

Solution

1. Step 1: Analyze flow after sending response

   If authorization header is missing, response is sent with 401, but next() is still called, which can cause errors by continuing the request cycle.

2. Step 2: Identify correct fix

   To fix, add return before res.status(401).send(...) to stop execution or call next() only if authorized.

3. Final Answer:

   next() is called even after sending response, causing errors -> Option C

4. Quick Check:

   Call next() only if no response sent [OK]

Hint: Don't call next() after sending response [OK]

Common Mistakes:

• Calling next() after res.send causes errors
• Forgetting to stop middleware after response
• Misusing res.status vs res.sendStatus

5. You want to create a functional middleware that adds a custom header 'X-App-Version' with value '1.0' to every response. Which code correctly implements this?

hard

A. function addVersion(req, res, next) { res.setHeader('X-App-Version', '1.0'); next(); }

B. function addVersion(req, res) { res.setHeader('X-App-Version', '1.0'); }

C. function addVersion(req, res, next) { next(); res.setHeader('X-App-Version', '1.0'); }

D. function addVersion(req, res, next) { req.setHeader('X-App-Version', '1.0'); next(); }

Solution

1. Step 1: Confirm middleware signature and header setting

   Middleware must accept (req, res, next) and call next() after setting headers. res.setHeader is correct method.

2. Step 2: Evaluate options

   function addVersion(req, res, next) { res.setHeader('X-App-Version', '1.0'); next(); } sets header then calls next() correctly. function addVersion(req, res) { res.setHeader('X-App-Version', '1.0'); } misses next parameter and call. function addVersion(req, res, next) { next(); res.setHeader('X-App-Version', '1.0'); } calls next() before setting header, so header may not be sent. function addVersion(req, res, next) { req.setHeader('X-App-Version', '1.0'); next(); } uses req.setHeader which is incorrect because req cannot set response headers.

3. Final Answer:

   function addVersion(req, res, next) { res.setHeader('X-App-Version', '1.0'); next(); } -> Option A

4. Quick Check:

   Set header before next() with correct method [OK]

Hint: Set header before next() using res.setHeader [OK]

Common Mistakes:

• Calling next() before setting headers
• Omitting next parameter or call
• Confusing req and res when setting headers