What is a 404 Error?

Why 404s happen

When you visit a URL, your browser asks a server: “Give me this page.” The server looks for it and responds with a status code.

404 scenarios:

• The page existed but was deleted
• The URL has a typo (/abuot instead of /about)
• Someone linked to a page that never existed
• The site restructured and old URLs no longer work
• You’re trying to access a resource that requires different permissions

The server isn’t broken - it just can’t find what you asked for.

HTTP status codes explained

404 is part of a larger system. Every HTTP response includes a status code telling you what happened:

Success (2xx) ✅

Redirect (3xx) ↪️

Client Error (4xx) ❌

Server Error (5xx) 💥

The codes you’ll see most as a vibecoder

200: Your API call worked. Parse the response and use the data.

400: Your request body is malformed. Check your JSON syntax, required fields, and data types.

401: Your API key is missing or invalid. Check your authentication headers.

403: Your API key is valid but doesn’t have permission for this action. Check your account settings or plan limits.

404: The endpoint or resource doesn’t exist. Check the URL, check the API docs.

429: You hit the rate limit. Slow down, implement backoff, or upgrade your plan.

500: The server broke. Usually not your fault - try again later or check the service’s status page.

Debugging API errors

When your API call fails, the status code tells you where to look:

const response = await fetch('/api/chat', {
  method: 'POST',
  body: JSON.stringify({ message: 'Hello' })
});

if (!response.ok) {
  console.log('Status:', response.status);
  const error = await response.json();
  console.log('Error:', error);
  
  // Now you know:
  // 400 → Check your request body
  // 401 → Check your API key
  // 404 → Check the URL
  // 429 → Slow down
  // 500 → Server problem, retry later
}

Handling errors in your app

Good error handling means showing users helpful messages, not cryptic codes:

async function callAI(prompt) {
  const response = await fetch('/api/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt })
  });

  if (response.status === 429) {
    return { error: "We're getting too many requests. Please wait a moment." };
  }
  
  if (response.status === 401) {
    return { error: "There's a problem with our AI connection. We're on it." };
  }
  
  if (response.status >= 500) {
    return { error: "The AI service is temporarily unavailable. Try again soon." };
  }
  
  if (!response.ok) {
    return { error: "Something went wrong. Please try again." };
  }
  
  return await response.json();
}

Creating custom 404 pages

When users hit a 404 on your site, don’t show them a blank error. Help them:

Next.js:

// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h1>Page not found</h1>
      <p>The page you're looking for doesn't exist.</p>
      <a href="/">Go home</a>
    </div>
  );
}

Express:

// Put this LAST, after all other routes
app.use((req, res) => {
  res.status(404).json({ 
    error: 'Not found',
    message: `No route matches ${req.method} ${req.path}`
  });
});

404 vs. other “not working” situations

The developer tools trick

When something isn’t working:

1. Open browser DevTools (F12 or Cmd+Opt+I)
2. Go to the Network tab
3. Refresh the page or retry the action
4. Look at the status codes

This shows you exactly what’s happening at the HTTP level - which requests succeeded, which failed, and why.

Further reading

• What is an API? : How HTTP requests work
• What is rate limiting? : Understanding 429 errors
• What is localhost? : Where these errors happen during development