Bird
Raised Fist0
Expressframework~8 mins

404 Not Found handler in Express - Performance & Optimization

Choose your learning style10 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Performance: 404 Not Found handler
MEDIUM IMPACT
This affects the server response time and user experience when a requested resource is missing.
Handling requests for missing pages
Express
const path = require('path');
app.use((req, res) => {
  res.status(404).sendFile(path.join(__dirname, 'public', '404.html'));
});
Serves a static 404 page file, allowing caching and faster response without blocking event loop.
📈 Performance GainNon-blocking file streaming; leverages browser caching; reduces server CPU usage.
Handling requests for missing pages
Express
app.use((req, res) => {
  res.status(404).send('<html><body><h1>Page not found</h1></body></html>');
});
Sends a full HTML string inline, which can be bulky and blocks the event loop if complex logic is added.
📉 Performance CostBlocks event loop briefly for string construction; no caching or streaming used.
Performance Comparison
PatternServer CPU UsageResponse TimeCachingVerdict
Inline HTML string in handlerHigh (blocks event loop if complex)Slower (builds string every request)No caching[X] Bad
Serve static 404 HTML fileLow (non-blocking streaming)Faster (cached by browser/server)Yes, effective caching[OK] Good
Rendering Pipeline
When a 404 handler runs, the server prepares a response which the browser then parses and renders. Efficient handlers minimize server delay and reduce time to first byte, improving the Largest Contentful Paint.
→Server Response
→Network Transfer
→Browser Parsing
→Rendering
⚠️ BottleneckServer Response preparation if handler is slow or blocking
Core Web Vital Affected
LCP
This affects the server response time and user experience when a requested resource is missing.
Optimization Tips
1Serve static 404 pages to leverage caching and reduce server CPU load.
2Avoid building large HTML strings inline in the 404 handler to prevent blocking.
3Ensure 404 responses are fast to improve Largest Contentful Paint (LCP).
Performance Quiz - 3 Questions
Test your performance knowledge
What is a performance benefit of serving a static 404 page file instead of inline HTML in Express?
AIt blocks the event loop longer but improves rendering.
BIt increases server CPU usage but reduces network size.
CIt allows browser caching and reduces server CPU usage.
DIt disables browser caching to ensure fresh content.
DevTools: Network
How to check: Open DevTools, go to Network tab, request a missing page, and inspect the 404 response headers and timing.
What to look for: Look for fast Time to First Byte (TTFB) and presence of cache headers indicating static file serving.

Practice

(1/5)
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
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard