Local works, prod fails. WhyReverse proxy timeout limits. Fix Increase server timeout or chunk responses.
Category: JavaScript
JavaScript Memory Leaks Without Errors
Page slows over time. WhyDetached DOM references. Fix Null unused references.
AJAX Requests Work Locally But Fail in Production
No errors, no data. Why it happensCORS preflight blocked by server config. FixAllow OPTIONS requests explicitly.
JavaScript forEach Can’t Be awaited
Silent async bugs everywhere. Why it happensforEach ignores promises. FixUse for…of or Promise.all.
AJAX — Network Requests Blocked by Mixed Content
HTTPS page calling HTTP endpoint fails silently. Fix Serve everything over HTTPS.
JavaScript — map() Without Return Creates Undefined Arrays
Easy-to-miss bug. Fix Always return explicitly inside map.
AJAX — Browser Caches GET Requests Silently
Repeated GET calls may not hit the server. ✅ Fix Add cache-busting or proper headers.
JavaScript — NaN !== NaN Breaks Comparisons
NaN is never equal to itself. ✅ Fix Use: Number.isNaN(value)
AJAX — 204 Responses Break JSON Parsing
204 No Content has no body. ❌ Crash response.json() ✅ Fix Check status before parsing.
JavaScript — Object.freeze() Is Shallow
Nested objects remain mutable. ✅ Fix Use deep-freeze utilities if immutability matters.
Modern Fetch with Async/Await
The Problem: You are stuck in “Callback Hell” or complex Promise chains using old XHR or jQuery. The Fix: Use modern fetch inside an async function. It reads like synchronous code. async function getData() { try { const response = await fetch(‘https://api.example.com/data’); const data = await response.json(); console.log(data); } catch (error) { console.error(‘Fetch failed:’, error); […]
Optional Chaining (?.)
The Problem: Your console is full of “Uncaught TypeError: Cannot read property ‘x’ of undefined” because an API response was missing data. The Fix: Use ?. to safely access nested properties. It short-circuits to undefined instead of crashing. // Old risky way const street = user && user.address && user.address.street; // Life-saver way const street […]
AJAX — Missing credentials Breaks Auth Cookies
fetch(url) ❌ Problem Cookies not sent. ✅ Fix credentials: “include”
JavaScript — setInterval Drifts Over Time
Intervals accumulate delay. ❌ Result Timers become inaccurate. ✅ Fix Use recursive setTimeout.
AJAX — Fetch Does NOT Reject on HTTP Errors
This surprises many devs. fetch(url) // resolves on 404 ✅ Correct Manually check: if (!response.ok) throw Error();
JavaScript — == Can Change Logic After Refactors
Loose equality causes temporal bugs. if (value == false) ❌ Problem 0, “”, null behave differently over time. ✅ Rule Always use ===.
AJAX — Preflight Requests Are Real Requests
CORS preflight: Hits server Costs latency Can be blocked ✅ Optimize Avoid unnecessary custom headers.
JavaScript — JSON.stringify Can Crash on Big Objects
Circular references = runtime error. ✅ Safer Use structured cloning or custom serializers.
AJAX — Network Tab Lies About Timing
Browser timing includes: DNS SSL Queuing Connection reuse Real insight Use Server-Timing headers for truth.
JavaScript — structuredClone() Beats JSON Tricks
Instead of: JSON.parse(JSON.stringify(obj)) Use: structuredClone(obj); Why Preserves Dates, Maps, Sets Faster Safer
Silent JSON Parsing Failures
Backend returns HTML error page → JS crashes silently. ✅ Fix Always check: response.headers.get(“content-type”) Before parsing JSON.
Microtasks vs Macrotasks — Why setTimeout(0) Lies
Promise.then() // microtask setTimeout() // macrotask 🔥 Reality Microtasks run before repaint. This affects rendering bugs and race conditions.
CORS Errors That Are NOT CORS Errors
Most “CORS issues” are actually: 401 responses Missing headers Redirects ✅ Debug Tip Check Network → Response headers, not console.
Event Listeners Causing Memory Leaks
Detached DOM nodes still hold listeners. ❌ Problem element.addEventListener(…) ✅ Fix Remove listeners explicitly or use { once: true }.
AJAX Requests Canceled on Page Navigation
Requests silently stop. 🧠 Reason Browser cancels in-flight requests. ✅ Fix Use navigator.sendBeacon() for critical logs.
Floating Point Math Is Lying to You
0.1 + 0.2 === 0.3 // false ✅ Fix Use rounding: Number((0.1 + 0.2).toFixed(2))
Silent AJAX Failures — Missing Content-Type
Backend never hits controller? ✅ Fix headers: { “Content-Type”: “application/json” }
forEach + async — A Hidden Logic Bug
This does not await: array.forEach(async x => await save(x)); ✅ Fix for (const x of array) { await save(x); }
AJAX Requests Timeout Randomly — Browser Connection Limits
Browsers limit concurrent connections per domain. ✅ Fix Throttle requests or queue them: await Promise.allSettled(queue.map(run)); Especially important for dashboards batch uploads
JS “Undefined Is Not Null” — The Bug That Breaks APIs
undefined !== null ✅ Defensive Check if (value == null) { // catches both null and undefined } Use strict checks only when you really need them.