Middleware ordering and its importance in Express - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when middleware order is changed?

Consider this Express app code snippet. What will be the response when a GET request is made to /test?

const express = require('express');
const app = express();

app.use((req, res, next) => {
  console.log('First middleware');
  next();
});

app.get('/test', (req, res, next) => {
  res.send('Hello from /test');
  next();
});

app.use((req, res) => {
  res.send('Fallback middleware');
});

app.listen(3000);

Now, if we move the fallback middleware app.use((req, res) => {...}) above the app.get('/test', ...) route, what will happen?

Express

const express = require('express');
const app = express();

app.use((req, res, next) => {
  console.log('First middleware');
  next();
});

// Fallback middleware moved here
app.use((req, res) => {
  res.send('Fallback middleware');
});

app.get('/test', (req, res, next) => {
  res.send('Hello from /test');
  next();
});

app.listen(3000);

A The response will be empty because next() is called after res.send() in the route.

B The response will be 'Hello from /test' because route handlers always run before middleware.

C The server will crash with an error because middleware order is invalid.

D The response will be 'Fallback middleware' for GET /test because fallback middleware runs before the route handler.

💡 Hint

Think about how Express processes middleware and routes in the order they are added.

Express runs middleware and routes in the order they are registered. If the fallback middleware is placed before the route, it will catch the request and send a response first. The route handler will never run because the response is already sent.

❓ lifecycle

intermediate

Which middleware runs first in this Express app?

Given the following Express app setup, which middleware function will run first when a request is made to /api/data?

const express = require('express');
const app = express();

app.use('/api', (req, res, next) => {
  console.log('API middleware');
  next();
});

app.use((req, res, next) => {
  console.log('General middleware');
  next();
});

app.get('/api/data', (req, res) => {
  res.send('Data response');
});

app.listen(3000);

A 'General middleware' runs first because it is registered before the API middleware.

B 'API middleware' runs first because it matches the /api path prefix.

C Both middlewares run simultaneously.

D Only the route handler runs; middleware is skipped.

💡 Hint

Remember that middleware with path prefixes only run if the request path matches.

Middleware registered with a path prefix like '/api' only runs for matching routes. Since the request is to '/api/data', the '/api' middleware runs first. Then the general middleware runs because it applies to all paths.

🔧 Debug

advanced

Why does this Express app hang without responding?

Look at this Express app code. Why does it hang and never send a response?

const express = require('express');
const app = express();

app.use((req, res, next) => {
  console.log('Middleware 1');
  // Missing next() call
});

app.get('/', (req, res) => {
  res.send('Hello World');
});

app.listen(3000);

A Middleware 1 does not call next(), so the request never reaches the route handler.

B The app.listen() call is missing a callback, causing the hang.

C Express requires res.end() to be called explicitly in middleware.

D The route handler is missing a next() call, causing the hang.

💡 Hint

Think about how Express moves from one middleware to the next.

Middleware functions must call next() to pass control to the next middleware or route. Since Middleware 1 does not call next() or send a response, the request hangs.

📝 Syntax

advanced

What error does this middleware code produce?

Examine this Express middleware code snippet. What error will it cause?

app.use((req, res, next) => {
  if(req.method === 'GET')
    next();
  else
    res.send('Only GET allowed');
    next();
});

A Error: Cannot set headers after they are sent to the client

B SyntaxError: Unexpected token else

C No error; middleware works correctly

D TypeError: next is not a function

💡 Hint

Look carefully at the indentation and flow of next() calls.

The else block sends a response but then next() is called again outside the else block, causing Express to try to continue after response is sent, leading to 'Cannot set headers after they are sent' error.

🧠 Conceptual

expert

Why is middleware ordering critical in Express apps?

Which of the following best explains why the order of middleware matters in Express?

A Middleware order only matters if you use error-handling middleware.

B Middleware order only affects performance but not the correctness of responses.

C Middleware order determines the sequence of request processing; incorrect order can block routes or cause unexpected responses.

D Middleware order is irrelevant because Express runs all middleware in parallel.

💡 Hint

Think about how Express passes requests through middleware and routes.

Express processes middleware and routes in the order they are registered. If middleware that sends a response runs before a route, the route never executes. Thus, order controls flow and response behavior.

Practice

1. Why is the order of middleware important in an Express app?

easy

A. Because middleware order determines the database connection speed

B. Because middleware order changes the port number the app listens on

