Error response formatting in Express - Performance & Optimization

Performance: Error response formatting

MEDIUM IMPACT

This affects the speed of sending error responses and the user's perception of app responsiveness during failures.

Sending error responses in an Express app

Express

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

Sends minimal JSON error message, reducing response size and parsing time on client.

📈 Performance GainSaves 5-10kb response size, reduces blocking time by 50-100ms

Sending error responses in an Express app

Express

app.use((err, req, res, next) => {
  res.status(500).send(`<html><body><h1>Error</h1><pre>${err.stack}</pre></body></html>`);
});

Sending full HTML with stack trace increases response size and blocks rendering longer on client.

📉 Performance CostAdds 5-10kb to response size, blocking rendering for extra 50-100ms on slow networks

Performance Comparison

Pattern	Response Size	Parsing Time	Rendering Delay	Verdict
Full HTML error with stack trace	Large (5-10kb+)	High	High (blocks rendering)	[X] Bad
Minimal JSON error message	Small (<1kb)	Low	Low (fast render)	[OK] Good

Rendering Pipeline

Error response formatting affects the server-to-client data transfer and client rendering stages. Large or complex error responses increase network transfer time and client parsing, delaying the next paint.

→Network Transfer

→Client Parsing

→Paint

⚠️ BottleneckNetwork Transfer and Client Parsing

Core Web Vital Affected

INP

This affects the speed of sending error responses and the user's perception of app responsiveness during failures.

Optimization Tips

1Send minimal error data to reduce response size.

2Avoid sending full HTML with stack traces in production.

3Use JSON error responses for faster client parsing and rendering.

Performance Quiz - 3 Questions

Which error response format generally improves interaction responsiveness in Express apps?

A Sending large images as error responses

B Full HTML pages with stack traces

C Minimal JSON error messages

D Redirecting to another page on error

DevTools: Network

How to check: Open DevTools > Network tab, trigger an error response, select the error request, and check the Response size and Timing waterfall.

What to look for: Look for large response sizes and long blocking times indicating slow error response delivery.

Practice

1. What is the main purpose of using res.status() in Express error handling?

easy

A. To redirect the user to an error page

B. To send the error message as plain text

C. To set the HTTP status code of the response

D. To log the error on the server console

Solution

1. Step 1: Understand the role of res.status()

   This method sets the HTTP status code that tells the client what kind of response it is (success, error, etc.).

2. Step 2: Differentiate from other response methods

   Unlike sending messages or logging, res.status() only sets the status code, which is essential for error handling.

3. Final Answer:

   To set the HTTP status code of the response -> Option C

4. Quick Check:

   res.status() sets status code [OK]

Hint: Remember: status() sets code, json() sends data [OK]

Common Mistakes:

• Confusing status() with sending the error message
• Using status() to log errors instead of setting code
• Thinking status() redirects the user

2. Which of the following is the correct way to send a JSON error response with status 404 in Express?

easy

A. res.json(404).send({ error: 'Not found' })

B. res.sendStatus(404).json({ error: 'Not found' })

C. res.status(404).send('Not found')

D. res.status(404).json({ error: 'Not found' })

Solution

1. Step 1: Identify correct chaining of methods

   In Express, res.status(code) sets the status, and res.json(object) sends JSON data.

2. Step 2: Check each option's syntax

   res.status(404).json({ error: 'Not found' }) correctly chains status(404) and json({ error: 'Not found' }). Others misuse method order or types.

3. Final Answer:

   res.status(404).json({ error: 'Not found' }) -> Option D

4. Quick Check:

   Use status() then json() [OK]

Hint: Set status first, then send JSON with json() [OK]

Common Mistakes:

• Calling json() before status()
• Using sendStatus() then json() which is invalid
• Sending plain text instead of JSON for errors

3. What will be the HTTP status code and JSON response body when this Express code runs?

app.get('/data', (req, res) => {
  if (!req.query.id) {
    return res.status(400).json({ error: 'ID is required' });
  }
  res.json({ id: req.query.id });
});

medium

A. Status 400 with body { error: 'ID is required' }

B. Status 200 with body { id: undefined }

C. Status 404 with body { error: 'Not found' }

D. Status 500 with empty body

Solution

1. Step 1: Analyze the condition for missing query parameter

   If req.query.id is missing, the code returns a 400 status with JSON error message.

2. Step 2: Understand the response when ID is missing

   The code sends res.status(400).json({ error: 'ID is required' }), so status is 400 and body contains the error message.

3. Final Answer:

   Status 400 with body { error: 'ID is required' } -> Option A

4. Quick Check:

   Missing id triggers 400 error JSON [OK]

Hint: Check conditions that trigger res.status() before sending response [OK]

Common Mistakes:

• Assuming status 200 when id is missing
• Confusing 400 with 404 status codes
• Ignoring the early return on error

4. Identify the error in this Express error response code:

app.use((err, req, res, next) => {
  res.json({ error: err.message });
  res.status(500);
});

medium

A. The status code is set after sending the response

B. The error message should not be sent in JSON

C. The middleware is missing the next() call

D. The error handler should not have four parameters

Solution

1. Step 1: Check order of response methods

   Calling res.json() sends the response immediately. Setting status after sending has no effect.

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

   Status must be set before sending JSON: res.status(500).json(...).

3. Final Answer:

   The status code is set after sending the response -> Option A

4. Quick Check:

   Status before sending response [OK]

Hint: Always set status before sending response [OK]

Common Mistakes:

• Setting status after res.json()
• Not sending status at all
• Misunderstanding middleware parameters

5. You want to send a 422 Unprocessable Entity error with a JSON body containing { error: 'Invalid input', fields: ['name', 'email'] }. Which Express code snippet correctly formats this error response?

hard

A. res.json({ error: 'Invalid input', fields: ['name', 'email'] }).status(422);

B. res.status(422).json({ error: 'Invalid input', fields: ['name', 'email'] });

C. res.sendStatus(422).json({ error: 'Invalid input', fields: ['name', 'email'] });

D. res.status(400).json({ error: 'Invalid input', fields: ['name', 'email'] });

Solution

1. Step 1: Choose the correct status code and method order

   Use res.status(422) to set the correct HTTP status code before sending JSON.

2. Step 2: Verify the JSON body matches the required error format

   The JSON object includes both error and fields keys as specified.

3. Final Answer:

   res.status(422).json({ error: 'Invalid input', fields: ['name', 'email'] }); -> Option B

4. Quick Check:

   Status 422 then json() with error details [OK]

Hint: Set status 422 first, then send JSON error object [OK]

Common Mistakes:

• Calling json() before status()
• Using wrong status code like 400
• Using sendStatus() which sends no JSON body