Error handling across the stack

User action
  → Frontend validation error     (missing field)
  → Network error                 (server down, no internet)
  → Backend validation error      (invalid email format)
  → Backend business logic error  (duplicate email)
  → Database error                (connection timeout)

from fastapi import HTTPException

@app.post("/api/users", status_code=201)
def create_user(data: UserCreate):
    # Business logic error
    if any(u["email"] == data.email for u in users):
        raise HTTPException(
            status_code=409,
            detail="A user with this email already exists"
        )

    new_user = save_user(data)
    return new_user

@app.get("/api/users/{user_id}")
def get_user(user_id: int):
    user = find_user(user_id)
    if not user:
        raise HTTPException(
            status_code=404,
            detail="User not found"
        )
    return user

// frontend/src/api/client.js
const API_URL = import.meta.env.VITE_API_BASE_URL;

export async function apiClient(endpoint, options = {}) {
  let response;

  try {
    response = await fetch(`${API_URL}${endpoint}`, {
      headers: { "Content-Type": "application/json", ...options.headers },
      ...options,
    });
  } catch (err) {
    // Network error — server is down, no internet, CORS issue
    throw new Error("Unable to connect to the server. Please check your connection.");
  }

  if (!response.ok) {
    const errorData = await response.json().catch(() => ({}));

    // FastAPI validation errors (422)
    if (response.status === 422 && Array.isArray(errorData.detail)) {
      const fieldErrors = {};
      for (const err of errorData.detail) {
        const field = err.loc[err.loc.length - 1];
        fieldErrors[field] = err.msg;
      }
      const error = new Error("Please fix the highlighted fields");
      error.fieldErrors = fieldErrors;
      throw error;
    }

    // All other errors — use the backend's message
    throw new Error(errorData.detail || `Something went wrong (HTTP ${response.status})`);
  }

  if (response.status === 204) return null;
  return response.json();
}

function CreateUserForm({ onSubmit }) {
  const [formData, setFormData] = useState({ name: "", email: "" });
  const [errors, setErrors] = useState({});       // Field-level errors
  const [globalError, setGlobalError] = useState(null); // General errors
  const [submitting, setSubmitting] = useState(false);

  async function handleSubmit(e) {
    e.preventDefault();
    setErrors({});
    setGlobalError(null);
    setSubmitting(true);

    try {
      await onSubmit(formData);
      setFormData({ name: "", email: "" });
    } catch (err) {
      if (err.fieldErrors) {
        // Validation errors → show next to each field
        setErrors(err.fieldErrors);
      } else {
        // Network/server errors → show at the top
        setGlobalError(err.message);
      }
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {globalError && (
        <div className="error-banner">{globalError}</div>
      )}

      <div>
        <input name="name" value={formData.name} onChange={...} />
        {errors.name && <p className="field-error">{errors.name}</p>}
      </div>

      <div>
        <input name="email" value={formData.email} onChange={...} />
        {errors.email && <p className="field-error">{errors.email}</p>}
      </div>

      <button disabled={submitting}>
        {submitting ? "Saving..." : "Save"}
      </button>
    </form>
  );
}

function UserDashboard() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  async function loadUsers() {
    try {
      setLoading(true);
      setError(null);
      const data = await getUsers();
      setUsers(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => { loadUsers(); }, []);

  if (loading) return <p>Loading...</p>;

  if (error) {
    return (
      <div className="error-page">
        <h2>Something went wrong</h2>
        <p>{error}</p>
        <button onClick={loadUsers}>Try Again</button>
      </div>
    );
  }

  return (
    <div>
      <h1>Users</h1>
      {/* ... */}
    </div>
  );
}

FastAPI raises HTTPException(status_code=409, detail="Email already exists")
  ↓
HTTP response: { "detail": "Email already exists" } with status 409
  ↓
apiClient() reads response, throws new Error("Email already exists")
  ↓
Component catches error, calls setGlobalError("Email already exists")
  ↓
User sees: "Email already exists" on screen