C. Because middleware runs in the order it is added, affecting request flow

D. Because middleware order controls the CSS styles applied to the page

Solution

1. Step 1: Understand middleware execution

   Middleware functions run in the order they are added to the Express app.

2. Step 2: Connect order to request flow

   The order controls how requests are processed and which middleware handles them first.

3. Final Answer:

   Because middleware runs in the order it is added, affecting request flow -> Option C

4. Quick Check:

   Middleware order = request flow control [OK]

Hint: Middleware order controls request handling sequence [OK]

Common Mistakes:

• Thinking middleware order affects unrelated app settings
• Confusing middleware order with server port configuration
• Assuming middleware order changes frontend styles

2. Which of the following is the correct way to add middleware that logs requests before parsing JSON in Express?

easy

A. app.use(express.static('public')); app.use(logger);

B. app.use(express.json()); app.use(logger);

C. app.use(express.urlencoded()); app.use(logger);

D. app.use(logger); app.use(express.json());

Solution

1. Step 1: Identify middleware order for logging and parsing

   Logging middleware should run before JSON parsing to log raw requests.

2. Step 2: Check the order in options

   app.use(logger); app.use(express.json()); adds logger first, then JSON parser, which is correct.

3. Final Answer:

   app.use(logger); app.use(express.json()); -> Option D

4. Quick Check:

   Logger before parser = correct order [OK]

Hint: Put logging middleware before parsers [OK]

Common Mistakes:

• Adding parser before logger loses raw request info
• Using static middleware instead of logger for logging
• Confusing urlencoded with json parser order

3. Consider this Express code snippet:

app.use((req, res, next) => { console.log('First'); next(); });
app.use((req, res, next) => { console.log('Second'); next(); });
app.use((req, res) => { res.send('Done'); });

What will be printed in the console when a request is made?

medium

A. Second\nFirst

B. First\nSecond

C. Done

D. No output

Solution

1. Step 1: Trace middleware execution order

   The first middleware logs 'First' then calls next(), so next middleware runs.

2. Step 2: Next middleware logs 'Second' and calls next(), then final middleware sends response.

3. Final Answer:

   First\nSecond -> Option B

4. Quick Check:

   Middleware logs in order added [OK]

Hint: Middleware logs appear in order of app.use calls [OK]

Common Mistakes:

• Assuming logs appear in reverse order
• Expecting 'Done' to print in console
• Forgetting next() calls to continue middleware chain

4. Given this Express setup:

app.use(express.json());
app.use((req, res) => { res.send('Hello'); });
app.use((err, req, res, next) => { res.status(500).send('Error'); });

Why might the error handler middleware never run?

medium

A. Because the response is sent before error handler is reached

B. Because express.json() must be last middleware

C. Because error handlers must be added before normal middleware

D. Because error handlers only run on GET requests

Solution

1. Step 1: Identify middleware order and response flow

   The second middleware sends a response immediately, ending the request.

2. Step 2: Understand error handler placement

   Error handlers run only if next(err) is called before response is sent.

3. Final Answer:

   Because the response is sent before error handler is reached -> Option A

4. Quick Check:

   Response sent early blocks error handler [OK]

Hint: Send response last, error handler after all middleware [OK]

Common Mistakes:

• Placing error handler before normal middleware
• Thinking express.json() must be last
• Assuming error handlers run on all requests regardless

5. You want to add middleware that authenticates users, logs requests, parses JSON, and handles errors. Which order is best to ensure correct behavior?

hard

A. Logger, JSON parser, authenticator, error handler

B. Error handler, JSON parser, logger, authenticator

C. Authenticator, error handler, logger, JSON parser

D. JSON parser, authenticator, error handler, logger

Solution

1. Step 1: Determine middleware roles and order

   Logger should run first to record raw requests. JSON parser next to parse body. Authenticator after parsing to check user data. Error handler last to catch errors.

2. Step 2: Match order with options

   Logger, JSON parser, authenticator, error handler matches this order: logger, JSON parser, authenticator, error handler.

3. Final Answer:

   Logger, JSON parser, authenticator, error handler -> Option A

4. Quick Check:

   Order: log -> parse -> auth -> error [OK]

Hint: Log first, parse next, authenticate after, error last [OK]

Common Mistakes:

• Putting error handler before other middleware
• Authenticating before parsing JSON body
• Logging after authentication instead of before