Middleware patterns in Deno - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a middleware function that logs the request method.

Deno

async function logger(ctx, next) {
  console.log(ctx.request.[1]);
  await next();
}

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

Amethod

Bheaders

Curl

Dbody

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'url' instead of 'method' will log the URL, not the HTTP method.

Using 'body' will cause an error because body is a stream, not a string.

The method property of ctx.request gives the HTTP method like GET or POST.

2fill in blank

medium

Complete the code to call the next middleware in the chain.

Deno

async function auth(ctx, next) {
  if (!ctx.request.headers.get('Authorization')) {
    ctx.response.status = 401;
    return;
  }
  await [1]();
}

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

Actx.next

Bctx.callNext

Cnext

Dctx.invoke

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to call 'ctx.next()' will fail because 'next' is not a property of ctx.

Forgetting to await 'next()' can cause unexpected behavior.

The next function is passed to middleware and must be awaited to continue the chain.

3fill in blank

hard

Fix the error in the middleware that sets a custom header.

Deno

async function customHeader(ctx, next) {
  await next();
  ctx.response.headers.[1]('X-Custom', 'Hello');
}

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

Aappend

Bset

Cadd

Dpush

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'append' will add a new header but may cause duplicates.

Using 'push' or 'add' will cause runtime errors because these methods don't exist.

The headers object has a set method to add or update headers.

4fill in blank

hard

Fill both blanks to create a middleware that measures response time.

Deno

async function responseTime(ctx, [1]) {
  const start = Date.now();
  await [2]();
  const ms = Date.now() - start;
  ctx.response.headers.set('X-Response-Time', `${ms}ms`);
}

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

Anext

Bctx

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'ctx' as the second parameter will cause errors.

Not awaiting 'next()' will give wrong timing.

The second parameter is usually named next and must be awaited to continue middleware chain.

5fill in blank

hard

Fill all three blanks to create a middleware that catches errors and sets status 500.

Deno

async function errorHandler(ctx, [1]) {
  try {
    await [2]();
  } catch ([3]) {
    ctx.response.status = 500;
    ctx.response.body = 'Internal Server Error';
  }
}

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

Anext

Cerr

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong variable name in catch block causes reference errors.

Not awaiting next() causes middleware chain to break.

The second parameter is next to call next middleware. The catch block uses error to capture the exception.

Practice

1. What is the main purpose of middleware in a Deno web application?

easy

A. To compile TypeScript code into JavaScript

B. To store data permanently in a database

C. To run code step-by-step for each incoming request

D. To create user interface components

Solution

1. Step 1: Understand middleware role

   Middleware processes each request in order, allowing code to run before sending a response.

2. Step 2: Compare options

   Only To run code step-by-step for each incoming request describes this step-by-step request handling. Other options describe unrelated tasks.

3. Final Answer:

   To run code step-by-step for each incoming request -> Option C

4. Quick Check:

   Middleware = step-by-step request code [OK]

Hint: Middleware runs code for each request in order [OK]

Common Mistakes:

• Confusing middleware with database operations
• Thinking middleware builds UI components
• Assuming middleware compiles code

2. Which of the following is the correct way to call the next middleware in Deno?

easy

A. next.await()

B. next()

C. call next()

D. await next()

Solution

1. Step 1: Recall async middleware pattern

   Middleware functions are async and must await next() to continue the chain.

2. Step 2: Check syntax correctness

   Only 'await next()' correctly waits for the next middleware to finish before continuing.

3. Final Answer:

   await next() -> Option D

4. Quick Check:

   Use await next() to proceed [OK]

Hint: Always use await before next() in async middleware [OK]

Common Mistakes:

• Calling next() without await causing unexpected behavior
• Using incorrect syntax like call next()
• Trying to use next.await() which is invalid

3. Given this middleware code snippet in Deno:

async function logger(ctx, next) {
  console.log('Before');
  await next();
  console.log('After');
}

async function handler(ctx) {
  ctx.response.body = 'Hello';
}

// Middleware chain: logger -> handler

What will be printed to the console when a request is handled?

medium

A. Before\nAfter

B. After\nBefore

C. Before

D. After

Solution

1. Step 1: Analyze middleware flow

   Logger prints 'Before', then awaits next middleware (handler), then prints 'After'.

2. Step 2: Understand order of prints

   Since handler runs between the two console.logs, output order is 'Before' then 'After'.

3. Final Answer:

   Before\nAfter -> Option A

4. Quick Check:

   Middleware logs before and after next() [OK]

Hint: Middleware logs before and after await next() [OK]

Common Mistakes:

• Assuming 'After' prints before 'Before'
• Thinking only 'Before' or 'After' prints
• Ignoring await causing wrong order

4. Identify the error in this Deno middleware code:

async function auth(ctx, next) {
  if (!ctx.request.headers.get('Authorization')) {
    ctx.response.status = 401;
    ctx.response.body = 'Unauthorized';
  }
  await next();
}

medium

A. Missing await before ctx.request.headers.get

B. Should return after setting 401 to stop middleware chain

C. ctx.response.body must be a JSON object

D. next() should not be awaited

Solution

1. Step 1: Understand middleware flow control

   If authorization header is missing, response is set to 401, but code still calls await next(), continuing the chain.

2. Step 2: Identify fix to stop chain

   To prevent further middleware running, function should return immediately after setting 401 response.

3. Final Answer:

   Should return after setting 401 to stop middleware chain -> Option B

4. Quick Check:

   Return early to stop middleware chain [OK]

Hint: Return after response to stop middleware chain [OK]

Common Mistakes:

• Not returning causes next middleware to run anyway
• Thinking await is missing on header get
• Believing response body must be JSON always

5. You want to create a middleware in Deno that measures how long each request takes and adds a custom header X-Response-Time with the duration in milliseconds. Which of the following middleware implementations correctly achieves this?

hard

A. async function responseTime(ctx, next) {
const start = performance.now();
await next();
const ms = performance.now() - start;
ctx.response.headers.set('X-Response-Time', ms.toFixed(2));
}

B. async function responseTime(ctx, next) {
const start = Date.now();
const ms = Date.now() - start;
ctx.response.headers.set('X-Response-Time', `${ms}ms`);
await next();
}

C. async function responseTime(ctx, next) {
const start = Date.now();
next();
const ms = Date.now() - start;
ctx.response.headers.set('X-Response-Time', `${ms}ms`);
}

D. async function responseTime(ctx, next) {
await next();
const ms = Date.now();
ctx.response.headers.set('X-Response-Time', ms);
}

Solution

1. Step 1: Measure time before and after next()

   Start timer before await next(), then calculate duration after it finishes.

2. Step 2: Use precise timer and set header correctly

   performance.now() gives better precision than Date.now(). Setting header with ms.toFixed(2) formats nicely.

3. Final Answer:

   Middleware using performance.now(), await next(), and setting header after next() -> Option A

4. Quick Check:

   Use performance.now() and await next() then set header [OK]

Hint: Start timer before await next(), set header after [OK]

Common Mistakes:

• Calculating time before await next() runs
• Using Date.now() which is less precise
• Setting header before next() completes