Async middleware wrapper in Express - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create an async middleware wrapper function.

Express

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

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

Aresolve

Bthen

Cfinally

Dcatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using then instead of catch causes errors to be unhandled.

Using finally does not pass errors to next.

Using resolve is incorrect as it's not a Promise method.

The catch method is used to handle errors in the async function and pass them to next for Express error handling.

2fill in blank

medium

Complete the code to use the async middleware wrapper with an async route handler.

Express

app.get('/data', [1](async (req, res) => {
  const data = await fetchData();
  res.json(data);
}));

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

AasyncHandler

BexpressAsyncHandler

CasyncWrapper

DwrapAsync

Attempts:

3 left

💡 Hint

Common Mistakes

Using undefined wrapper function names.

Not wrapping the async function causes unhandled errors.

The asyncWrapper function wraps the async route handler to catch errors and pass them to Express.

3fill in blank

hard

Fix the error in the async middleware wrapper to correctly handle errors.

Express

const asyncWrapper = (fn) => (req, res, next) => {
  fn(req, res, next).[1](next);
};

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

Acatch

Bthen

Cfinally

Dresolve

Attempts:

3 left

💡 Hint

Common Mistakes

Using then instead of catch.

Not handling errors causes unhandled Promise rejections.

Directly calling fn(req, res, next) returns a Promise, so catch is needed to handle errors and pass them to next.

4fill in blank

hard

Fill both blanks to create an async middleware wrapper that returns a function with correct parameters.

Express

const asyncWrapper = ([1]) => ([2]) => {
  return Promise.resolve([1](...[2])).catch(next);
};

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

Afn

Breq, res, next

C[req, res, next]

Dargs

Attempts:

3 left

💡 Hint

Common Mistakes

Using parameter names instead of an array for spreading.

Not spreading the arguments causes errors.

The wrapper takes a function fn and returns a function that takes args (an array of parameters). It calls fn(...args) and catches errors.

5fill in blank

hard

Fill all three blanks to create a reusable async middleware wrapper with error forwarding.

Express

function asyncWrapper([1]) {
  return function [2](req, res, next) {
    [3](fn(req, res, next)).catch(next);
  };
}

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

Afn

Bmiddleware

CPromise.resolve

DasyncWrapper

Attempts:

3 left

💡 Hint

Common Mistakes

Not wrapping the function call in Promise.resolve.

Using incorrect function names.

Not passing errors to next.

The function asyncWrapper takes fn, returns a function named middleware that calls Promise.resolve(fn(req, res, next)) and catches errors to pass to next.

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