node.js - React EventSource krijgt soms geen gegevens van NodeJs-backend

Ik gebruik een React-component om realtime gegevens van de server te krijgen. Ik gebruik EventSource en luister op mijn serverendpoint. Ik ontvang gegevens... 80% van de tijd. Vanaf de backend ontvang ik 100% van de gegevens uit MongoDB, maar wanneer ik ze naar de frontend stuur, krijg ik ze niet altijd.

Ik heb geen fout in de console of het netwerkblad in de browser.

Server :

export const realTimeLogs = async (req: Request, res: Response) => {
  res.writeHead(200, {
    Connection: 'keep-alive',
    'Keep-Alive': 'timeout=3600, max=10',
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Transfer-Encoding': 'chunked',
    'Access-Control-Allow-Origin': 'http://localhost:3000',
    'Access-Control-Allow-Credentials': 'true',
    'X-Accel-Buffering': 'no',
  });
  res.write(''); //Without this, the EventSource.open event would not get triggered.
  writeStream(res);
}

  const writeStream = async (res: Response) => {
  const msg: ReceiveMessageCommandOutput = await createAndReceiveMessage(
    'mySQSQueue'
  ); //Get data from SQS
  if (msg.Messages) {
    const msgBody: string | undefined = msg.Messages[0].Body;
    console.log(`${msgBody}`); //The server gets 100% of the messagges, I see it here.
    const receiptHandle: string | undefined = msg.Messages[0].ReceiptHandle;
    setTimeout(() => {
      res.write('retry: 10000\n', 'utf-8');
      res.write(`id: ${JSON.parse(msgBody!).payload._id}\n`, 'utf-8');
      res.write('event: message\n');
      res.write(`data: ${msgBody}\n\n`, 'utf-8'); //THIS IS HOW REACT CLIENT SHOULD GET DATA
    }, 0);
    if (receiptHandle)
      await createAndDeleteMessage('mySQSQueue', receiptHandle);
  }
  let timeout = setTimeout(() => {
    clearTimeout(timeout);
    return writeStream(res); //Re-call this function as infinite loop.
  }, 5000);
};

Terwijl de React-client:

useEffect(() => {
    console.log('RE-RENDER');
    const source = new EventSource(
      `${BASE_URL}/${ROOT_ENDPOINTS.MANAGER}/${MANAGER_ENDPOINTS.GETREALTIMELOGS}`,
      {
        withCredentials: true,
      }
    );
    source.onopen = (event: Event) => {
      console.log('OnOpen: ', event);
    };
    source.onerror = (event: Event) => {
      console.error('Errore: ', event);
    };
    source.onmessage = (event: MessageEvent) => {
      let payload: MSGManager;
      try {
        payload = JSON.parse(event.data);
        eventSourceHandler(payload);
      } catch (e) {
        console.error('errore: ', e);
      }
    };
    setEventSource(source);

    return () => {
      console.log('CLEANUP');
      eventSource?.close();
    };


    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

Ik krijg realtime gegevens zonder probleem, het enige probleem is dat niet alles bij de cliënt terechtkomt. Bijvoorbeeld, 6 van de 10 berichten worden correct ontvangen, soms 1 van de 15, dit is zo willekeurig. Er zijn geen fouten in de console en de verbinding blijft altijd actief. Ik kan nergens een oplossing op het internet vinden.

BEWERKEN: Het lijkt erop dat ik alleen de regel res.write("data: myData\n\n") nodig heb om de onmessage() listener te gebruiken. Anders lijkt het dat de listener het bericht niet altijd ontvangt als er iets voor data staat. Nu, als ik de pagina vernieuw, krijg ik hetzelfde probleem, maar als ik ook de server en de pagina opnieuw instel, werkt het nog steeds en ontvang ik 100% van de berichten.