Async middleware wrapper in Express - Step-by-Step Execution

Concept Flow - Async middleware wrapper

Request comes in

↓

Async middleware wrapper called

↓

Call async middleware function

↓

Promise resolves or rejects

↓

Success

↓

Call next()

↓

Next middleware or route handler

↓

Response sent or error handled

The async middleware wrapper calls an async function and handles its promise. On success, it calls next() to continue. On error, it passes the error to next(err) for Express error handling.

Execution Sample

Express

const asyncWrapper = fn => (req, res, next) => {
  Promise.resolve(fn(req, res, next)).catch(next);
};

Wraps an async middleware function to catch errors and pass them to Express error handler.

Execution Table

Step	Action	Promise State	Error Caught?	Next Called	Result
1	Request arrives, wrapper called	Pending	No	No	Wrapper starts async function
2	Async function runs, returns Promise	Pending	No	No	Waiting for async completion
3	Promise resolves successfully	Resolved	No	Yes	next() called, continue flow
4	Request handled by next middleware	N/A	No	N/A	Response sent or further processing
5	If async function throws error	Rejected	Yes	Yes	next(err) called, error handler triggered

💡 Execution stops when next() or next(err) is called to continue or handle error.

Variable Tracker

Variable	Start	After Step 2	After Step 3 or 5	Final
fn	async middleware function	async function Promise pending	Promise resolved or rejected	N/A
Promise	undefined	Pending	Resolved or Rejected	Handled by next() or next(err)
error	undefined	undefined	Error object if rejected	Passed to next(err) or undefined

Key Moments - 2 Insights

Why do we need to catch errors in async middleware?

Because async functions return promises, errors inside them won't be caught by Express automatically. The wrapper catches rejected promises and passes errors to next(err), as shown in execution_table step 5.

What happens if we forget to call next() after async success?

The request will hang because Express waits for next() to continue. The wrapper ensures next() is called after promise resolves, as seen in execution_table step 3.

Visual Quiz - 3 Questions

Look at the execution_table, at which step is next() called after successful async completion?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Check the 'Next Called' column in execution_table rows.

According to variable_tracker, what is the state of the Promise after step 2?

A Rejected

B Pending

C Resolved

D Undefined

💡 Hint

Look at the Promise row and After Step 2 column in variable_tracker.

If the async function throws an error, what does the wrapper do according to execution_table?

A Calls next(err) to pass error

B Calls next() without error

C Ignores the error

D Returns a resolved promise

💡 Hint

See the 'Error Caught?' and 'Next Called' columns in execution_table step 5.

Concept Snapshot

Async middleware wrapper syntax:
const asyncWrapper = fn => (req, res, next) => {
  Promise.resolve(fn(req, res, next)).catch(next);
};

Behavior:
- Calls async middleware function
- Catches rejected promises
- Passes errors to Express error handler via next(err)

Key rule: Always call next() or next(err) to continue Express flow.

Full Transcript

This visual execution shows how an async middleware wrapper works in Express. When a request arrives, the wrapper calls the async middleware function and wraps it in Promise.resolve to handle both sync and async returns. If the promise resolves, next() is called to continue to the next middleware or route handler. If the promise rejects due to an error, the catch block calls next(err) to pass the error to Express's error handling middleware. The execution table traces these steps, showing promise states and when next() or next(err) is called. The variable tracker shows how the async function and promise states change during execution. Key moments clarify why catching errors in async middleware is necessary and the importance of calling next() to avoid hanging requests. The quiz tests understanding of when next() is called, promise states, and error handling behavior. The snapshot summarizes the wrapper syntax and its role in Express middleware flow.

Practice

1. What is the main purpose of using an async middleware wrapper in Express?

easy

A. To automatically catch errors from async route handlers without try-catch blocks

B. To convert synchronous middleware into asynchronous functions

C. To speed up the execution of middleware functions

D. To log all requests automatically

Solution

1. Step 1: Understand async middleware challenges

   Async route handlers can throw errors that need to be caught to avoid crashing the app.

2. Step 2: Role of async middleware wrapper

   The wrapper automatically catches errors from async functions and passes them to Express error handlers, avoiding manual try-catch blocks.

3. Final Answer:

   To automatically catch errors from async route handlers without try-catch blocks -> Option A

4. Quick Check:

   Async error catching = To automatically catch errors from async route handlers without try-catch blocks [OK]

Hint: Async wrapper catches errors, no manual try-catch needed [OK]

Common Mistakes:

• Thinking it converts sync to async
• Assuming it improves speed
• Confusing it with logging middleware

2. Which of the following is the correct syntax to create an async middleware wrapper function in Express?

easy

A. const wrap = fn => (req, res, next) => { try { fn(req, res, next); } catch (err) { next(err); } };

B. const wrap = fn => (req, res, next) => fn(req, res, next).catch(next);

C. const wrap = fn => async (req, res, next) => { await fn(req, res, next); };

D. const wrap = fn => (req, res, next) => { fn(req, res, next).then(next); };

