Advertisement
webdev • A 404 error occurs when a user requests a page that doesn’t exist. In frontend development, encountering 404 errors is common, but handling them gracefully improves user experience and reduces frustration. This tutorial explains, step by step, how to detect, display, and customize 404 error pages.

Handling 404 Errors Gracefully in Frontend (Beginner-Friendly Guide)

5 Min Read Verified Content

# Step 1 — Understand What a 404 Error Is

  • 404 Not Found → server or client cannot find the requested resource

  • Happens when:

    • User types a wrong URL

    • Page or file has been deleted

    • Links are broken

  • Goal → show a friendly message instead of a browser’s default error page


## Step 2 — Create a Simple 404 Page

Create a file named 404.html in your project:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Not Found</title>
<style>
  body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
  h1 { font-size: 50px; }
  p { font-size: 20px; }
  a { text-decoration: none; color: #007BFF; }
</style>
</head>
<body>
  <h1>404</h1>
  <p>Oops! The page you’re looking for does not exist.</p>
  <a href="/">Go back home</a>
</body>
</html>

  • Friendly and readable

  • Includes a link back to home


## Step 3 — Configure Your Web Server

For Nginx

Edit server block:

server {
    listen 80;
    server_name example.com;

    root /var/www/html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    error_page 404 /404.html;
}

  • error_page 404 /404.html; → serves your custom page

For Apache

Add to .htaccess:

ErrorDocument 404 /404.html

  • Ensure AllowOverride All is enabled in Apache config


## Step 4 — Handle 404 in Single Page Applications (SPA)

Frameworks like React, Vue, or Angular require frontend routing:

React Example (React Router v6)

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} /> {/* Catch all */}
      </Routes>
    </Router>
  );
}

export default App;

  • path="*" → catches all unmatched routes

  • Display a NotFound component


## Step 5 — Make 404 Page Useful

Enhance user experience:

  • Add search box → help users find content

  • Add navigation links → home, categories

  • Include fun graphics or illustrations → make it less frustrating

  • Optional: log 404 errors to analytics to fix broken links

## Step 6 — Test Your 404 Page

  • Try visiting a nonexistent URL: /nonexistent-page

  • Ensure:

    • Your 404 page is displayed

    • Status code remains 404 (important for SEO)

Check with browser dev tools → Network tab → status code = 404


## Step 7 — Beginner-Friendly Checklist

ProblemDiagnosisFix
404 default pageBrowser default pageCreate custom 404.html
Web server ignores 404Test URLConfigure Nginx/Apache error page
SPA routing failsUnmatched routeUse catch-all route in router
Poor UXUsers confusedAdd navigation, search, illustrations
SEO impactBots see wrong contentEnsure 404 status code is preserved


## Conclusion

Handling 404 errors gracefully improves both user experience and site professionalism. Beginners can follow these steps to:

  • Create a friendly custom 404 page

  • Configure web server or SPA routing

  • Enhance user navigation

  • Preserve SEO-friendly 404 status codes

A well-designed 404 page turns a frustrating moment into an opportunity to guide users back on track.

Advertisement
Back to Webdev