My AI Spend Audit app worked perfectly locally—until I connected the frontend to MongoDB. Suddenly, every audit submission returned a 500, and the browser showed Failed to save audit. The weird part? The request sometimes took almost 30 seconds before failing.
I initially suspected my API payload or Mongoose model. I checked the request body, schema, and API route, but everything looked correct. The timeout finally pointed me toward the database connection rather than the frontend.
After debugging MongoDB Atlas connectivity and environment configuration, I fixed the connection issue and the API started persisting audits successfully.
But wait bro the chaos wasn't over yet. My new /audit/[id] report page returned a 404. The logs revealed that modern Next.js was treating dynamic params as a Promise. I was accessing params.id synchronously, so I changed the server component to await the params before querying MongoDB.
After both fixes, the flow became:
Form → API → MongoDB → /audit/[id] → Shareable Report
I also added automated tests around the audit engine and verified the production build before deployment.
The biggest lesson wasn't just how to fix two bugs—it was learning to follow the evidence. A 500 wasn't necessarily a frontend problem, and a 404 wasn't necessarily a missing page. Logs, timing, and framework errors told the real story.
The bug didn't just get fixed. The system became more resilient because of it.
Well well !!!!!
Guys here is the--
Live link : [https://credexproject-eta.vercel.app/](https://credexproject-eta.vercel.app/)
Git Repo : [https://github.com/Shezalpatelcode/ai-spend-audit](https://github.com/Shezalpatelcode/ai-spend-audit)
~ Written By : Sheezal Patel
#bugsmash tag #devchallenge #challenge #WebDev #Development