Browser errors

Status: 🟩 COMPLETE Last updated: 2026-06-21 Plain-English tagline: What the browser’s console shows when something’s wrong — CORS, hydration, mixed content, the “uncaught X” series. Paste the fragment, find the fix.

---

What this is

A lookup reference for errors that show up in the browser console (F12 → Console tab) or as in-page errors. Most are runtime issues — they happen when your code runs in the browser, not at build time. For build errors, see Build errors 🟩.

---

”Cross-Origin Request Blocked” / “CORS error”

What it means: Your page at https://a.com made a request to https://b.com, and b.com didn’t say it’s OK with that.

The mental model: browsers treat every origin (scheme + domain + port) as separate. By default, JavaScript on one origin can’t read responses from another. The server has to explicitly opt in via CORS headers.

Common situations and fixes:

1. Calling your own API from your own frontend — should “just work” since same origin. If it doesn’t: check that you’re using a relative path (/api/x) not an absolute one (https://example.com/api/x).

2. Calling a third-party API from the browser — the API needs to return:

   Access-Control-Allow-Origin: https://your-site.com
   

   If they don’t (or only allow * for public endpoints): proxy through your own server. Route the call through a Next.js Server Action or Route Handler.

3. Local dev calling a deployed API — the deployed API may CORS-allow https://your-site.com but not http://localhost:3000. Add localhost to the allow list (server-side config), or proxy via next dev.

4. “It works in Postman/curl but not in the browser” — Postman/curl don’t enforce CORS. Browsers do. The API may need updated headers.

Reference: How the web works — Same-origin policy and CORS 🟩

---

“Hydration failed because the initial UI does not match”

What it means: Next.js / React server-rendered HTML, then the client re-rendered, and the two didn’t match. React refuses to silently fix it.

Most common causes:

1. Time / date in render. new Date().toString() is different on server vs client.
2. Random values. Math.random() in render.
3. Browser-only APIs. window.innerWidth, localStorage.getItem(...) used directly in render.
4. Conditional rendering based on browser state. typeof window !== "undefined" ? A : B.
5. External HTML manipulation. Browser extensions or analytics scripts inserting elements before hydration.

Fix:

• Move dynamic / browser-specific code into useEffect (which only runs on the client after mount).
• Or move the component into a Client Component ("use client") AND render a stable placeholder during SSR.
• For browser extensions: usually not your bug, but you can suppress for known cases with suppressHydrationWarning={true}.

// BEFORE (causes hydration error)
function TimeDisplay() {
  return <p>{new Date().toLocaleTimeString()}</p>;
}
 
// AFTER
"use client";
import { useEffect, useState } from "react";
 
function TimeDisplay() {
  const [time, setTime] = useState("");
  useEffect(() => {
    setTime(new Date().toLocaleTimeString());
  }, []);
  return <p>{time}</p>;
}

Reference: Next.js — common gotchas 🟩 🟦, The DOM — hydration 🟩

---

“Mixed Content: The page was loaded over HTTPS, but requested an insecure resource”

What it means: Your HTTPS page tried to load something over HTTP. Browsers block this — it would defeat HTTPS.

Fix: change every http:// URL in your code to https:// (or remove the scheme to use protocol-relative: //example.com/image.png). This includes:

• <img src>, <script src>, <link href>
• API calls
• Iframe sources
• Background images in CSS

If the resource genuinely only exists over HTTP (legacy server), you’ll have to proxy it through HTTPS or upgrade the source.

Reference: How the web works — HTTPS 🟩, HTTPS 🟩

---

“Uncaught (in promise) TypeError: Failed to fetch”

What it means: A fetch() call rejected before getting a response. Usually network / CORS / DNS / connection issue.

Common causes:

1. Network is offline. navigator.onLine can tell you.
2. CORS preflight failed. The browser sent an OPTIONS request and didn’t get a valid response.
3. DNS / unreachable host. The URL is wrong or the server is down.
4. Local dev server stopped. You’re calling localhost:3000 but npm run dev isn’t running.
5. Self-signed cert in production-like env. Browser refuses to trust the connection.

Fix: check the Network tab in DevTools — it shows the actual request that failed and why. The Console error alone is often vague.

---

”Refused to load the script because it violates the following Content Security Policy”

What it means: A Content Security Policy (CSP) header on the page forbids loading scripts from this source.

Fix:

• For your own scripts: add the source to the CSP, or move the script inline (if CSP allows unsafe-inline).
• For third-party scripts (analytics, embeds): add their domain to script-src in the CSP header.
• For development: check next.config.js or vercel.json for CSP settings.

CSP is good for security but easy to over-tighten. Loosening it requires care.

---

”ResizeObserver loop completed with undelivered notifications”

What it means: A ResizeObserver callback caused a layout change that triggered another resize, which couldn’t be processed in the same frame.

Almost always: this is a harmless warning. Browsers protect against the loop and drop the callback. The next frame processes it normally.

Fix:

• Ignore it in most cases. It’s a “loud nothing.”
• If it causes visible flicker: the callback is likely setting state that resizes the same element. Restructure so size changes happen via different mechanisms (CSS variables, debounced updates).

This error is so noisy in production that many monitoring tools (Sentry, etc.) ignore it by default.

---

”Maximum update depth exceeded”

What it means: A React component is in an infinite render loop. Usually setState inside the render body, or useEffect updating its own dependency.

Common causes:

// BAD: setState in render body
function Component() {
  const [x, setX] = useState(0);
  setX(1);                          // re-renders → setX(1) → re-renders → ...
  return <div>{x}</div>;
}
 
// BAD: useEffect missing dependency check
useEffect(() => {
  setUser({ ...user, foo: true }); // new object identity every render
}, [user]);                        // user "changed" → re-run → ...

Fix:

• Move setState calls into event handlers, effects, or callbacks — never directly in render body.
• For effects that update their dependency: either remove the dependency, use a guard (if (user.foo) return), or use the function-form setter (setX(x => x + 1)).

Reference: React — common gotchas 🟩

---

“Warning: Each child in a list should have a unique ‘key’ prop”

What it means: You’re rendering a list (array.map(...)) without setting a stable key on each child.

Fix:

// BAD
{items.map(item => <li>{item.name}</li>)}
 
// OK (but only if order never changes)
{items.map((item, i) => <li key={i}>{item.name}</li>)}
 
// BEST
{items.map(item => <li key={item.id}>{item.name}</li>)}

Why it matters: without keys, React can’t efficiently update the list — it may re-create DOM nodes instead of moving them. Symptoms include lost form input state, broken animations, and the unhelpful warning above.

---

”Uncaught TypeError: Cannot read properties of undefined (reading ‘X’)”

What it means: Same as the build-time version, but happening at runtime: you tried to access .X on undefined.

Fix:

• Add optional chaining: obj?.X returns undefined instead of crashing.
• Add a guard: if (obj) { obj.X }.
• Find the source: the error stack tells you which line. Work backwards from there — where was obj supposed to be set?

For arrays: Array.isArray(x) && x.length > 0 before accessing x[0].

---

”Failed to load resource: net::ERR_BLOCKED_BY_CLIENT”

What it means: A browser extension (most often an ad blocker) blocked the resource.

Fix: usually not your code’s fault. But:

• If it’s analytics, ads, or trackers: expected.
• If it’s your own resource named like a tracker (e.g. analytics.js, track.js): rename it. Ad blockers match on filename heuristics.
• Test in an incognito window with extensions disabled to confirm.

---

”Loading chunk N failed” / “ChunkLoadError”

What it means: Code-splitting tried to load a JavaScript chunk that’s no longer available. Usually after a fresh deploy when the user’s tab is on the old version.

Fix:

• In production: prompt the user to refresh. Wrap dynamic imports in a try/catch and show a “we updated; please refresh” message.
• To prevent: Next.js + Vercel handle this for most users via consistent chunk hashing across deploys. But long-lived tabs can still hit it.

async function loadHeavyComponent() {
  try {
    return await import("./HeavyComponent");
  } catch (e) {
    window.location.reload();    // simplest recovery
  }
}

---

”Blocked a frame with origin ‘X’ from accessing a cross-origin frame”

What it means: Your iframe (or a parent of yours) tried to read/manipulate content from a different origin.

Fix: there isn’t a one. The same-origin policy explicitly prevents this. If you control both sides, use postMessage for cross-origin communication. If you don’t control both, you can’t access the other side’s content.

---

”Permissions policy violation: …”

What it means: A Permissions Policy header restricts a browser feature (camera, microphone, geolocation, etc.) and your code tried to use it.

Fix:

• For your own page: add the permission to your Permissions Policy header (Permissions-Policy: camera=(self)).
• For embedded iframes: the embedder controls what the iframe can do.

---

”Hydration completed but contains mismatches”

What it means: A milder variant of the hydration error — Next.js / React noted a mismatch but recovered. Page works, but the warning indicates an underlying issue worth fixing.

Fix: same as full hydration failure above — find time/random/browser-API uses in render.

---

”Source map error: NetworkError when attempting to fetch resource”

What it means: DevTools tried to fetch a .map file for debugging and failed (file missing, behind auth, etc.).

Fix: usually safe to ignore. In production, source maps are often not deployed. If you need them: configure Next.js to deploy them (productionBrowserSourceMaps: true in next.config.js).

---

See also

• Common errors — index 🟩
• Build errors 🟩
• Supabase errors 🟩 🟦
• Git errors 🟩
• How the web works 🟩 — the conversation model behind CORS, HTTPS, etc.
• The DOM 🟩
• React — common gotchas 🟩
• Next.js — common gotchas 🟩 🟦
• HTTPS 🟩
• OWASP top 10 🟩

---

Sources

• MDN — Errors reference
• MDN — Cross-Origin Resource Sharing
• MDN — Content Security Policy
• React docs — Common errors
• Next.js — Error messages