I've stumbled about a strange bug that I can't wrap my head around.

In an application I'm working on, due to an error, a fetch with a way to big URL was triggered. Because that fetch is so big it fails (414 - request entity too large).

All fine up to this point.

Now, due to a completely unrelated part of the application, a second fetch was made to the same API. Strangely this second, unrelated fetch fails too.

I created a minimal reproduction for it to find out what causes this weird behaviour. It turns out it only happens with the following criteria:

• Second fetch must request the same API
• Second fetch must happen in a certain time period (setTimeout with short delay also fails, but if you increase that value, at some point the issue disappears)

This behaviour seems to be reproducible on all major browsers. I used mainly chrome.

Code that illustrates issue:

import { useEffect, useState } from "react";

function App() {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    // way to big fetch
    fetch(
      "https://catfact.ninja/fact/failurefetch?long=INSERT_ABSURDLY_LONG_STRING_RIGH_HERE_THAT_REACHES_URL_LIMIT",
      { method: "GET" }
    ).then((res) => res.json());
  }, [counter]);
  useEffect(() => {
    // fails
    fetch("https://catfact.ninja/fact", { method: "GET" });
    // also fails
    setTimeout(() => {
      fetch("https://catfact.ninja/fact", { method: "GET" });
    }, 10);
    // works
    setTimeout(() => {
      fetch("https://catfact.ninja/fact", { method: "GET" });
    }, 1000);
  }, [counter]);

  return (
    <div
      className="App"
      onClick={() => {
        setCounter((prev) => prev + 1);
      }}
    >
      Refetch
    </div>
  );
}

export default App;

Reproduction codesandbox