Handling Errors and Loading States

Part 1: Robust Backend Error Handling

Currently, if an error occurs in one of your Express route handlers (e.g., a database error or an invalid request), it might crash your server or return an ugly, unhelpful HTML error page. We can fix this by creating a single, centralized "global error handling" middleware.

The Concept: Centralized Error Handling

The idea is simple: instead of putting try...catch blocks in every single route handler, we'll create a special middleware that Express will automatically jump to whenever an error occurs anywhere in our application. This keeps our code clean and gives us one place to define how all errors are logged and formatted for the client.

Implementation: Creating the Global Error Handler

Now let's see how to build this middleware. An Express error-handling middleware is unique because it has four parameters: (err, req, res, next).

Based on the video, let's create a new file middleware/errorHandler.js in your backend project:

// middleware/errorHandler.js

const errorHandler = (err, req, res, next) => {
  // If the error has a statusCode, use it, otherwise default to 500 (Internal Server Error)
  const statusCode = err.statusCode || 500;

  // If the error has a message, use it, otherwise provide a generic message
  const message = err.message || 'Internal Server Error';

  // In development, it's useful to log the full error
  if (process.env.NODE_ENV === 'development') {
    console.error(err.stack);
  }

  res.status(statusCode).json({
    success: false,
    message: message,
  });
};

export default errorHandler;

Now, you must register this as the very last middleware in your main server file (index.js or app.js). This placement is critical.

// In your main server file (e.g., index.js)
import express from 'express';
import taskRoutes from './routes/taskRoutes.js';
import authRoutes from './routes/authRoutes.js';
import errorHandler from './middleware/errorHandler.js'; // Import the handler

const app = express();

// ... other middleware like express.json(), cors(), etc.

// ... your routes
app.use('/api/auth', authRoutes);
app.use('/api/tasks', taskRoutes);

// Global Error Handler - MUST BE LAST
app.use(errorHandler);

// ... app.listen(...)

Simplifying Async Routes with catchAsync

To avoid writing try...catch in every async controller, we can use a simple utility function. This is a great example of the 80/20 principle—a small piece of code that provides huge value.

The article "Global Error Handling in Express.js" provides a perfect implementation of this.

Your utils/catchAsync.js should look like this:

// utils/catchAsync.js
export default function catchAsync(fn) {
  return function (req, res, next) {
    Promise.resolve(fn(req, res, next)).catch(next);
  };
}

Now, you can wrap your async route handlers with catchAsync. It automatically catches any promise rejections and passes the error to next(), which triggers our global handler.

Before:

// controllers/taskController.js
export const getTasks = async (req, res, next) => {
  try {
    const tasks = await Task.findAll({ where: { userId: req.user.id } });
    res.status(200).json(tasks);
  } catch (error) {
    next(error); // Manually passing the error
  }
};

After:

// routes/taskRoutes.js
import { getTasks } from '../controllers/taskController.js';
import catchAsync from '../utils/catchAsync.js';

router.get('/', protectRoute, catchAsync(getTasks)); // Wrap the controller here

// controllers/taskController.js
export const getTasks = async (req, res, next) => {
  // No more try/catch needed!
  const tasks = await Task.findAll({ where: { userId: req.user.id } });
  res.status(200).json(tasks);
};

Go ahead and apply the catchAsync wrapper to all your async route handlers. Your code is now much cleaner and more robust!

Part 2: Frontend Loading and Error States

On the frontend, user experience is paramount. Users should never see a blank or broken page. They need feedback: "Is the app working?" and "Did something go wrong?". We'll achieve this by managing loading and error states in our React components.

Managing Component State for API Calls

The core idea is to use useState to track the lifecycle of an API request.

1. isLoading: Is the request in progress?
2. data: If successful, what's the response?
3. error: If it failed, what was the error?

This video provides a perfect, practical demonstration.

Let's apply this to a component in your task manager, like the one that fetches and displays the list of tasks.

import React, { useState, useEffect } from 'react';
import { useAuth } from '../contexts/AuthContext';

const TaskList = () => {
  const [tasks, setTasks] = useState([]);
  const [isLoading, setIsLoading] = useState(true); // Start as true on initial load
  const [error, setError] = useState(null);
  const { token } = useAuth(); // Assuming your auth context provides the token

  useEffect(() => {
    const fetchTasks = async () => {
      // Reset states for subsequent fetches
      setError(null);
      setIsLoading(true);

      try {
        const response = await fetch('/api/tasks', {
          headers: {
            'Authorization': `Bearer ${token}`
          }
        });

        // This is the crucial check for server-side errors
        if (!response.ok) {
          const errorData = await response.json(); // Get error message from our backend
          throw new Error(errorData.message || 'Failed to fetch tasks');
        }

        const data = await response.json();
        setTasks(data);

      } catch (err) {
        // This catches both network errors and the thrown error above
        setError(err.message);
      } finally {
        // This runs whether the try or catch block completes
        setIsLoading(false);
      }
    };

    if (token) {
      fetchTasks();
    }
  }, [token]);

  // Conditional Rendering based on state
  if (isLoading) {
    return <p>Loading tasks...</p>;
  }

  if (error) {
    return <p style={{ color: 'red' }}>Error: {error}</p>;
  }

  return (
    <div>
      {tasks.length > 0 ? (
        <ul>
          {tasks.map(task => (
            <li key={task.id}>{task.title}</li>
          ))}
        </ul>
      ) : (
        <p>No tasks found. Create one!</p>
      )}
    </div>
  );
};

export default TaskList;

Polishing the UX: Skeleton Loaders

A simple "Loading..." message is good, but for a truly professional feel, you can use skeleton loaders. These are animated placeholders that mimic the shape of the content that is about to appear. They make the application feel faster and more responsive.

Implementing a basic skeleton loader can be done with simple HTML and CSS. For your task list, you could create a TaskSkeleton component:

// components/TaskSkeleton.js
const TaskSkeleton = () => (
  <div style={{
    backgroundColor: '#e0e0e0',
    borderRadius: '4px',
    height: '40px',
    marginBottom: '10px',
    // You can add a subtle animation here with CSS
  }}></div>
);

// In your TaskList component, when loading:
if (isLoading) {
  return (
    <div>
      <TaskSkeleton />
      <TaskSkeleton />
      <TaskSkeleton />
    </div>
  );
}

This gives the user a visual cue of the structure of the content they are waiting for.

Conclusion

In this crucial lesson, you've added a layer of professionalism and robustness to your capstone project that separates a student project from a production-ready application.

Key Takeaways:

• Backend: A centralized global error-handling middleware in Express keeps your code clean and provides consistent, secure error responses.
• Frontend: Managing isLoading and error states is essential for building a responsive user interface that provides clear feedback.
• Connection: The frontend's error state is powered by the structured JSON errors sent from the backend, creating a seamless error-handling experience.
• UX Polish: Simple additions like skeleton loaders can significantly improve the perceived performance and professionalism of your application.

Preview of the Next Module:
Your full-stack application is now feature-complete, robust, and user-friendly. There's only one step left: sharing it with the world! In the next and final module, Deployment and Production Best Practices, you will learn how to prepare your application for a production environment, deploy it to a cloud platform, and manage critical aspects like environment variables and CORS.