Q60- A user submits a form but the data isn't appearing in the database. Walk me through how you would debug this from the frontend to the backend.

When a user submits a form but the data doesn’t show up in the database, debugging requires a step-by-step approach from frontend to backend.

---

1. Frontend Checks

• Form Validation: Ensure all required fields are filled and validation passes.
• Network Request: Open browser DevTools → Network tab → check if the API request is being sent.
  • Confirm HTTP method (POST/PUT) is correct.
  • Check request payload matches backend expectations.
  • Look at response status and body (errors, 4xx, 5xx).
• Console Errors: Check for JS errors that might prevent submission.
• CORS Issues: Ensure cross-origin requests aren’t blocked.

Example:

fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name, email })
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));

---

2. Backend Checks

• Route Handling: Confirm the endpoint exists and matches frontend URL/method.
• Request Parsing: Ensure middleware like express.json() is used for JSON bodies.

app.use(express.json());
app.post("/api/users", (req, res) => {
  console.log(req.body); // check incoming data
});

• Validation & Errors: Check if backend rejects the request (missing fields, type errors).
• Authentication/Authorization: Confirm user has permission to write data.

---

3. Database Checks

• Connection: Verify backend is connected to the database.
• Query Execution: Log query results to see if insertion succeeds.

db.collection("users").insertOne(req.body, (err, result) => {
  if (err) console.error("DB Insert Error:", err);
  else console.log("Inserted:", result);
});

• Database State: Check if the record exists in the correct collection/table.
• Schema Constraints: Ensure fields match the database schema (types, required fields, unique constraints).

---

4. End-to-End Debugging Approach

1. Check frontend console and network tab → request sent? payload correct?
2. Check backend logs → request received? errors thrown?
3. Check database connection and insertion → did the data actually write?
4. Fix errors at the layer where the problem occurs.

---

Tips for Faster Debugging

• Use Postman or curl to test API independently of frontend.
• Add logging at each step (frontend, backend, database).
• Confirm environment variables for DB connection in production vs development.
• Check for async issues: maybe insertion is async and missing await or callback.

---

✅ Summary:
Debugging requires checking frontend submission → network request → backend handling → database insertion step by step, logging at each layer, and using tools like DevTools, Postman, and backend logs to identify where the failure occurs.