Solution

1. Step 1: Understand async wrapper pattern

   The wrapper returns a function that calls the async function and catches errors with .catch(next).

2. Step 2: Check each option

   const wrap = fn => (req, res, next) => { try { fn(req, res, next); } catch (err) { next(err); } }; uses try-catch but misses async/await and won't catch async errors properly. const wrap = fn => (req, res, next) => fn(req, res, next).catch(next); correctly returns a function that calls fn and catches errors with .catch(next). const wrap = fn => async (req, res, next) => { await fn(req, res, next); }; awaits but does not catch errors. const wrap = fn => (req, res, next) => { fn(req, res, next).then(next); }; calls then(next) which is incorrect for error handling.

3. Final Answer:

   const wrap = fn => (req, res, next) => fn(req, res, next).catch(next); -> Option B

4. Quick Check:

   Async wrapper uses .catch(next) = const wrap = fn => (req, res, next) => fn(req, res, next).catch(next); [OK]

Hint: Async wrapper uses .catch(next) to handle errors [OK]

Common Mistakes:

• Using try-catch without async/await
• Not returning the wrapped function
• Misusing .then instead of .catch

3. Given the code below, what will be the output when a GET request is made to /data?

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

const wrap = fn => (req, res, next) => fn(req, res, next).catch(next);

app.get('/data', wrap(async (req, res) => {
  const data = await Promise.resolve('Hello World');
  res.send(data);
}));

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

app.listen(3000);

medium

A. Nothing, request hangs

B. Error caught

C. Hello World

D. SyntaxError

Solution

1. Step 1: Analyze the async route handler

   The async function resolves 'Hello World' and sends it as response.

2. Step 2: Check error handling

   No error occurs, so the error middleware is not triggered. The wrapper ensures errors would be caught if any.

3. Final Answer:

   Hello World -> Option C

4. Quick Check:

   Successful async response = Hello World [OK]

Hint: No error means normal response sent [OK]

Common Mistakes:

• Assuming error middleware always runs
• Thinking async wrapper changes output
• Confusing promise resolution with error

4. Identify the error in the following async middleware wrapper code:

const wrap = fn => (req, res, next) => {
  try {
    fn(req, res, next);
  } catch (err) {
    next(err);
  }
};

medium

A. fn should not receive next as argument

B. Using try-catch inside middleware is not allowed

C. next(err) should be replaced with throw err

D. Missing async keyword and await, so async errors are not caught

Solution

1. Step 1: Understand async error handling

   Async functions return promises; errors inside them are caught via .catch or await with try-catch.

2. Step 2: Analyze the wrapper code

   The wrapper calls fn without await or .catch, so errors inside async fn are not caught by try-catch.

3. Final Answer:

   Missing async keyword and await, so async errors are not caught -> Option D

4. Quick Check:

   Async errors need await or .catch = Missing async keyword and await, so async errors are not caught [OK]

Hint: Try-catch alone misses async errors without await [OK]

Common Mistakes:

• Thinking try-catch works without await
• Confusing next(err) with throw
• Believing next should not be passed

5. You want to create an async middleware wrapper that also logs the error message before passing it to Express error handler. Which of the following implementations correctly achieves this?

hard

A. const wrap = fn => (req, res, next) => fn(req, res, next).catch(err => { console.error(err.message); next(err); });

B. const wrap = fn => async (req, res, next) => { try { await fn(req, res, next); } catch (err) { next(err.message); } };

C. const wrap = fn => (req, res, next) => { fn(req, res, next).then(() => {}, err => { console.log(err); }); };

D. const wrap = fn => (req, res, next) => { try { fn(req, res, next); } catch (err) { console.error(err); next(err); } };

Solution

1. Step 1: Understand error logging and forwarding

   We want to log the error message and then pass the full error to next() for Express to handle.

2. Step 2: Evaluate each option

   const wrap = fn => (req, res, next) => fn(req, res, next).catch(err => { console.error(err.message); next(err); }); uses .catch to log err.message and calls next(err) correctly. const wrap = fn => async (req, res, next) => { try { await fn(req, res, next); } catch (err) { next(err.message); } }; passes err.message to next, which breaks error handling. const wrap = fn => (req, res, next) => { fn(req, res, next).then(() => {}, err => { console.log(err); }); }; logs error but does not call next, so error is not forwarded. const wrap = fn => (req, res, next) => { try { fn(req, res, next); } catch (err) { console.error(err); next(err); } }; uses try-catch without async/await, so async errors may be missed.

3. Final Answer:

   const wrap = fn => (req, res, next) => fn(req, res, next).catch(err => { console.error(err.message); next(err); }); -> Option A

4. Quick Check:

   Log then next(err) in .catch = const wrap = fn => (req, res, next) => fn(req, res, next).catch(err => { console.error(err.message); next(err); }); [OK]

Hint: Log error inside .catch, then call next(err) [OK]

Common Mistakes:

• Passing err.message to next instead of err
• Not forwarding error to next
• Using try-catch without async/await