Me he topado con un error extraño que no puedo entender.

En una aplicación en la que estoy trabajando, debido a un error, se activó una búsqueda con una forma de URL grande. Debido a que esa búsqueda es tan grande que falla (414 - entidad de solicitud demasiado grande).

Todo bien hasta este punto.

Ahora, debido a una parte completamente ajena de la aplicación, se realizó una segunda búsqueda en la misma API. Curiosamente, esta segunda búsqueda no relacionada también falla .

Creé una reproducción mínima para averiguar qué causa este comportamiento extraño. Resulta que solo sucede con los siguientes criterios:

• La segunda búsqueda debe solicitar la misma API
• La segunda recuperación debe ocurrir en un período de tiempo determinado (setTimeout con un retraso breve también falla, pero si aumenta ese valor, en algún momento el problema desaparece)

Este comportamiento parece ser reproducible en todos los principales navegadores. Usé principalmente cromo.

Código que ilustra el problema:

 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;

Códigos de reproducciónandbox