404 Not Found handler in Express - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when a request hits this 404 handler?

Consider this Express 404 handler middleware. What will the client receive if they request a non-existent route?

Express

app.use((req, res) => {
  res.status(404).send('Page not found');
});

A The client receives a 500 status with an error message.

B The client receives a 200 status with the text 'Page not found'.

C The client receives a 404 status with an empty response body.

D The client receives a 404 status with the text 'Page not found'.

💡 Hint

Look at the status code set and the response sent.

This middleware sets the HTTP status to 404 and sends the text 'Page not found'. So the client gets a 404 status with that message.

📝 Syntax

intermediate

Which 404 handler code snippet is syntactically correct?

Identify the valid Express 404 handler middleware from the options below.

A

app.use((req, res, next) => {
  res.status(404).send('Not found');
});

B

app.use((req, res) => {
  res.status(404).send('Not found');
});

C

app.use((req, res, next) => {
  res.status(404).send('Not found')
);

D

app.use((req, res, next) => {
  res.status(404).send('Not found');
);

💡 Hint

Check for balanced parentheses and braces.

Option A has correct syntax with balanced braces and parentheses. Others have missing or misplaced characters causing syntax errors.

🔧 Debug

advanced

Why doesn't this 404 handler run for requests to '/hello'?

Given this Express app code, why does the 404 handler not get called when requesting '/hello'?

Express

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

app.use((req, res) => {
  res.status(404).send('Not found');
});

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

A Because the 404 handler is placed before the route handlers.

B Because the route '/hello' matches the request, so 404 handler doesn't run for that path.

C Because the 404 handler is missing the error parameter, so it is treated as normal middleware.

D Because the 404 handler does not call next(), so it blocks other middleware.

💡 Hint

Think about which routes match requests and middleware order.

The route '/hello' matches requests to '/hello' and sends a response, so the request never reaches the 404 handler middleware.

❓ state_output

advanced

What is the response status and body for this 404 handler with next() call?

Analyze this Express 404 handler. What will the client receive?

Express

app.use((req, res, next) => {
  res.status(404);
  next();
});

app.use((req, res) => {
  res.send('Page missing');
});

A Status 404 with empty body.

B Status 200 with body 'Page missing'.

C Status 404 with body 'Page missing'.

D Status 200 with empty body.

💡 Hint

Check how status and next() affect response.

The first middleware sets status 404 and calls next(), so the next middleware sends the body with status 404 preserved.

🧠 Conceptual

expert

Which statement about Express 404 handlers is true?

Select the correct statement about how Express handles 404 Not Found errors.

A A 404 handler should be placed after all route handlers and middleware to catch unmatched requests.

B Express automatically sends a 404 response if no middleware handles a request, so no 404 handler is needed.

C A 404 handler must have four parameters (err, req, res, next) to catch unmatched routes.

D A 404 handler can only send JSON responses, not plain text or HTML.

💡 Hint

Think about middleware order and parameters.

404 handlers catch unmatched routes and must be last. Error handlers have four parameters; 404 handlers usually have three. Express does not auto-send 404 responses. 404 handlers can send any content type.

Practice

1. What is the main purpose of a 404 Not Found handler in an Express app?

easy

A. To catch requests for routes that do not exist and respond with a message

B. To handle database connection errors

C. To log all incoming requests

D. To serve static files like images and CSS

Solution

1. Step 1: Understand what a 404 error means

   A 404 error means the requested page or route was not found on the server.

2. Step 2: Role of the 404 handler in Express

   The 404 handler catches these unknown routes and sends a clear message to the user.

3. Final Answer:

   To catch requests for routes that do not exist and respond with a message -> Option A

4. Quick Check:

   404 handler = catch unknown routes [OK]

Hint: 404 handler catches unknown routes last in middleware [OK]

Common Mistakes:

• Confusing 404 handler with error handler for server errors
• Placing 404 handler before route definitions
• Using 404 handler to serve static files

2. Which of the following is the correct syntax to add a 404 handler in Express?

easy

A. app.route('*').get((req, res) => { res.status(404).send('Not Found'); });

B. app.get('/404', (req, res) => { res.send('Not Found'); });

C. app.use((req, res) => { res.status(404).send('Not Found'); });

D. app.use((err, req, res, next) => { res.status(404).send('Not Found'); });

Solution

1. Step 1: Identify the middleware signature for 404 handler

   A 404 handler uses app.use with (req, res) parameters, no error parameter.

2. Step 2: Check each option's correctness

   app.use((req, res) => { res.status(404).send('Not Found'); }); correctly uses app.use with (req, res) and sets status 404. app.get('/404', (req, res) => { res.send('Not Found'); }); is a route, not a catch-all. app.use((err, req, res, next) => { res.status(404).send('Not Found'); }); is an error handler (has err param). app.route('*').get((req, res) => { res.status(404).send('Not Found'); }); uses app.route('*') which is not standard for 404.

3. Final Answer:

   app.use((req, res) => { res.status(404).send('Not Found'); }); -> Option C

4. Quick Check:

   404 handler = app.use with (req, res) [OK]

Hint: 404 handler uses app.use with (req, res), no error param [OK]

Common Mistakes:

• Using error handler signature (err, req, res, next) for 404
• Defining 404 as a specific route like '/404'
• Using app.route('*') incorrectly for 404

3. Given this Express code snippet, what will the server respond with when a user visits /unknown?

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

app.get('/home', (req, res) => {
  res.send('Welcome Home');
});

app.use((req, res) => {
  res.status(404).send('Page Not Found');
});

app.listen(3000);

medium

A. No response, request hangs

B. 'Welcome Home'

C. Server error 500

D. 'Page Not Found' with status 404

Solution

1. Step 1: Check defined routes

   The only defined route is '/home'. The request is for '/unknown', which is not defined.

2. Step 2: Check 404 handler behavior

   The app.use middleware catches all unmatched routes and sends 'Page Not Found' with status 404.

3. Final Answer:

   'Page Not Found' with status 404 -> Option D

4. Quick Check:

   Unknown route triggers 404 handler [OK]

Hint: Unknown routes trigger 404 handler last middleware [OK]

Common Mistakes:

• Assuming default 200 status for unknown routes
• Expecting server error instead of 404
• Thinking the request will hang without response

4. Identify the error in this Express 404 handler code:

app.use((req, res, next) => {
  res.send('404 Not Found');
  res.status(404);
});

medium

A. The status should be set before sending the response

B. The handler should have four parameters (err, req, res, next)

C. The handler should use res.redirect instead of res.send

D. The middleware should be app.get, not app.use

Solution

1. Step 1: Check order of response methods

   Calling res.send sends the response immediately. Setting status after sending has no effect.

2. Step 2: Correct order for setting status and sending

   Status must be set before res.send to apply correctly.

3. Final Answer:

   The status should be set before sending the response -> Option A

4. Quick Check:

   Set status before send [OK]

Hint: Always set status before sending response [OK]

Common Mistakes:

• Setting status after res.send (ignored)
• Using error handler signature for 404
• Using app.get instead of app.use for 404

5. You want to add a 404 handler that returns JSON with a message and logs the missing URL. Which code correctly implements this in Express?

hard

A. app.use((err, req, res, next) => { console.log('Missing:', req.url); res.status(404).json({ error: 'Not Found' }); });

B. app.use((req, res) => { console.log('Missing:', req.url); res.status(404).json({ error: 'Not Found' }); });

C. app.get('*', (req, res) => { console.log('Missing:', req.url); res.status(404).json({ error: 'Not Found' }); });

D. app.use((req, res, next) => { res.json({ error: 'Not Found' }); console.log('Missing:', req.url); res.status(404); });

Solution

1. Step 1: Choose correct middleware signature for 404 handler

   404 handler uses app.use with (req, res), no error parameter.

2. Step 2: Ensure status is set before sending JSON and logging happens before response

   app.use((req, res) => { console.log('Missing:', req.url); res.status(404).json({ error: 'Not Found' }); }); logs the URL, sets status 404, and sends JSON correctly. app.use((err, req, res, next) => { console.log('Missing:', req.url); res.status(404).json({ error: 'Not Found' }); }); uses error handler signature incorrectly. app.get('*', (req, res) => { console.log('Missing:', req.url); res.status(404).json({ error: 'Not Found' }); }); uses app.get('*') which is less common and may miss some requests. app.use((req, res, next) => { res.json({ error: 'Not Found' }); console.log('Missing:', req.url); res.status(404); }); sets status after sending response and logs after response, which is wrong.

3. Final Answer:

   app.use((req, res) => { console.log('Missing:', req.url); res.status(404).json({ error: 'Not Found' }); }); -> Option B

4. Quick Check:

   404 handler logs then sends JSON with status 404 [OK]

Hint: Use app.use with (req, res), set status before json, log before response [OK]

Common Mistakes:

• Using error handler signature for 404
• Setting status after sending response
• Logging after sending response
• Using app.get('*') instead of app.use